डीओएम चयन

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 एक अच्छा अभ्यास है?

मेरा एक हिस्सा बताता है कि यह वास्तव में आपके सभी चयनकर्ताओं को संदर्भित करने का एक अच्छा तरीका है और उन्हें चर में कैश करता है, ताकि एक ही तत्व के एकाधिक उपयोग को कैश किए गए चर के साथ किया जा सके (एकाधिक डीओएम चयनों के बजाय)।

मुझे का एक अन्य भाग बताओ कि यह एक विरोधी पैटर्न हो सकता है और विशिष्ट तत्वों चुना जाना चाहिए और कैश की गई स्थानीय स्तर पर जरूरत पड़ने पर।

मैंने पूरे ढांचे का उपयोग किया है और कोड के बारे में मिश्रित प्रतिक्रियाएं प्राप्त की हैं, लेकिन कुछ भी ठोस नहीं है। किसी भी सहायता की सराहना की जाएगी। धन्यवाद!

Answer 1

चयनकर्ताओं को कैशिंग एक अच्छी बात है। उन पर लटका एक अच्छा विचार है। यह एक ही चीज़ के लिए बार-बार पूछताछ पर प्रदर्शन में सुधार करता है। आपके ऊपर वाला कोड बैकबोनजेएस और मैरियनेट जेएस कोड के समान दिखता है।

मैं ही आप के लिए कुछ चेतावनियां होती है:

1. यह पैटर्न मेमोरी लीक हो सकता है। उस मामले पर विचार करें जहां आप सबव्यू को नष्ट करते हैं, लेकिन आप इसे चुनने वाले किसी चीज़ का संदर्भ रखते हैं। इसे एक लटकते सूचक कहा जाता है। दृश्य वास्तव में गायब नहीं होगा। सभी बाध्यियां बनी रहेंगी। घटनाओं के पीछे घटनाएं आग लगती रहेंगी।
2. अंत में आप एक बग में चले जाएंगे जहां आपने अपनी स्क्रीन का हिस्सा पुनः प्रस्तुत करने का निर्णय लिया था। अपने सभी बाइंडिंग को साफ करना आवश्यक है और आपको हटाने और चयनकर्ताओं को याद रखना होगा। यदि आप ऐसा नहीं करते हैं तो आप लगभग निश्चित रूप से उन मुद्दों पर चले जाएंगे जहां आप सोचते हैं कि एक घटना वास्तव में क्यों गोलीबारी कर रही है लेकिन स्क्रीन पर कुछ भी नहीं होता .... (ऐसा इसलिए होगा क्योंकि यह स्क्रीन से हो रहा है, जिस तत्व को आपने कोशिश की हटाने के लिए, अभी भी मौजूद है ... sorta)।
3. तत्वों के लिए पूछताछ करने का वर्तमान तरीका पूरे पृष्ठ के विरुद्ध खोजों का कारण बनता है। https://api.jquery.com/find/ पर एक नज़र डालें। यदि आप एक चयनकर्ता को कैश करते हैं और फिर उस चयनकर्ता के भीतर खोज निष्पादित करते हैं तो यह आपको थोड़ा प्रदर्शन टक्कर प्राप्त कर सकता है।

Answer 2

मैं पेरिस से सहमत हूं, कैशिंग चयनकर्ता क्या अच्छा है। हमारी परियोजना में हम डीआई और पैटर्न Facade का उपयोग करते हैं। नए मॉड्यूल में एक और संरचना होने के मामले में उस संरचना में जेसन कॉन्फ़िगर किया गया है।

मैं आप सबसे अधिक लगता है:

• भेजने कॉन्फ़िगर सेटिंग्स;
• कैश elems केवल elems कुंजी;
• 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 और ईवेंट डिटेचिंग कोड।

---

भी अन्य/बेहतर पैटर्न इस के लिए, की तरह, जब कोई उपयोगकर्ता प्रकार कुछ है, तो आप एक ईवेंट सक्रिय है, और अपने मॉड्यूल में है कि घटना को पकड़ने रहे हैं। यूआई और कोड को अलग करने के लिए।