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

Question

我一直在关注 Modular Design Pattern一段时间以来，我发现它非常有用，因为它有助于很好地维护代码并将 block 分离成模块。

通过 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 选择)完成同一元素的多次使用。

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

我自始至终都使用了类似的结构，并且对代码的 react 不一，但没有什么可靠的。任何帮助，将不胜感激。谢谢!

Answer 1

缓存选择器是一件好事。坚持下去是个好主意。与针对同一事物重复查询 DOM 相比，它提高了性能。您上面的代码看起来与 BackboneJS 和 MarionetteJS 代码非常相似。

不过我确实有一些警告要告诉你:

1. 此模式可能会导致内存泄漏。考虑这样一种情况，你销毁了一个 subview ，但你保留了对选择它的东西的引用。这称为悬挂指针。景色不会真的消失。所有绑定(bind)将保留。事件将继续在幕后发生。
2. 您最终会遇到一个错误，您决定重新渲染部分屏幕。然后需要清理所有绑定(bind)，您需要记住删除和选择器。如果你不这样做，你几乎肯定会遇到问题，你想知道为什么一个事件确实在触发，但屏幕上似乎什么也没有发生……(这是因为它发生在屏幕外，你尝试过的元素删除，它仍然存在......有点)。
3. 您当前查询元素的方式会导致搜索整个页面。看看https://api.jquery.com/find/ .如果您缓存一个选择器，然后在该选择器内执行搜索，它可能会给您带来一点性能提升。