我一直在追踪
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/.如果你缓存一个选择器，然后在该选择器中执行搜索，它可能会让你有一点性能突破。
