JavaScript में इस पैटर्न क्या है और जहां मैं और अधिक के बारे में यह

Question

मैं निम्न के समान कोड है पढ़ सकते हैं:

(function(MyHelper, $, undefined){ 

var selectedClass = "selected"; 

MyHelper.setImageSelector = function(selector) { 
    var container = $(selector); 

    setSelected(container, container.find("input:radio:checked")); 
    container.find("input:radio").hide().click(function() { 
     setSelected(container, $(this)); 
    }); 
}; 

MyHelper.enableIeFix = function(selector) { 
    var container = $(selector); 
    container.find("img").click(function() { 
     $("#" + $(this).parents("label").attr("for")).click(); 
    }); 
}; 

function setSelected(container, selected) { 
    container.find("label").removeClass(selectedClass); 
    selected.siblings("label").addClass(selectedClass); 
} 

}(window.MyHelper = window.MyHelper || {}, $)) 

मैं जे एस में नया हूँ और अगर यह जावास्क्रिप्ट प्रोग्रामिंग में एक विशिष्ट पैटर्न है मैं सोच रहा हूँ । मैं specfically सोच अंतिम पंक्ति का अर्थ क्या है:

}(window.MyHelper = window.MyHelper || {}, $)) 

यह मॉड्यूल पैटर्न है?

Answer 1

हां, यह मूल रूप से एक मॉड्यूल पैटर्न है।

कैसे मॉड्यूल मॉड्यूल पद्धति का उपयोग कर बनाई गई हैं का एक सारांश है:

• एक बंद बनाने के लिए एक तत्काल लागू समारोह अभिव्यक्ति (Iife) का उपयोग कर एक मॉड्यूल गुंजाइश बनाएँ, आम तौर पर। यह आपके मॉड्यूल के लिए आपकी "निजी स्थान" बनाता है, वैश्विक प्रदूषण से बचें और अपना कोड मॉड्यूलर और अलग रखें।

• अपने सार्वजनिक तरीकों संलग्न करने के लिए एक नाम स्थान है। डेवलपर्स के पास "अनुलग्नक" प्रक्रिया करने के विभिन्न तरीके हैं। मॉड्यूल के लिए कुछ डेवलपर "हैंड-इन" ऑब्जेक्ट्स, जबकि अन्य एक ऑब्जेक्ट को एक चर में संग्रहीत करने के लिए "वापस" करते हैं। किसी भी तरह से, यह वही है।

इस मामले में, यह "हाथ में" मॉड्यूल पैटर्न

(function(MyHelper, $, undefined){ 

    var selectedClass = "selected"; 

    MyHelper.setImageSelector = function(selector) {}; 

    function setSelected(container, selected) {} 

}(window.MyHelper = window.MyHelper || {}, $)) 

---

अंतिम पंक्ति में के संस्करण है, यह तुरंत अपने फ़ंक्शन को कॉल और यह इन तर्कों भेजता

(window.MyHelper = window.MyHelper || {}, $) 

यह ऐसा करने जैसा ही है, लेकिन फ़ंक्शन नामों के उपयोग के बिना:

function anonymous(MyHelper, $, undefined){...} 
anonymous(window.MyHelper = window.MyHelper || {}, $); 

• पहला तर्क, window.MyHelper = window.MyHelper || {} संचालन का एक संयोजन है। जो कुछ भी ऑपरेशन देता है, वह मॉड्यूल में MyHelper तर्क प्रदान करता है।

  • || एक "डिफ़ॉल्ट" ऑपरेशन है। यदि || का मान शेष "गलत" है, तो दाईं ओर अभिव्यक्ति द्वारा "डिफ़ॉल्ट" अभिव्यक्ति द्वारा मान लिया गया मान। तो आपके कोड में, यदि window.MyHelper मौजूद नहीं है, तो यह किसी ऑब्जेक्ट {} पर डिफ़ॉल्ट हो जाता है।

  • "डिफ़ॉल्ट" आपरेशन के साथ

    , window.MyHelper या तो आवंटित किया जाएगा एक मौजूदा window.MyHelper या यदि कोई भी मौजूद है, एक नई वस्तु उदाहरण {} जावास्क्रिप्ट में

  • असाइनमेंट संचालन मान है। असाइनमेंट ऑपरेशन द्वारा लौटाया गया मान वैरिएबल को असाइन किया गया मान है। यह भी पूरे ऑपरेशन के लिए मॉड्यूल के लिए एक मूल्य प्रदान करने के लिए यह संभव बनाता है।

• दूसरा तर्क तीसरा तर्क पारित नहीं किया है (मैं jQuery मान?) जो कुछ भी $ है

• , और अंदर से, यह अपरिभाषित है। जहां तक ​​मुझे पता है, यह इस तरह से किया जाता है, undefined उत्परिवर्तनीय है। इसलिए एक पूरी तरह से अपरिभाषित undefined है, हम इसे कुछ भी नहीं भेजते हैं, और इस प्रकार वेरिएबल undefinedundefined है।

---

क्या इस कोड को करता है:

MyHelper.setImageSelector = function(selector) {}; 

MyHelper को विधि setImageSelector जोड़ सकते हैं और के बाद से अपने MyHelper बाहर से है था, जो कोई यह अब उपयोग करता MyHelper.setImageSelector() विधि है।

आईएफएफई के अंदर अन्य कार्यों और चर जो MyHelper में संवर्धित नहीं हैं, जिन्हें आप "निजी" सदस्य कहते हैं। जावास्क्रिप्ट में एक कार्यात्मक दायरा है, जिसका अर्थ है कि यह प्रत्येक कार्य घोषणा के लिए एक नया दायरा बनाता है। सरल बात में, अंदर क्या है बाहर देख सकता है, लेकिन बाहर अंदर नहीं देख सकता है। यह भी तुरंत बुलाया/तरह

(
function(arg1,arg2){ 
} 
)(xarg1,xarg2); 

अंतिम पंक्ति में परिभाषित किया गुमनाम समारोह का आह्वान इसकी परिभाषा के बाद शुरू हो जाती है कार्य करता है और चर

Answer 2

यह एक जावास्क्रिप्ट क्लास है। आप यहाँ उनके बारे में अधिक पढ़ सकते हैं:

http://javascript.about.com/library/bltut35.htm

Answer 3

जब मौजूद है यह वैश्विक MyHelper वस्तु फैली हुई है, अन्यथा एक नया बनाएँ। Jquery वैश्विक पारित किया गया है और अपरिभाषित तर्क के रूप में कहा जाता है ताकि इसे जेएस minimizers के साथ संपीड़ित किया जा सके।

मुझे मॉड्यूल पैटर्न की तरह काफी दिखता है। यह भी देखें: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjquery

Answer 4

गुमनाम समारोह का एक बहुत के साथ वैश्विक गुंजाइश नहीं प्रदूषण का एक तरीका है। आपकी अनाम कार्य करने के लिए तर्क हैं

1. window.MyHelper = window.MyHelper || {} /* MyHelper वैश्विक वस्तु या एक खाली वस्तु यह अनिर्धारित रहता है अगर */
2. $ /* jQuery या प्रोटोटाइप वस्तु। jQuery के साथ यह आम तौर पर "jQuery" वैश्विक वस्तु अन्य पुस्तकालयों के साथ संघर्ष avaoid है */

गुमनाम समारोह के तीसरे पैरामीटर "अपरिभाषित" यह सुनिश्चित करता है कि कोई भी ओवरराइड करता है या छाया वास्तविक अपरिभाषित।

यह जावास्क्रिप्ट में एक सुरक्षित स्वयं invoking समारोह परिभाषित करता है।