2016-01-19 6 views
14

मैंने देखा है कि बहुत सारी पुस्तकालय अपनी लाइब्रेरी को परिभाषित करने के लिए नीचे इस शैली का उपयोग करते हैं। मैं यह भी ध्यान देता हूं कि पहले स्वयं invoking समारोह में Requ.js या AMD सिस्टम के साथ कुछ करने के लिए कुछ है, वे हमेशा एक तर्क के रूप में कारखाना है, मैं Requ.js में और अधिक देखेंगे, हमेशा ब्राउज़रify में किया गया है।एक जावास्क्रिप्ट लाइब्रेरी का निर्माण, इस तरह आईआईएफई का उपयोग क्यों करें?

मुख्य कोड कोष्ठक के अंदर पहले स्वयं invoking समारोह के अंत में क्यों पारित किया गया है, यह एक बंद है, या सिर्फ एक अज्ञात समारोह माना जाता है, मैं दोनों में गहरी खुदाई करेंगे। इसका क्या फायदा है? यह बंद होने के अंदर दिखता है लेखक string, this, और callback पास करता है।

क्या यह मेरी लाइब्रेरी को Please से नीचे इस उदाहरण में मुख्य ऑब्जेक्ट को वैश्वीकृत करने के लिए एक सुरक्षित सुरक्षित तरीका देगा?

(function(globalName, root, factory) { 
    if (typeof define === 'function' && define.amd) { 
     define([], factory); 
    } 
    else if (typeof exports === 'object') { 
     module.exports = factory(); 
    } 
    else{ 
     root[globalName] = factory(); 
    } 
}('Please', this, function(){ 

मैं जावास्क्रिप्ट में गहरी वास्तव में खुदाई और अपने खुद के छोटे MVC वास्तुकला बनाने के लिए कोशिश कर रहा हूँ, मैं सुनने के लिए मैं मूर्ख या उसके पहले किया गया हूँ नहीं करना चाहते, मैं अपने आप को चुनौती देने के लिए और सीखना चाहते हैं।

यदि जावास्क्रिप्ट लाइब्रेरी बनाने के लिए कोई भी महान संसाधन हैं या यहां तक ​​कि एक बेहतर एमवीसी लाइब्रेरी मुझे जानना अच्छा लगेगा।

उत्तर

10

इस कोड पैटर्न को Universal Module Definition (यूएमडी) कहा जाता है। यह आपको विभिन्न जावास्क्रिप्ट लाइब्रेरी को विभिन्न वातावरण में उपयोग करने की अनुमति देता है।

  1. Asynchronous Module Definition (एएमडी), RequireJS और Dojo Toolkit द्वारा कार्यान्वित: यह परिभाषित करने मॉड्यूल के तीन तरीके प्रदान करता है।

    define([], factory);

  2. CommonJS — NodeJS मॉड्यूल।

    module.exports = factory();

  3. वैश्विक वस्तु के लिए मॉड्यूल, ब्राउज़रों में उदाहरण window के लिए निर्दिष्ट करना।

    root[globalName] = factory();

Iife तीन पैरामीटर है: globalName, root और factory

  • globalName आपके मॉड्यूल का नाम है। यह केवल मॉड्यूल को परिभाषित करने के तीसरे तरीके पर लागू होता है, यानी आपके मॉड्यूल ऑब्जेक्ट को वैश्विक चर पर असाइन करना। उदाहरण के लिए, यदि आप इस पैरामीटर को "myAwesomeModule" पर सेट करते हैं और ब्राउज़र में कोड (एएमडी के बिना) का उपयोग करते हैं, तो आप myAwesomeModule चर का उपयोग कर अपने मॉड्यूल तक पहुंच सकते हैं।
  • root वैश्विक वस्तु का नाम है। जाहिर है, यह मॉड्यूल को परिभाषित करने के तीसरे तरीके पर भी लागू होता है। आमतौर पर this इस पैरामीटर के रूप में पारित किया गया है, क्योंकि this ब्राउज़र में window का संदर्भ है। हालांकि, यह doesn't work in strict mode है। यदि आप अपने कोड को सख्त मोड में काम करना चाहते हैं, तो आप this को typeof window !== "undefined" ? window : undefined से प्रतिस्थापित कर सकते हैं।
  • अंत में, factory एक अनाम कार्य है, जो आपके मॉड्यूल को ऑब्जेक्ट के रूप में वापस कर देना चाहिए।

यह भी देखें:

10

यह Universal Module Definition (UMD) का एक उदाहरण है।

  1. Asynchronous Module Definition (एएमडी, Require.js द्वारा प्रयोग किया जाता)

    define('name', [ /* dependencies */ ], factory); 
    
  2. CommonJS (Node.js पारिस्थितिकी तंत्र): यह एक जे एस मॉड्यूल तीन लोकप्रिय जे एस मॉड्यूल चश्मा के साथ संगत बनाने के लिए एक तकनीक है

    module.exports = object; 
    
  3. वैश्विक निर्यात (उदाहरण के लिए, ब्राउज़र में window पर)

    global['name'] = object; 
    

UMD एक कारखाने समारोह वस्तु बनाने के लिए जिम्मेदार निर्यात किए जाने लपेटता है और एक तुरंत लागू समारोह अभिव्यक्ति (Iife) के लिए एक तर्क के रूप में यह गुजरता है, टुकड़ा आप चिपकाया में के रूप में। आईआईएफई मॉड्यूल पर्यावरण का पता लगाने और कारखाने द्वारा बनाई गई वस्तु को उपयुक्त तरीके से निर्यात करने के लिए ज़िम्मेदार है। पैटर्न निम्नानुसार है:

(function (name, root, factory) { 
    // detect the module environment and 
    // export the result of factory() 
})('name', this, function() { 
    // module code 
    // return the object to be exported 
}); 

कई ट्रांसलेटर और निर्माण उपकरण स्वचालित रूप से इस रैपर को उत्पन्न करते हैं।

संबंधित मुद्दे