javascript - 需要帮助重构 JavaScript 代码，使其更易于修改、维护且更加健壮

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this question

搜索页面有很多用面包屑跟踪的方面，可以添加到缩小搜索范围的附加部分，保存搜索，实时更新的结果计数，等等。我使用 JavaScript 和 jQuery 来处理所有 UI 内容，并且此代码基本上是函数和大型文档就绪函数的混搭。触发搜索时，系统会根据 UI 中显示的内容收集条件。因此，例如为了获取一些方面，我实际上只是查看当前显示的面包屑并查看它们的数据()/文本/类/等。确定标准。

我需要的是有关如何为此类应用程序组织和设计代码的帮助。我没有一个连贯的问题，但我会尝试几个。

• 像对待 Java 中的对象一样对待 DOM 元素是一种好的做法吗？例如，我有一个面包屑，它实际上只是一个 div。我有创建面包屑、删除面包屑等功能。我像对待对象的字段一样对待文本和 data()。

• 继续前面的示例，我实际上没有 Crumb JavaScript 对象。我是不是该？保持对象和元素之间关联的最佳方法是什么，特别是因为它们不断被创建和删除。

• 有点离题，但是有什么测试建议吗？我所做的一切都没有经过单元测试，这确实不适合我......

TL;DR 在学习 JavaScript 的同时必须尽快构建一个复杂的搜索 UI，结果变得一团糟。需要有关最佳实践以及如何组织代码的帮助。

Answer 1

由于您已经在使用 jQuery，因此您可以通过以下选项来利用它:

1. jQuery 已经为 DOM 对象提供了一个 DOM 包装器，该对象提供了包装器和许多方法。您可以使用它而不是创建自己的包装对象。

2. 您可以轻松创建新方法来操作 jQuery 对象(如果这能让第 1 项更加练习)。 jQuery 插件并不比 jQuery.myMethod = function() { code here } 更难。

3. 如果您想要拥有自己的对象和自己的方法，那么它可以只包含相关的 DOM 元素或 DOM 元素上的相关 jQuery 包装器(取决于您是否经常需要 jQuery 对象来进行操作) DOM 元素)。

4. jQuery 提供了 .data()，它允许您以只要 DOM 元素持续存在就持续存在的方式访问和存储 DOM 元素的属性，但不会导致内存泄漏。如果您不构建自己的对象，则可以使用它来存储与 DOM 元素关联的实例数据。如果您正在构建自己的包含 DOM 元素的对象，那么您可以直接将属性存储在您自己的对象上。

5. 通常最好不要在 DOM 元素本身上存储大量自定义属性，因此您应该将它们存储在您自己的自定义 javascript 对象中，或者使用 jQuery 的 .data() 之类的东西.

关于如何最好地做到这一点的更多细节需要彻底了解您正在做什么、您的操作是什么、元素的生命周期如何工作、您需要跟踪哪些实例数据、您如何访问和存储或查找对这些元素的引用等...没有单一的答案，因为适当的架构取决于您除了非常非常一般的级别之外尚未披露的许多要求。