15

我已经遵循模块化设计模式很长一段时间了，发现它非常有用，因为它有助于代码的良好维护和将块分离为模块。

经常使用模块结构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 选择）完成对同一元素的多次使用。

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

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

4

2 回答 2

7

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

不过，我确实对您提出了一些警告：

  1. 这种模式可能会导致内存泄漏。考虑破坏子视图但保留对选择它的某些内容的引用的情况。这称为悬空指针。视图不会真正消失。所有绑定都将保留。事件将继续在幕后发生。
  2. 您最终会遇到一个错误，您决定重新渲染屏幕的一部分。然后需要清理所有绑定，并且您需要记住删除和选择器。如果你不这样做，你几乎肯定会遇到问题，你想知道为什么一个事件确实在触发但屏幕上似乎没有发生任何事情......（这将是因为它发生在屏幕外，发生在你尝试过的元素上删除，它仍然存在......排序）。
  3. 您查询元素的当前方式会导致对整个页面进行搜索。看看https://api.jquery.com/find/。如果您缓存一个选择器，然后在该选择器中执行搜索，它可能会给您带来一点性能提升。
于 2017-03-04T05:51:23.767 回答
1
  • 我认为，如果聊天模块只有其子模块的选择器，那么这是一个很好的模式。喜欢：
<div id="chat-module">
  <div class="indicator">...</div>
  <div class="status-text">...<div>
  ...
</div>
<script src="and your chat module.js"></script>
// your chat module selecting .indicator:
// $('#chat-module.indicator')
  • 此外，为您的模块添加关闭功能。因此，当您从视图中删除它时（如在单页应用程序中），您可以取消选择器和分离事件处理程序，例如：delete this.elements.indicator和事件分离代码。

为此还有其他/更好的模式，例如，当用户键入某些内容时，您会触发一个事件，然后在您的模块中捕获该事件。将 UI 和代码分开。

于 2017-03-19T21:46:26.593 回答