स्रोत कोड को बदले बिना कॉमनजेएस मॉड्यूल को ब्राउज़र में लोड करना

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

वास्तव में, मेरी आवश्यकताओं के लिए, उदाहरण के लिए, Node.js के लिए अपने एडॉप्टर के साथ EssentialJS अद्भुत था , जो कुछ समय के लिए सफलतापूर्वक मेरे सनसनीखेज से मिला, जब तक कि मुझे फिर से शानदार विचार नहीं आया: “मैं दो पूरी तरह से अलग मॉड्यूल प्रारूपों से दलिया का उपयोग करने के लिए मजबूर क्यों हूं एक परियोजना में हमें सब कुछ एकजुट करने की जरूरत है! ”

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

हम सोचते हैं

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

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

हम दूसरे रास्ते से जाएंगे। हमारी पद्धति का सार यह है कि हम प्रत्येक मॉड्यूल को एक अलग iframe में लोड करेंगे, जिससे इसे बाकी मॉड्यूल से अलग किया जाएगा। इस तरह के प्रत्येक फ्रेम के नामस्थान में कॉमनज स्पेसिफिकेशन की आवश्यकता के अनुसार फंक्शन और एक्सपोर्ट और मॉड्यूल.एक्सपोर्ट ऑब्जेक्ट्स को पूर्वनिर्धारित किया जाएगा।

दुर्भाग्य से, स्क्रिप्ट को लोड करने का यह तरीका इसकी कमियों के बिना नहीं था। पहली बात जो मुझे सामने आई वह थी मूल माता-पिता की खिड़की और अन्य वैश्विक वस्तुओं के साथ काम करने में असुविधा। उन्हें एक्सेस करने के लिए, आपको बोझिल window.parent.window निर्माण का उपयोग करने की आवश्यकता है, जो इसके अलावा, बेमानी होगी यदि भविष्य में हम उत्पादन के लिए हमारे मॉड्यूल को गोंद करना चाहते हैं। इस समस्या का समाधान, किसी तरह, प्रत्येक iframe में एक वैश्विक ऑब्जेक्ट बनाना होगा, जो कि मूल विंडो की विंडो का लिंक होगा। इस ऑब्जेक्ट के माध्यम से, हम अपने मॉड्यूल से विंडो, डॉक्यूमेंट, नेविगेटर, हिस्ट्री, इत्यादि जैसी चीजों को एक्सेस कर पाएंगे और जरूरत पड़ने पर ग्लोबल वैरिएबल का भी इस्तेमाल कर सकेंगे।

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

var doSomething = require("./someModule").doSomething; // doSomething -  ,    someModule console.log(doSomething instanceof Function); // false,   Function    Function  someModule (    someFunction) -    

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

 console.log(typeof doSomething === "function"); // true 

एक और अति सूक्ष्म अंतर जो उन लोगों के लिए जीवन को कठिन बनाता है जो अपने कॉमनजेएस मॉड्यूल को ब्राउज़र में लोड करना चाहते हैं, कॉमनजस के आवश्यकता फ़ंक्शन के समकालिक प्रकृति है। इस समस्या को हल करने का सबसे सामान्य तरीका वांछित मॉड्यूल को एक तुल्यकालिक AJAX अनुरोध के साथ लोड करना और फिर डाउनलोड किए गए कोड को निकालना या नए फ़ंक्शन () का उपयोग करके एक अनाम फ़ंक्शन बनाना है। यह विधि हमारे लिए उपयुक्त नहीं है, क्योंकि इस मामले में डीबगर मूल फ़ाइल में कोड की पंक्तियों की ओर इशारा करना बंद कर देगा। एक बार फिर, हम दूसरे तरीके से जाएंगे, जो हमें अछूते निर्दयी निर्वासित कोड के माध्यम से समस्याओं के बिना डिबगर चलाने की अनुमति देगा।

आवश्यक फ़ंक्शन अनिवार्य रूप से केवल कैश किए गए मॉड्यूल.एक्सपोर्ट्स को लौटाता है, जो लोड किए गए मॉड्यूल द्वारा निर्यात किया जाता है। मॉड्यूल को लोड करने के पहले प्रयास में ही मॉड्यूल के कोड को केवल एक बार निष्पादित किया जाता है।

उपरोक्त बातों को ध्यान में रखते हुए, थोड़ी चाल पर चलें - हम अपने मॉड्यूल को पहले ही लोड कर देंगे, इससे पहले कि इन मॉड्यूल का उपयोग किया जाएगा। इस मामले में, हम सभी मॉड्यूल के निर्यात को कहीं न कहीं कैश कर देंगे, जहां से हमारे बिल्कुल तुल्यकालिक फ़ंक्शन की आवश्यकता होगी उन्हें वापस कर देगा।

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

 var a = someRandomValue(); require("./module" + a); 

फिर भी, इस समस्या को हल करने के लिए, आप मॉड्यूल के सामान्य AJAX- लोडिंग का उपयोग कर सकते हैं और आने वाले सभी परिणामों के साथ ऐसे मामलों के लिए eval कर सकते हैं।

अभी भी एक समस्या है कि मॉड्यूल में कोड निष्पादन का क्रम इससे भिन्न होगा, उदाहरण के लिए, Node.js. की स्थितियों में। दो छोटे मॉड्यूल पर विचार करें:

 //  "a" exports.result = doSomeExternalOperation(); 

 //  "b" prepareDataForSomeExternalOperation(); var a = require("./a"); 

Node.js में, जाहिर है, तैयार करने के लिए callDataForSomeExternalOperation फ़ंक्शन doSomeExternalOperation कॉल की तुलना में पहले होगा (लेकिन केवल अगर कोई अन्य आवश्यकता नहीं थी ("./ a" इससे पहले कॉल करता है)। हमारे मामले में, सब कुछ आसपास का दूसरा तरीका होगा, क्योंकि मॉड्यूल मॉड्यूल बी से पहले लोड और निष्पादित करेगा। दुर्भाग्य से, हमें भी इस खामी के साथ जुड़ना होगा। लेकिन निष्पक्षता में यह कहने लायक है कि मॉड्यूल के सही डिजाइन के साथ ऐसी स्थितियां पैदा नहीं होनी चाहिए। मॉड्यूल के मुख्य कोड में कुछ बाहरी क्रियाएं करना (उदाहरण के लिए, फ़ाइल सिस्टम या कुछ डेटाबेस में) जो कि अन्य मॉड्यूल के संचालन को स्पष्ट रूप से प्रभावित कर सकता है, अच्छा नहीं है।

यहाँ, सामान्य रूप से, और वह सब जो मैं ब्राउज़र में लोडिंग मॉड्यूल के बारे में बताना चाहता था। यदि वर्णित विधि किसी के लिए उपयोगी लग रही थी और वह इसे अपने काम में उपयोग करने का निर्णय लेता है (अच्छा है, सब कुछ यहां बहुत प्राथमिक है, और कार्यान्वयन के साथ इसमें कोई कठिनाई नहीं होनी चाहिए), मैं बहुत खुश हूं।

लेकिन अगर आपको अचानक कुछ नहीं करना है, या सिर्फ उत्सुक हैं - मेरे कार्यान्वयन के विवरण के विवरण में आपका स्वागत है!

कोड

स्रोत गीथूब पर स्वतंत्र रूप से उपलब्ध हैं।

मैंने इस उपयोगिता को एक वर्ग के रूप में डिजाइन करने का निर्णय लिया, जिसका प्रत्येक उदाहरण अपने स्वयं के कॉन्फ़िगरेशन के साथ एक अलग अनुप्रयोग होगा (हालांकि अभी के लिए, पूरे कॉन्फ़िगरेशन में एक ही पंक्ति शामिल है - वह मार्ग जहां हमारी सभी स्क्रिप्ट स्थित हैं), और मॉड्यूल कैश:

 function Comeon(path) { var self = this; self.path = path; self.modules = {}; } 

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

 Comeon.prototype.require = function require(moduleRequest, callback) { var self = this; loadNextModule.bind(self)(enqueueModule.bind(self)(getModuleId("", moduleRequest)), callback); } 

इससे पहले कि हम दो मुख्य और सबसे दिलचस्प कार्यों enqueueModule और loadNextModule पर विचार करें, हम कुछ सहायक पर विचार करते हैं।

SearchRequires फ़ंक्शन मॉड्यूल फ़ाइल के URL को एक पैरामीटर के रूप में लेता है, इसे एक तुल्यकालिक XHR अनुरोध के साथ लोड करता है, और इसमें आवश्यक फ़ंक्शन के लिए कॉल की घटनाओं को देखता है। मैं इस तथ्य पर ध्यान आकर्षित करना चाहता हूं कि हम डाउनलोड किए गए कोड को निष्पादित नहीं कर रहे हैं, लेकिन बस इस फ़ंक्शन का उपयोग करके मॉड्यूल निर्भरता की तलाश कर रहे हैं। मॉड्यूल फ़ाइल इस डाउनलोड के दौरान ब्राउज़र द्वारा कैश की जाती है, जो इस मॉड्यूल को कनेक्ट करते समय बाद में हमारे लिए उपयोगी होगी।

 var requirePattern = /(?:^|\s|=|;)require\(("|')([\w-\/\.]*)\1\)/g; function searchRequires(url) { var requires = []; var xhr = new XMLHttpRequest(); xhr.open("GET", url, false); xhr.onreadystatechange = function () { if ((xhr.readyState === 4) && (xhr.status === 200)) { var match; while ((match = requirePattern.exec(xhr.responseText)) !== null) { requires.push(match[2]); } } }; xhr.send(); return requires; } 

GetModuleId और getModuleContext फ़ंक्शंस का उपयोग पहचानकर्ता और मॉड्यूल को पथ को क्रमशः प्राप्त करने के लिए किया जाता है।

 function getModuleId(moduleContext, moduleRequest) { var moduleId = []; (/^\.\.?\//.test(moduleRequest) ? (moduleContext + moduleRequest) : moduleRequest).replace(/\.(?:js|node)$/, "").split("/").forEach(function (value) { if (value === ".") { } else if (value === "..") { moduleId.pop(); } else if (/[\w\-\.]+/.test(value)) { moduleId.push(value); } }); return moduleId.join("/"); } 

 function getModuleContext(moduleId) { return moduleId.slice(0, moduleId.lastIndexOf("/") + 1); } 

आवश्यकता फ़ंक्शन वह फ़ंक्शन है, जो मॉड्यूल के संदर्भ में, अनुरोधित कैश्ड निर्यात लौटाएगा। पहले इसे हमारे एप्लिकेशन इंस्टेंस के संदर्भ में और पहले पैरामीटर के रूप में वर्तमान मॉड्यूल के पथ को पास करने के बाद, हम प्रत्येक आइफ्रेम को विंडो में डाल देंगे।

 function require(moduleContext, moduleRequest) { var self = this; var moduleId = getModuleId(moduleContext, moduleRequest); if (self.modules[moduleId] && self.modules[moduleId].exports) { return self.modules[moduleId].exports; } else { throw Error("Module not found."); } } 

और अंत में, दो कार्यों पर विचार करें जो सभी मुख्य कार्य करते हैं।

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

 function enqueueModule(moduleId) { var self = this; var moduleQueue = []; if (!self.modules[moduleId]) { self.modules[moduleId] = { url: self.path + moduleId + ".js?ts=" + (new Date()).valueOf() }; moduleQueue.push(moduleId); searchRequires(self.modules[moduleId].url).forEach(function (value) { Array.prototype.push.apply(moduleQueue, enqueueModule.bind(self)(getModuleId(getModuleContext(moduleId), value))); }); } return moduleQueue; } 

LoadNextModule फ़ंक्शन enqueueModule फ़ंक्शन द्वारा दी गई कतार से होकर गुजरता है और हमारे मॉड्यूल को क्रम में ब्राउज़र में लोड करता है (ब्राउज़र इसकी कैश से फ़ाइलें लेगा, क्योंकि हमने पहले से ही उन्हें निर्भरता की खोज करने के लिए डाउनलोड किया था)। प्रत्येक मॉड्यूल को जोड़ने के लिए, जैसा कि हम ऊपर सहमत थे, एक अलग iframe का उपयोग किया जाता है जिसमें हम वैश्विक, निर्यात और मॉड्यूल.exports चर बनाते हैं, साथ ही साथ फ़ंक्शन की आवश्यकता होती है। प्रत्येक अगला iframe पिछली स्क्रिप्ट के पूरी तरह से लोड होने के बाद ही लोड किया जाता है। जब डाउनलोड कतार समाप्त हो जाती है, तो हम कॉलबैक फ़ंक्शन को बहुत शुरुआत में पारित कर देते हैं, यदि कोई हो, और अंतिम मॉड्यूल के निर्यात को इसमें स्थानांतरित करें।

 function loadNextModule(moduleQueue, callback) { var self = this; if (moduleQueue.length) { var iframe = document.createElement("iframe"); iframe.src = "about:blank"; iframe.style.display = "none"; iframe.onload = function () { var moduleId = moduleQueue.pop(); var iframeWindow = this.contentWindow; var iframeDocument = this.contentDocument; iframeWindow.global = window; iframeWindow.require = require.bind(self, getModuleContext(moduleId)); iframeWindow.module = { exports: {} } iframeWindow.exports = iframeWindow.module.exports; var script = iframeDocument.createElement("script"); script.src = self.modules[moduleId].url; script.onload = function () { self.modules[moduleId].exports = iframeWindow.module.exports; if (moduleQueue.length) { loadNextModule.bind(self)(moduleQueue, callback); } else if (typeof callback === "function") { callback(self.modules[moduleId].exports); } }; iframeDocument.head.appendChild(script); }; document.body.appendChild(iframe); } else if (typeof callback === "function") { callback(); } } 

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

 var script = Array.prototype.slice.call(document.getElementsByTagName("script"), -1)[0]; var main = script.getAttribute("data-main"); if (main) { window.addEventListener("load", function () { var comeon = new Comeon(script.getAttribute("data-path") || "/"); comeon.require(main); }); } 

वह सब है। अब हम ब्राउजर की तरफ कॉमनजस फॉर्मेट में लिखे मॉड्यूल्स का उपयोग कर सकते हैं और उन्हें अपनी खुशी में डेब्यू कर सकते हैं। ऐसा करने के लिए, हमें बस स्क्रिप्ट के लिए पथ के साथ आना और डेटा में मुख्य मॉड्यूल के नाम के साथ आना होगा:

 <script src="http://rawgithub.com/avgaltsev/comeon/master/comeon.js" data-path="scripts/" data-main="main"></script> 

या, यदि निष्पादन प्रक्रिया के दौरान आपको एक-दूसरे से स्वतंत्र कई मॉड्यूल कनेक्ट करने की आवश्यकता होती है, या यदि एप्लिकेशन में कई प्रवेश बिंदु हैं, तो आप एक अधिक क्रिया सिंटैक्स का उपयोग कर सकते हैं:

 <script src="http://rawgithub.com/avgaltsev/comeon/master/comeon.js"></script> <script> window.onload = function () { var comeon = new Comeon("scripts/"); //   comeon.require("main"); //    comeon.require("another_main", function (exports) { console.log(exports); }); }; </script>