जावास्क्रिप्ट आर्किटेक्चर - मध्यस्थ, उनका उपयोग कब करें?

Question

यह मेरे जावास्क्रिप्ट कोड की संरचना के बारे में एक सामान्य प्रश्न है और यदि मैं अच्छी तरह से संरचित कोड की दिशा में सही दिशा में जा रहा हूं।

वर्तमान कोड मुझे मिल गया है:

(function (myNamespace, $, undefined) { 
    myNamespace.className = { 
     init:function { } // do stuff 
    } 
} (window.myNamespace= window.myNamespace|| {}, jQuery))); 

(function (myNamespace, $, undefined) { 
     myNamespace.className2 = { 
      init:function { } // do stuff 
     } 
} (window.myNamespace= window.myNamespace|| {}, jQuery))); 

ऊपर कोड के साथ जाहिर है, मैं एक ही नाम स्थान का उपयोग कर सकते हैं (प्रति पृष्ठ/साइट अनुभाग के रूप में) और myNamespace.className.init() के माध्यम से उन्हें फोन आदि मैं भी गठजोड़ कर सकते हैं अगर मैं चाहता हूं, लेकिन मैं पठनीयता के लिए कक्षाओं को encapsulating हूँ।

अब, मैं मध्यस्थों की अवधारणा के बारे में http://addyosmani.com/largescalejavascript/ पढ़ रहा हूं। मेरा द्वितीयक सवाल यह है कि (और यदि) मुझे इनका उपयोग करना चाहिए? className2 से स्पष्ट रूप से मैं कर सकते हैं:

myNamespace.className2 = { 
       init:function { myNamespace.className.init() } // do stuff 
      } 

तो क्यों यह कभी className को mediator.subscribe("classNameInit") की तरह सदस्यता लें और className में है कि घटना प्रकाशित होगा?

मैं अपने कोड की संरचना के बारे में सुझावों के लिए बेहद खुला हूं क्योंकि यह कुछ है जो मुझे सही होने की आवश्यकता है, जबकि मैं अपनी जावास्क्रिप्ट लिखने के तरीके को बदल रहा हूं।

Answer 1

आप इसका उपयोग करेंगे जब आपके पास कई टुकड़े होंगे जो असीमित संयोजनों में एक साथ काम करेंगे जहां आप समय से पहले सभी संयोजनों को नहीं जानते हैं या जहां यह सभी संयोजनों को मानने के लिए अधिक कुशल है।

मान लें कि आप सोशल मीडिया ऐप बना रहे हैं और आपने उपयोगकर्ताओं की एक सूची को समाहित करने के लिए एक कक्षा लिखी है। कुछ स्क्रीन पर, सूची में किसी उपयोगकर्ता पर क्लिक करने से उनकी प्रोफ़ाइल खुलती है, दूसरी स्क्रीन पर शायद उपयोगकर्ता द्वारा छोड़ी गई प्रत्येक टिप्पणी के लिए खोज पर क्लिक करके, और तीसरी स्क्रीन पर कुछ और होता है।

आप इस नहीं का उपयोग कर मध्यस्थ/pubsub लिखने के लिए थे, तो क्या आप को रखना होगा यदि onclick घटना में बयान ...

UserList.prototype.onUserClick = function(user) { 
    // Check if we're supposed to open a popup 
    if (this.mode === 'profile') 

    // Check for something else 
    else if (this.mode === 'something else') 

    // Check for another case 
    else if (this.mode === 'foo') 
} 

मध्यस्थ के लिए एक समाधान है का एक समूह है इस समस्या है क्योंकि यह की आवश्यकता नहीं है UserList हर एक स्थिति यह में समाप्त हो सकता है के बारे में जानकारी है। इसके बजाय, UserList में उपरोक्त कोड बस जब कोई उपयोगकर्ता पर क्लिक किया जाता प्रसारित करने के लिए परिष्कृत किया जा सकता ...

UserList.prototype.onUserClick = function(user) { 
    this.publish('user-click', user); 
} 

फिर आप में से प्रत्येक अन्य स्क्रीन या यूआई टुकड़े बस ... उपयोगकर्ता के लिए क्लिक करें संदेश के लिए सुन सकते हैं

// On pages where there needs to be a popup profile 
Mediator.onMessage('user-click', function(data) { 
    showProfilePopup(data); 
}); 

// Or perhaps on a search page 
SearchBox.onMessage('user-click', function(data) { 
    this.searchByUser(data); 
}); 

इसके अलावा, जहां मध्यस्थ चमक के लिए शुरू होता है क्योंकि इन अन्य UI घटक, SearchBox की तरह विशेष रूप से जब UserList आग एक उपयोगकर्ता में कोई दिलचस्पी नहीं कर रहे हैं -क्लिक, वे केवल रुचि रखते हैं जब उपयोगकर्ता-क्लिक प्रकाशित होता है, अन्य पृष्ठ पर यूआई नियंत्रण उपयोगकर्ता-क्लिक को भी आग लगा सकता है और ये टुकड़े इसके प्रति प्रतिक्रिया कर सकते हैं।

एक तरफ नोट पर, className = { } कक्षा नहीं बना रहा है। आप शायद क्या चाहते हैं className = function() { } है।