एक एकल वैश्विक चर के बिना एक परियोजना का निर्माण

कल्पना करें कि आपके पास कई मॉड्यूलों से मिलकर एक परियोजना है और उदाहरण के लिए, सीडीएन में jQuery या कोई अन्य पुस्तकालय। आपकी बहुत इच्छा है कि आप अपने वैश्विक चर को उपयोगकर्ता को न दिखाएँ और हो सके तो jQuery और $ न दिखाएं। ठीक है, निश्चित रूप से, परियोजना कोड को बदलने के बिना सब कुछ करें।
ग्लोबल्स को छिपाने के कारण अलग-अलग हो सकते हैं: सौंदर्य के लिए, सुरक्षा कारणों से, कोड विश्लेषण की कठिनाई के लिए, और अन्य। उपयोगकर्ता उन घटनाओं का उपयोग करके आपके कोड के साथ सहभागिता करता है जिन्हें वह नहीं तोड़ सकता है - उसे किसी और चीज की आवश्यकता नहीं है।

सबसे स्पष्ट तरीका एक एकल नाम स्थान बनाना है जिसमें अन्य वस्तुओं को निष्क्रिय रूप से निर्यात किया जाए, और अंत में jQuery और $ को हटा दें।

विधानसभा के बाद, कोड कुछ इस तरह होगा:

(function(window, undefined){ // include ./js/YourNamespace.js var YourNamespace = (function () { // -  return {}; }()); // include ./js/YourNamespace/SomeObject.js YourNamespace.SomeObject = (function () { // -  return function () { }; }()); // Cleanup delete window.$; delete window.jQuery; }(window)); 

यह आदर्श है, लेकिन अधिक से अधिक बार नहीं। अपने कोड को देखो, क्या ऐसा है?

कटौती के तहत एक सार्वभौमिक समाधान है जो आपको किसी भी वैश्विक चर के बिना किसी भी कोड को इकट्ठा करने की अनुमति देता है।

सक्रिय / निष्क्रिय आयात / निर्यात को स्वीकार करता है

सक्रिय निर्यात

 (function (window) { var ModuleA = {}; // Export window.ModuleA = ModuleA; }(window)); 

मॉड्यूल मॉड्यूल सक्रिय रूप से निर्यात किया जाता है

निष्क्रिय निर्यात

 var ModuleC = (function (window) { var ModuleC = {}; // Export return ModuleC; }(window)); 

मॉड्यूल मॉड्यूल निष्क्रिय रूप से निर्यात किया जाता है

सक्रिय आयात

 (function (window, $) { console.log($); }(this, jQuery)); 

JQuery मॉड्यूल सक्रिय रूप से आयात किया जाता है

निष्क्रिय आयात

 (function (window) { console.log(ModuleC); }(this)); 

मॉड्यूल मॉड्यूल निष्क्रिय रूप से आयात किया जाता है

सभा

हमारे पास कई मॉड्यूल हैं जो किसी भी तरह आयात / निर्यात करते हैं। हम जानते हैं कि कौन से मॉड्यूल प्रत्येक का उपयोग करते हैं। हम प्रत्येक मॉड्यूल को एक क्लोजर में लपेट सकते हैं जिसमें उन सभी वस्तुओं की एक सूची स्थानांतरित करने के लिए है जो इसका उपयोग करता है। यह सच है, एक छोटी सी समस्या है: यदि मॉड्यूल ए मॉड्यूल बी का उपयोग करता है, और मॉड्यूल बी मॉड्यूल ए का उपयोग करता है और वे सभी श्रृंखला में जुड़े हुए हैं, तो जब मॉड्यूल ए को लूप में लपेटा जाता है, तो एक संदर्भ त्रुटि त्रुटि होगी - मॉड्यूल बी अभी तक नहीं है। मॉड्यूल बी लोड करने के बाद सर्किट ए में ऑब्जेक्ट को अग्रेषित करके इस समस्या को हल किया जाता है। यदि मॉड्यूल निष्क्रिय रूप से निर्यात कर रहा है और अगर हम इसे सर्किट में लपेटते हैं, तो वैश्विक चर गायब हो जाएगा। इस समस्या को स्थानीय चर को वैश्विक संदर्भ में अग्रेषित करके हल किया जाता है।
हम उन वैश्विक चरों की सूची जानते हैं जो हमने लिपि के आरंभ के दौरान बनाए थे - हम केवल ग्लोबल्स को साफ़ करने के लिए उन्हें हटाते हैं।

उदाहरण

आइए एक उदाहरण परियोजना देखें जिसमें jQuery और 3 मॉड्यूल शामिल हैं, जो बेतरतीब ढंग से आयात / निर्यात करते हैं।

मॉड्यूल लिस्टिंग

 // Uses ModuleC, $ (function (window) { var ModuleA = { a: 'ModuleA.a', b: 2, d: function () { console.log(ModuleC.c === 'ModuleC.c'); console.log(typeof $ === 'function'); } }; // Export window.ModuleA = ModuleA; }(window)); 

 // Uses ModuleA var ModuleC = (function (window) { var ModuleC = { a: 1, b: 2, c: 'ModuleC.c', d: function () { console.log(ModuleA.a === 'ModuleA.a'); } }; // Export return ModuleC; }(window)); 

 // Uses ModuleA, ModuleC ModuleA.c(); window.setTimeout(function () { ModuleC.d(); ModuleA.d(); }, 0); 

मॉड्यूल निम्नलिखित अनुक्रम में जुड़े हुए हैं: अलग से jQuery, मॉड्यूल + मॉड्यूल + मॉड्यूल। मॉड्यूल ए मॉड्यूल सी पर निर्भर करता है, मॉड्यूल सी मॉड्यूल ए (ऊपर वर्णित संघर्ष) पर निर्भर करता है। मॉड्यूल ए सक्रिय रूप से निर्यात करता है; मॉड्यूल सी निष्क्रिय रूप से खुद को निर्यात करता है; मॉड्यूल डी कुछ भी निर्यात नहीं करता है।

हम जमा करते हैं

 //     (function(window, undefined){ //       var Medium = { wait: function (varName, callback) {/* -   */}, ready: function (varName, varValue) {/* -   */} }; //   A,      (function (ModuleC, $) { // ..  ModuleC   ,    Medium.wait('ModuleC', function (value) {ModuleC = value;}); (function (window) { var ModuleA = { a: 'ModuleA.a', b: 2, d: function () { console.log(ModuleC.c === 'ModuleC.c'); console.log(typeof $ === 'function'); } }; // Export window.ModuleA = ModuleA; }(window)); } (undefined, $)); //   C,      (function (ModuleA) { var ModuleC = (function (window) { var ModuleC = { a: 1, b: 2, c: 'ModuleC.c', d: function () { console.log(ModuleA.a === 'ModuleA.a'); } }; // Export return ModuleC; }(window)); // ..  ModuleC  ,      ,    window.ModuleC = ModuleC; //   C  -      Medium.ready('ModuleC', ModuleC); } (ModuleA)); //   ,      (function (ModuleA,Module) { // Uses ModuleA, ModuleC ModuleA.c(); window.setTimeout(function () { ModuleC.d(); ModuleA.d(); }, 0); } (ModuleA,Module)); //      -         try { delete window.$; delete window.jQuery; delete window.ModuleA; delete window.Module; } catch (e){ // IE  window.$ = undefined; window.jQuery = undefined; window.ModuleA = undefined; window.Module = undefined; } //          ! }(window)); 

चर कैप्चर समस्या

यह समाधान केवल कोड का विश्लेषण करना और अनावश्यक चर (सौंदर्य के लिए) के वैश्विक संदर्भ को स्पष्ट करना मुश्किल बनाता है।
यह कोई रहस्य नहीं है कि हमारी स्क्रिप्ट (विशिष्ट उपयोगकर्तास्क्रिप्ट या एक्सटेंशन) को जोड़ने से पहले बनाई गई एक स्क्रिप्ट मॉड्यूल और मॉड्यूल की वस्तुओं को इंटरसेप्ट कर सकती है, इससे पहले कि हम घड़ी, __defineSetter__, ES5 सेट और संभवतः एक न्यूनतम सेटइंटरवल के माध्यम से उन्हें हटा दें।

इस समस्या के 3 समाधान हैं:
1. सक्रिय निर्यात का उपयोग न करें (कब्जा मौका शून्य है, आपको कोड बदलने की आवश्यकता है)
2. वैश्विक चर के लिए एक यादृच्छिक नाम का उपयोग करें (कैप्चर का मौका शून्य हो जाता है, आपको कोड बदलने की आवश्यकता है)
3. दूर करने से पहले पर्यवेक्षकों और टाइमर को हटा दें (कब्जा मौका शून्य के बराबर है)

हम विधि 3 का उपयोग करेंगे, हम अपनी विधानसभा को बदल देंगे:

 //     (function(window, undefined){ //  __defineSetter__, ES5 set, watch window.unwatch && window.unwatch('ModuleA'); window.unwatch && window.unwatch('Module'); try { delete window.ModuleA; delete window.Module; } catch (e){ // IE  window.ModuleA = undefined; window.Module = undefined; } //   var maxIntervalId = window.setInterval(function (){}, 1e10); var maxTimeoutlId = window.setTimeout(function (){}, 1e10); while (maxIntervalId--) { window.clearInterval(maxIntervalId); } while (maxTimeoutlId--) { window.clearTimeout(maxTimeoutlId); } //    // ... }(window)); 

अब आपको जावास्क्रिप्ट निंजा की सबसे परिष्कृत तकनीक में महारत हासिल है - "वैश्विक चर छिपाना"!

अपवाद

यह विधि आपकी मदद नहीं करेगी यदि आप विशेष रूप से ग्लोबल्स में कूड़े हैं, तो इवेंट कॉल का उपयोग onsmth = "...", यानी के माध्यम से करें खराब तरीके से;) यदि आपके पास वैश्विक में कोई वस्तु नहीं है तो यह विधि काम नहीं करेगी।

निंजा जावास्क्रिप्ट बिल्डर - Ninjs

ताकि आपको इस विधानसभा पद्धति के कार्यान्वयन को लिखना न पड़े, मैंने इक्का - नन्ज लिखा। यह ऊपर वर्णित विधि का उपयोग करके एक जावास्क्रिप्ट प्रोजेक्ट बिल्डर है। बिल्डर, जैसा कि यह था, बेहतर है कि वह अपने नाम को सही ठहराता है - वह, निंजा के रूप में, स्पष्ट रूप से अपना काम करता है और पटरियों को साफ करता है।

परियोजना github github.com/azproduction/ninjs पर है
निर्माण के लिए Node.js का उपयोग करता है।
यह npm में अभी तक पंजीकरण नहीं है, लेकिन यह निश्चित रूप से होगा।
जब तक वह चर को पकड़ने से रोक सकता है - तब तक।

के उपयोग

Ninjs का उपयोग करना बहुत सरल है - हमें बस यह जानना होगा कि हमारे मॉड्यूल आयात / निर्यात को किस चर पर ले जाते हैं और वे कहां झूठ बोलते हैं। सभी Ninjs निर्भरता आप के लिए हल करेगा।

 var ninjs = new (require('../Ninjs.js').Ninjs); ninjs .add({ //  ModuleA file: './files/ModuleA.js', //    ModuleC  ModuleB imports: ['ModuleC', 'ModuleB'], //   ModuleA exports: 'ModuleA' }) .add({ //  ModuleB file: './files/ModuleB.js', //    ModuleA    jQuery imports: 'ModuleA', //   ModuleB exports: 'ModuleB' }) .add({ //  ModuleD file: './files/ModuleD.js', //    ModuleA, ModuleB and ModuleC imports: ['ModuleA', 'ModuleB', 'ModuleC'] //    }) .add({ //  ModuleC file: './files/ModuleC.js', //    ModuleA, ModuleB imports: ['ModuleA', 'ModuleB'], //    ModuleC exports: 'ModuleC', //  ModuleC   ,     forceExports: 'ModuleC' }) //   .cleanup('ModuleA', 'ModuleB', 'ModuleC', '$', 'jQuery') //  STDOUT .print(true); //         ,    // .print(false); 

नमूना कोड और मॉड्यूल कोड यहाँ है github.com/azproduction/ninjs/tree/master/examples

देखते रहो। सुझावों, इच्छाओं और आलोचना का स्वागत है!

PS मैं निन्ज लोगो में इसे चालू करने के लिए एक निंजा आइकन की तलाश में हूं।