YM मॉड्यूलर सिस्टम

एक और एक? क्यों? क्या कॉमनजस और एएमडी है? पीड़ित बिल्ली के नीचे जा सकते हैं।


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

एक सरल उदाहरण पर विचार करें: हमारे पास मॉड्यूल मॉड्यूलए , मॉड्यूलबी , मॉड्यूलसी है , और बाद वाला दो पिछले वाले पर निर्भर करता है।
शुरू करने के लिए, हम इन सभी मॉड्यूलों के लिए इन मॉड्यूल का वर्णन करने वाला एक कोड लिखेंगे: कॉमनजस, एएमडी, वाईएम।

CommonJS

moduleA.js:

module.exports = 'A'; 

moduleB.js:

 module.exports = 'B'; 

moduleC.js:

 var moduleA = require('A'), moduleB = require('B'); module.exports = moduleA + moduleB + 'C'; 

कनेक्शन और उपयोग:

 var moduleC = require('C'); console.log(moduleC); // prints "ABC" 

एएमडी

moduleA.js:

 define('A', function() { return 'A'; }); 

moduleB.js:

 define('B', function() { return 'B'; }); 

moduleC.js:

 define('', ['A', 'B'], function(moduleA, moduleB) { return moduleA + moduleB + 'C'; }); 

कनेक्शन और उपयोग:

 require([''], function(moduleC) { console.log(moduleC); // prints "ABC" }); 

YM

moduleA.js:

 modules.define('A', function(provide) { provide('A'); }); 

moduleB.js:

 modules.define('B', function(provide) { provide('B'); }); 

moduleC.js:

 modules.define('C', ['A', 'B'], function(provide, moduleA, moduleB) { provide(moduleA + moduleB + 'C'); }); 

कनेक्शन और उपयोग:

 modules.require([''], function(moduleC) { console.log(moduleC); // prints "ABC" }); 

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

moduleA.js:

 modules.define('A', function(provide) { setTimeout(function() { provide('A'); }); }); 

moduleB.js:

 modules.define('B', function(provide) { setTimeout(function() { provide('B'); }); }); 

moduleC.js:

 modules.define('C', ['A', 'B'], function(provide, moduleA, moduleB) { provide(moduleA + moduleB + 'C'); }); 

उसी समय, हम ध्यान दें कि मॉड्यूलसी खुद को मॉड्यूलए और मॉड्यूलबी की अतुल्यकालिक प्रकृति के बारे में कुछ भी नहीं जानता है। लाभ।

जीवन उदाहरण

हम एक सिंथेटिक उदाहरण से एक वास्तविक से गुजरेंगे। परियोजनाओं में, हम Yandex.Maps API का उपयोग करते हैं, जो सिद्धांत रूप में, तुल्यकालिक रूप से लोड नहीं कर सकता है (अंदर यह बहु-चरण लोडिंग का उपयोग करता है)। इसका मतलब लगभग यह है कि केवल लिखना असंभव है और आशा है कि मेरी बाद की सभी स्क्रिप्ट समाप्त एपीआई के साथ काम करने में सक्षम होंगी। आरंभ करने के लिए, आपको ymaps.ready घटना का इंतजार करना होगा। हमारी परियोजना काफी जटिल है, और हम एपीआई से आधार वर्गों से बहुत अधिक विरासत का उपयोग करते हैं। उनमें से एक के उदाहरण पर विचार करें। हमारी अपनी जटिल लेयर लेयर क्लास है, जिसे हम ymaps: ymaps.Layer से बेस लेयर से इनहेरिट करना चाहते हैं। वाईएम के साथ, यह बस किया जाता है: हम ymaps मॉड्यूल को परिभाषित करते हैं, जो एपी को लोड करता है, फिर वांछित घटना (ymaps.ready) की प्रतीक्षा करता है और फिर खुद को प्रदान करता है। सभी मॉड्यूल, जो एपीआई मॉड्यूल (ymaps) पर निर्भर थे, उसके बाद ही उनका समाधान शुरू करते हैं। इस प्रकार, हमारे मॉड्यूल, फिर से, Yandex.Maps API की अतुल्यकालिक प्रकृति के बारे में कुछ भी नहीं जानते हैं। कोड में कोई बैसाखी नहीं!

ymaps.js:

 modules.define( 'ymaps', ['loader', 'config'], function(provide, loader, config) { loader(config.hosts.ymaps + '/2.1.4/?lang=ru-RU&load=package.full&coordorder=longlat', function() { ymaps.ready(function() { provide(ymaps); }); }); }); 

लोडर और कॉन्फ़िगर मॉड्यूल का कोड यहां नहीं दिया गया है: पहला एक यूआरएल द्वारा स्क्रिप्ट लोड कर सकता है, दूसरा केवल स्थिरांक का एक हैश है।

ComplexLayer.js:

 modules.define('ComplexLayer', ['inherit', 'ymaps'], function(provide, inherit, ymaps) { var ComplexLayer = inherit(ymaps.Layer, ...); provide(ComplexLayer); }); 

हम ठीक वैसा ही करते हैं यदि हम, उदाहरण के लिए, jQuery पर निर्भरता की आवश्यकता है।
Jquery मॉड्यूल को परिभाषित करें:

 modules.define( 'jquery', ['loader', function(provide, loader) { loader('//yandex.st/jquery/2.1.0/jquery.min.js', function() { provide(jQuery.noConflict(true)); }); }); 

और हम अन्य सभी मॉड्यूल में jquery मॉड्यूल निर्भरता का उपयोग करते हैं।

इस प्रकार, हमारी परियोजना का पूरा कोड केवल मॉड्यूल है, कोई वैश्विकता नहीं है, अन्य लिपियों (तीसरे पक्ष के लोगों सहित) या अन्य मॉड्यूल को जोड़ने की प्रक्रिया पर कोई समझौता नहीं है, अतुल्यकालिक के बारे में कोई बैसाखी नहीं है।

अंत में, मैं हमारे वाईएम मॉड्यूलर सिस्टम की एपीआई लाता हूं (वास्तव में, कई और विधियां हैं, केवल मुख्य यहां हैं):

मॉड्यूल की घोषणा

 void modules.define( String moduleName, [String[] dependencies], Function( Function(Object objectToProvide) provide, [Object resolvedDependency, ...], [Object previousDeclaration] ) declarationFunction ) 

मॉड्यूल कनेक्शन

 void modules.require( String[] dependencies, Function( [Object resolvedDependency, ...] ) callbackFunction ) 

प्रोजेक्ट रिपोजिटरी: github.com/ymaps/modules