需要帮助重构JavaScript代码,以便更容易修改,维护和更强大

时间:2014-09-22 20:03:21

标签: javascript jquery html

搜索页面有许多方面,可以使用面包屑跟踪,可以添加到狭窄搜索中的其他部分,保存搜索,实时更新的结果计数,以及大量内容。我使用JavaScript和jQuery来处理所有UI的东西,而这段代码基本上是一个功能混合和一个很大的问题。文件就绪功能。触发搜索时,将根据UI中显示的内容收集条件。因此,例如,为了获得一些方面,我只是看看当前显示的面包屑是什么,并查看他们的数据()/文本/类/等。确定标准。

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

  • 对待DOM元素是否可行,就像对象一样,Java?例如,我有一个面包屑,它实际上只是一个div。我有创建面包屑,删除它们等功能。我像处理对象的字段一样处理文本和数据()。

  • 继续上一个例子,我实际上没有一个Crumb JavaScript对象。我是不是该?保持对象和元素之间关联的最佳方法是什么,特别是因为这些是不断创建和删除的。

  • 略有切向,但有任何测试建议吗?我所做的一切都是经过单元测试的,我真的不能和我坐在一起......

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

1 个答案:

答案 0 :(得分:1)

由于您已经在使用jQuery,因此您可以使用以下选项来充分利用它:

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

  2. 如果使第1项更加实践,您可以轻松地创建操作jQuery对象的新方法。 jQuery插件并不比jQuery.myMethod = function() { code here }更难。

  3. 如果您希望自己的对象使用自己的方法,那么它可以在DOM元素上包含相关的DOM元素或相关的jQuery包装器(取决于您是否经常需要jQuery对象才能操作DOM元素)。

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

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

  6. 有关如何最好地执行此操作的详细信息需要全面了解您正在做什么,您的操作是什么,元素的生命周期如何,您需要跟踪的实例数据,访问方式以及存储或查找对这些元素的引用等......没有单一的答案,因为适当的体系结构取决于您在非常非常一般的层面上没有公开的许多要求。