在DOM中使用模块化设计模式进行DOM选择

概述我一直在追踪 Modular Design Pattern一段时间，发现它非常有用，因为它有助于维护代码和数据。将块分离成模块。 使用jQuery定期使用模块结构导致我的大部分应用程序/代码遵循以下结构： (function() { var chat = { websocket: new WebSocket("ws://echo.websocket.org/"), 我一直在追踪 Modular Design Pattern一段时间，发现它非常有用，因为它有助于维护代码和数据。将块分离成模块。

使用jquery定期使用模块结构导致我的大部分应用程序/代码遵循以下结构：

(function() {    var chat = {        websocket: new WebSocket("ws://echo.websocket.org/"),that: this,init: function() {            this.scrollToBottom();            this.bindEvents();            this.webSocketHandlers();        },bindEvents: function() {            this.toggleChat();            this.filterPeople();            this.compose();        },elements: {            indicator: $(".indicator"),statusText: $(".status-text"),chatheadnames: $(".people li .name"),filterinput: $("#filter-input"),msginput: $("#msg-input"),sendBtn: $(".send")        },...        ...        ...        filterPeople: function() {          var that = this;          this.elements.chatheadnames.each(function() {              $(this).attr('data-search-term',$(this).text().tolowerCase());          });        },...        ...        };        chat.init();})();

我想知道的是，是否通过jquery引用所有的元素作为单个变量chat.elements的一部分是一个很好的做法？

我的一部分告诉我们，它确实是一次很好地引用所有选择器并将其缓存在变量中，以便可以使用缓存的变量(而不是多个DOM选择)对同一元素进行多次使用。

我的另一部分说，这可能是一个反模式，特定的元素应该在需要的时候选择和缓存。

我已经使用了类似的结构，并对代码有不同的反应，但没有什么可靠的。任何帮助将不胜感激。谢谢！

解决方法 缓存选择器是一件好事。挂在他们身上是个好主意。它通过反复查询DOM来提高性能。你上面的代码看起来非常类似于BackboneJs和MarionetteJs代码。

我有一些警告：

>这种模式可能会导致内存泄漏。考虑一下你破坏子视图的情况，但是你保留对选择它的东西的引用。这被称为悬挂指针。意见不会真的消失。所有绑定将保留。活动将继续在幕后爆发。
>你最终会遇到一个错误，你决定重新渲染屏幕的一部分。然后清理所有绑定，然后您需要记住删除和选择器。如果你不这样做，你几乎肯定会遇到一些问题，你想知道为什么一个事件确实是射击，但没有什么似乎发生在屏幕上….(这将是因为它发生在屏幕之外，你尝试的元素删除，仍然存在… sorta)。
>当前查询元素的方式会导致搜索整个页面。看看https://api.jquery.com/find/.如果你缓存一个选择器，然后在该选择器中执行搜索，它可能会让你有一点性能突破。

总结

以上是内存溢出为你收集整理的在DOM中使用模块化设计模式进行DOM选择全部内容，希望文章能够帮你解决在DOM中使用模块化设计模式进行DOM选择所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。