我一直在追踪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选择 - 代码日志