AJL - जावास्क्रिप्ट का उपयोग करके JS और CSS फाइलों को लोड करने के लिए घटक

हेलो, हेब्र !

हाल ही में, स्थितियों ने मुझे आकार में एक सरल और छोटे संसाधन लोडर की खोज करने के लिए प्रेरित किया है। लेकिन मेरी सभी खोजों के लिए आवश्यकता होती है। जेएस, जो किसी कारण से मुझे पसंद नहीं आया (यह एक अलग लेख के लिए एक विषय है)।

इसलिए, एक ही समय में अपनी बाइक लिखने और अभ्यास करने का निर्णय लिया गया था।
नतीजतन, एक घटक लागू किया गया था जो कि uglify के प्रारूप में 6.28 Kb और GZip में 1.3 Kb तक लेता है।

उनकी कुंजी "चिप्स":

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

यहाँ, वास्तव में, इसकी मुख्य विशेषताओं का वर्णन है।

एक बिल्ली के तहत एजेएल का उपयोग करने का एक छोटा कोर्स और कुछ घटकों के विकास का विवरण।


AJL कनेक्ट करें
एजेएल कनेक्ट करते समय आपको केवल यह निर्दिष्ट करना होगा कि डेटा-एप विशेषता है। यहाँ एक उदाहरण है (AJL को आधार लेआउट में जोड़ते हुए):

//baseLayout.html <script src="js/vendor/AJL.min.js" data-ep="EntryPoint.js"></script> 

AJL लोड करने के बाद, यह EntryPoint.js को लोड करता है, जिसमें आप संकुल को कॉन्फ़िगर करते हैं।
आप डेटा-अवधि नहीं लिख सकते हैं। एजेएल को कॉन्फ़िगर करने के लिए आपके पास यह तय करने का अधिकार है कि आपके लिए अधिक सुविधाजनक कहां है।
EntryPoint.js अनिवार्य रूप से एक स्क्रिप्ट है जो लोड होने पर भी निष्पादित होती है।

हम पैकेज सेट करते हैं
आइए jQuery, उसके प्लगइन्स और आपकी स्क्रिप्ट को जोड़ने का एक उदाहरण देखें। इस स्थिति में, डेटा-एप विशेषता का उपयोग किया गया था।

 //EntryPoint.js AJL({ name: "jQuery", //  assets: ['js/vendor/jquery.min.js'], //  URL'    config: { //  async: false //   } }, { name: "jQuery Plugins", assets: ['js/vendor/jquery.plugin.js', 'js/vendor/jquery.plugin2.js'], config: { depend: ['jQuery'] //  ,       } }, { name: "My Scripts", assets: ['js/foo.js', 'js/bar.js'], config: { lazy: true //      window.onload } }).loadAll(); //  ,   PackageManager.  chainloading       

एंट्रीपॉइंट बहुत साफ दिखता है। नाम में, पैकेज का नाम निर्दिष्ट करें। परिसंपत्तियों में , परिसंपत्ति URL के साथ एक सरणी। विन्यास में , मापदंडों के साथ एक वस्तु। कुल मिलाकर, छह मापदंडों को कॉन्फ़िगर करने के लिए पारित किया जा सकता है:

• async (बूल) - क्या एसिंक्रोनस रूप से लोड करना है
• आलसी (बूल) - लोड होने के लिए खिड़की की प्रतीक्षा करें
• dependence (सरणी) - निर्भरताएँ
• scriptTypeAttr (string) - यह पैरामीटर स्क्रिप्ट प्रकार = "" में प्रदर्शित होता है
• linkCssTypeAttr (स्ट्रिंग) - यह एक प्रकार में लिंक = ""
• linkCssRelAttr (स्ट्रिंग) - लिंक rel में "="

ईमानदारी से, मुझे अभी भी समझ में नहीं आया कि मैंने मापदंडों के साथ किसी ऑब्जेक्ट में टैग के लिए विशेषताओं को क्यों निकाला।

EntryPoint.js में क्या होता है?

1. तीन पैकेज jQuery के नाम, jQuery प्लगइन्स, मेरे लिपियों के साथ बनाए जाते हैं। सफल निर्माण के बाद, AJL एक PackageManager लौटाएगा जिसमें लोडअल () विधि मौजूद है। यह विधि पैकेज लोड करती है। सभी पैकेज सरणी और कॉलिंग लोड () के माध्यम से लूपिंग द्वारा लोड किए गए हैं। एक महत्वपूर्ण कारक जो डाउनलोड को प्रभावित कर सकता है, डाउनलोड पैकेज के निर्माण के क्रम में होता है। इसलिए, पहले "गंभीर" पुस्तकालयों को इंगित करना बेहतर है, और उसके बाद ही सब कुछ।

2. jQuery को लोड करने वाला पहला एसिंक्रोनस मोड में नहीं है। लोड करने के बाद jQuery प्लगइन्स शुरू हो जाएगा, लेकिन केवल jQuery लोड करने के बाद। और अंत में - मेरे लिपियों - पृष्ठ पर सभी संसाधनों को लोड करने के बाद (आलसी लोड हो रहा है)।

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

AJL के साथ, इस स्थिति का समाधान एक समान तरीके से प्रस्तावित किया जा सकता है।

हमारे पास एंट्रीपॉइंट है, जिसमें हम सभी आवश्यक पैकेज बनाते हैं:

  AJL({ name: "jQuery", assets: ['js/vendor/jquery.min.js'], config: { async: false } }, { name: "jQuery Plugins", assets: ['js/vendor/jquery.plugin.js', 'js/vendor/jquery.plugin2.js'], config: { depend: ['jQuery'] } }, { name: "Editor Scripts And Styles", assets: ['js/editor/foo.js', 'js/editor/bar.js', 'css/editor/style.css'], config: { depend: ['jQuery Plugins'] } }, { name: "My Dashboard Scripts", assets: ['js/foo.js', 'js/bar.js'], config: { lazy: true } }); 

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

 //dashboard.html <script>AJL("My Dashboard Scripts").load();</script> //editor.html <script>AJL("Editor Scripts And Styles").load();</script> 

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

इस प्रकार, आप संकुल की श्रृंखला बना सकते हैं और केवल उन्हीं को डाउनलोड कर सकते हैं जो वास्तव में काम के लिए आवश्यक हैं।

"हुड" के तहत क्या होता है?

अब आइए आगे बढ़ते हैं कि कुछ AJL मॉड्यूल कैसे विकसित किए गए।

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

 setNamespace: function (namespace, module) { var parts = namespace.split('.'), parent = window, partsLength, curPart, i; //Need iterate all parts of namespace without last one partsLength = parts.length - 1; for (i = 0; i < partsLength; i++) { //Remember current part curPart = parts[i]; if (typeof parent[curPart] === 'undefined') { //If this part undefined then create empty parent[curPart] = {}; } //Remember created part in parent parent = parent[curPart]; } //And last one of parts need to be filled by module param parent[parts[partsLength]] = module; //And not forgot return generated namespace to global scope return parent; }, 

परिणामस्वरूप, अपने मॉड्यूल को विकसित करते समय, आप एक काफी सरल डिजाइन का उपयोग कर सकते हैं:

 AJL("Module.SubModule", function() { return "Hi, I'm Module.SubModule"; }); 

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

  load: function () { AJL.Loader.loadPackage.call(this); } 

यह अपने आप को खराब कोड दोहराव से बचाने के लिए किया जाता है। पैकेज अलग हैं, कॉन्फ़िगरेशन अलग हैं, और बूटलोडर एक होना चाहिए। Loader.js और loadPackage () वास्तव में निर्णय लेते हैं कि कब DOM में टैग जोड़ना संभव है, और कब नहीं।

 loadPackage: function () { var helper = AJL.Helper, packageManager = AJL.PackageManager, pack = this, packageAssets = pack.getAssets(), packageConfig = pack.getConfig(), depend = packageConfig.getItem('depend'); //If assets array empty then halt loading of package if (helper.isEmpty(packageAssets)) { return false; } //If this package depend on other packages then load dependencies first if (!helper.isEmpty(depend)) { packageManager.loadByNames(depend); } //If need to wait window.load than call lazyLoad and return if (packageConfig.getItem('lazy') == true) { lazyLoad.call(pack); return true; } //In other cases just call startLoading directly for start loading startLoading.call(pack); return true; }, 

हम इस बात पर ध्यान देते हैं कि निर्भरता लोडिंग कैसे लागू की जाती है। यदि इस पैकेज में निर्भरताएं हैं, तो हम एक पुनरावर्ती लोड लागू करते हैं। हम श्रृंखलाओं पर निर्भरता लोड करते हैं, और इसी तरह।

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

 loadAll: function () { var helper = AJL.Helper, curPack; for (var pack in packages) { if (packages.hasOwnProperty(pack)) { curPack = packages[pack]; if (helper.isInstanceOf(curPack, AJL.Package)) { curPack.load(); } } } return this; }, 

सरणी के माध्यम से Iterates, और यदि यह एक इंस्टेंस पैकेज है, तो कॉल लोड () करें। आश्रित पैकेज लोड करते समय, मैं loadByNames () फ़ंक्शन का उपयोग करता हूं।

 loadByNames: function (names) { var helper = AJL.Helper, curName, namesLength, i; namesLength = names.length; for (i = 0; i < namesLength; i++) { curName = names[i]; if (packages.hasOwnProperty(curName) && helper.isInstanceOf(packages[curName], AJL.Package)) { packages[curName].load(); } } return this; } 

हम नामों के साथ पूरे सरणी को सॉर्ट करते हैं और देखते हैं कि हमारे स्टोरेज पैकेज में कोई नाम हैं या नहीं। यदि हाँ, और यह एक इंस्टेंस पैकेज है, तो कॉल लोड () करें।

AJL
और अंत में, सबसे महत्वपूर्ण बात। AJL () फ़ंक्शन।

 AJL = function () { var packageManager = AJL.PackageManager, namespace = AJL.Namespace, helper = AJL.Helper, packageInstance = {}, packageName = '', packageAssets = [], packageConfig = {}, argLength = arguments.length, argFirst, argSecond, i; //Switch of arguments length for detect what need to do switch (argLength) { case 0: //If arguments not exists then just return PackageManager instance return packageManager; case 1: argFirst = arguments[0]; //If this arg is string then return package with this name if (helper.isString(argFirst)) { return packageManager.getPackage(argFirst); } break; case 2: argFirst = arguments[0]; argSecond = arguments[1]; //If first arg is string and second object or function if (helper.isString(argFirst) && (helper.isObject(argSecond) || helper.isFunction(argSecond))) { //Then I think that it's namespace setting namespace.setNamespace(argFirst, argSecond); return packageManager; } break; default: break; } //If all predefined templates in arguments didn't decided then create packages from them for (i = 0; i < argLength; i++) { if (!helper.isUndefined(arguments[i])) { packageName = arguments[i].name; packageAssets = arguments[i].assets; packageConfig = arguments[i].config; packageInstance = new AJL.Package(packageName, packageAssets, packageConfig); packageManager.setPackage(packageInstance); } } return packageManager; }; 

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

मैं उन सभी को धन्यवाद देता हूं जिन्होंने इस जगह पर पढ़ने की ताकत पाई। यदि आप एजेएल की कोशिश करना चाहते हैं, तो सभी आवश्यक संसाधन हैं:

मुख्य पृष्ठ
गिटहब स्रोत
प्रलेखन

पीएस मैं सभी इच्छाओं और आलोचनाओं के लिए आभारी रहूंगा। मैं विकास छोड़ने वाला नहीं हूं। बस विचारों से बाहर भाग गया :)