在Javascript中使用带有DOM选择的模块化设计模式

Question

我一直在关注模块化设计模式已经有一段时间了,发现它非常有用,因为它有助于维护代码并将块分离到模块中.

经常使用模块结构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选择)完成相同元素的多次使用.

我的另一部分告诉我这可能是一个反模式,应该选择特定元素并在需要时在本地缓存.

我一直使用类似的结构,并对代码有不同的反应,但没有什么可靠的.任何帮助,将不胜感激.谢谢!

Answer 1

缓存选择器是一件好事.挂在他们身上是个好主意.它通过反复查询DOM来提高性能.上面的代码看起来与BackboneJS和MarionetteJS代码非常相似.

不过我确实有一些警告:

1. 此模式可能导致内存泄漏.考虑你破坏子视图的情况,但你保留对选择它的东西的引用.这称为悬空指针.视图不会真正消失.所有绑定都将保留.事件将继续在幕后发生.
2. 您最终会遇到一个错误,您决定重新渲染部分屏幕.然后需要清理所有绑定,您需要记住删除和选择器.如果你不这样做,你几乎肯定会遇到一些问题,你想知道为什么一个事件确实在解雇,但屏幕上似乎没有任何事情发生....(这将是因为它发生在屏幕外,你试过的元素删除,仍然存在... sorta).
3. 您查询元素的当前方式会导致对整个页面进行搜索.看看https://api.jquery.com/find/.如果您缓存一个选择器然后在该选择器中执行搜索,它可能会获得一点性能提升.