在Javascript中使用模塊化設計模式並使用DOM選擇

Question

我一直在關注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選擇）。

我的另一部分告訴我這可能是一個反模式和特定的元素應該選擇和本地緩存在需要的時候。

我在整個過程中都使用過類似的結構，並且對代碼有不同的反應，但沒有什麼可靠的。任何幫助，將不勝感激。謝謝！

Answer 1

緩存選擇器是件好事。掛在他們身上是一個好主意。它通過反覆查詢DOM來提高性能。您上面的代碼看起來與BackboneJS和MarionetteJS代碼非常相似。

我有一些警告你，但：

1. 這種模式可能會導致內存泄漏。考慮一下你失去了子視圖的情況，但是你保留了一些對它進行選擇的引用。這被稱爲懸掛指針。視圖不會真的消失。所有綁定將保留。事件將繼續在幕後進行。
2. 您最終會遇到一個錯誤，您決定重新渲染屏幕的一部分。清理所有的綁定是必需的，你需要記住刪除和選擇器。如果你不這樣做，你幾乎肯定會遇到問題，你想知道爲什麼一個事件確實發射，但屏幕上沒有任何事情發生......（這將是因爲它發生在屏幕外，對你嘗試的元素刪除，那仍然存在... sorta）。
3. 您正在查詢元素的當前方式會導致在整個頁面上進行搜索。看看https://api.jquery.com/find/。如果您緩存一個選擇器，然後在該選擇器內執行搜索，它可能會使您獲得一些性能提升。

Answer 2

我同意帕里斯，什麼緩存選擇器是好的。在我們的項目中，我們使用DI和模式Facade。這個結構有json配置，以防萬一新模塊成爲另一個結構。

我覺得你最：

• 發送配置設置;
• 緩存元件只有elems鍵;
• 不緩存din3700元素params.classes;

• 推遲助手的常用功能; 例如：

  (function() { 
  var chat = { 
      websocket: new WebSocket("ws://echo.websocket.org/"), 
      that: this, 
      params: { 
       elems: { 
        module: '.container', 
        indicator: ".indicator", 
        statusText: ".status-text", 
        chatHeadNames: ".people li .name", 
        filterInput: "#filter-input", 
        msgInput: "#msg-input", 
        sendBtn: ".send" 
       } 
       classes: { 
        dinamicInput: '.dinamicInput' 
       } 
      }, 
      init: function(params) { 
       opts = $.extend(true, $.extend(true, {}, that.params), params); 
       that.initElementsForModule(that.elements, that.params.elems); 
       this.scrollToBottom(); 
       this.bindEvents(); 
       this.webSocketHandlers(); 
      }, 
      bindEvents: function() { 
       this.toggleChat(); 
       this.filterPeople(); 
       this.compose(); 
      }, 
  
      initElementsForModule = function (elements, identifiers) { 
       var $module, 
        prop; 
  
       for (prop in identifiers) { 
        if (identifiers.hasOwnProperty(prop) && prop !== "module") { 
         elements["$" + prop] = $module.find(identifiers[prop]); 
        } 
       } 
  
      }, 
  
      elements: { 
       module: null, 
       indicator: null, 
       statusText: null, 
       chatHeadNames: null, 
       filterInput: null, 
       msgInput:null, 
       sendBtn: null 
      }, 
      ... 
      ... 
      ... 
      filterPeople: function() { 
       var that = this; 
       this.elements.chatHeadNames.each(function() { 
        $(this).attr('data-search-term', $(this).text().toLowerCase()); 
       }); 
      }, 
      ... 
      ... 
      }; 
  
      chat.init(); 
  })(); 
  

Answer 3

• 我認爲，如果聊天模塊只有一個用於其子選擇器，那麼它是一個很好的模式。像：

<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和代碼。