🧜🏽 👩🏽‍🔬 ⛹🏽 Definer.js - एक साधारण मॉड्यूलर सिस्टम 🤲 ⬇️ 👩🏽‍🤝‍👨🏼

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

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

विचार की अच्छी समझ के लिए, सरल से जटिल तक कैट उदाहरणों के तहत।

एक ऑनलाइन स्टोर का सार उत्पाद पृष्ठ ले लो, index.html :

 <html> <head> <meta charset="utf-8"/> <title> -</title> <script src="jquery.js"></script> <script src="https://rawgithub.com/tenorok/definer/master/definer.js"></script> <script src="modules/cart.js"></script> <script src="modules/list.js"></script> </head> <body> <ul class="list"> <li class="item"> <span class="name"></span>, <span class="price">250</span> </li> <li class="item"> <span class="name"></span>, <span class="price">100</span> </li> <li class="item"> <span class="name"></span>, <span class="price">300</span> </li> </ul> </body> </html>

हम मॉड्यूल के लिए डोम और निश्चित के साथ काम करने के लिए jQuery का उपयोग करेंगे।

Cart मॉड्यूल जो सामान जोड़ने की क्षमता के साथ एक ऑनलाइन स्टोर टोकरी को लागू करता है और अतिरिक्त माल की कुल लागत प्राप्त करता है:

 definer('Cart', function() { function Cart() { this.list = []; } Cart.prototype = { add: function(target) { var item = $(target); this.list.push({ name: item.find('.name').text(), price: +item.find('.price').text() }); }, sum: function() { return this.list.reduce(function(sum, item) { return sum + item.price; }, 0); } }; return Cart; });

Cart निर्भर list मॉड्यूल जो निर्देशिका के साथ आगंतुक बातचीत को लागू करता है:

 definer('list', function(Cart) { var iCart = new Cart(); $(function() { $('.item').on('click', function(e) { iCart.add(e.currentTarget); console.log(iCart.sum()); }); }); });

परिणाम एक ऐसा पृष्ठ है जहां आप किसी उत्पाद पर क्लिक कर सकते हैं और कंसोल में जोड़े गए उत्पादों का कुल मूल्य देख सकते हैं। लेकिन, एक ही समय में, हमने कार्यक्षमता को दो स्वतंत्र मॉड्यूल में विभाजित किया।

इस उदाहरण में, हमारे पास अभी भी एक वैश्विक चर है जिसे मॉड्यूल में भी स्थानांतरित किया जा सकता है, यह jQuery है।

modules/clean.js मौजूदा मॉड्यूल के सामने modules/clean.js :

 definer.clean('$');

अब $ चर वैश्विक संदर्भ में नहीं है:

 console.log($); // undefined

मॉड्यूल में jQuery का उपयोग जारी रखने के लिए, एक निर्भरता जोड़ें:

 definer('Cart', function($) { ... }); definer('list', function($, Cart) { ... });

सभा

अब सब कुछ तैयार है और आप स्रोतों को एक एकल फ़ाइल में एकत्र कर सकते हैं।

मॉड्यूल बिल्डर स्थापित करें:

 npm install definer

हम modules निर्देशिका से सभी modules को index.js फ़ाइल में इकट्ठा करते हैं:

 ./node_modules/.bin/definer -d modules/ index.js

अब index.html में केवल jQuery और असम्बद्ध फ़ाइल को शामिल करना पर्याप्त है:

 <script src="jquery.js"></script> <script src="index.js"></script>

ग्रन्ट-डिफरेंट के साथ बनाएँ

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

अनुदान के लिए आवश्यक सब कुछ स्थापित करें:

 npm install grunt grunt-cli grunt-contrib-watch grunt-definer

Gruntfile.js फ़ाइल को प्रोजेक्ट रूट में जोड़ें:

 module.exports = function(grunt) { grunt.initConfig({ watch: { scripts: { files: ['modules/*.js'], tasks: ['definer:all'] }, }, definer: { all: { target: 'index.js', directory: 'modules/' } } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-definer'); };

और निगरानी शुरू करें:

 ./node_modules/.bin/grunt watch

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

तृतीय-पक्ष फ़ाइलें बनाएँ

अब दो फाइलें पेज से जुड़ी हैं - jQuery और संकलित मॉड्यूल। आप असेंबली में jQuery जोड़ सकते हैं और पृष्ठ पर केवल एक फ़ाइल संलग्न कर सकते हैं।

ऐसा करने के लिए, बस ग्रन्ट लक्ष्य के लिए clean विकल्प जोड़ें:

 definer: { all: { target: 'index.js', directory: 'modules/', clean: { $: 'jquery.js' } } }

अब index.html में केवल एक असेंबल की गई फ़ाइल को शामिल करना पर्याप्त है:

 <script src="index.js"></script>

JSDoc

एकत्रित फ़ाइल के बारे में जानकारी के साथ JSDoc बनाना संभव है।

ऐसा करने के लिए, ग्रन्ट लक्ष्य में jsdoc विकल्प जोड़ें:

 jsdoc: { "file": "    -", "copyright": "2014 Artem Kurbatov, tenorok.ru", "license": "MIT license", "version": "package.json", "date": true }

JSON फ़ाइल के सापेक्ष पथ को इंगित करना संभव है, जहां से कलेक्टर को उसी नाम के क्षेत्र का मान प्राप्त होगा।

प्रोजेक्ट की जड़ में package.json फ़ाइल डालें:

 { "version": "0.1.0" }

निम्न JSDoc इकट्ठे फ़ाइल में मॉड्यूल से पहले प्रकट होता है:

 /*! * @file     - * @copyright 2014 Artem Kurbatov, tenorok.ru * @license MIT license * @version 0.1.0 * @date 17 February 2014 */

कुल मिलाकर

डिफाइनर मदद करता है:

निर्भरता से मॉड्यूल में पूरे आवेदन को तोड़ने
वैश्विक चर से छुटकारा पाएं
ग्रंट प्लगइन का उपयोग करके सभी स्क्रिप्ट को एक फ़ाइल में इकट्ठा करें

गिथब पर निश्चित और ग्रंट-निश्चित के लिए प्रलेखन पाया जा सकता है।

Definer.js - एक साधारण मॉड्यूलर सिस्टम

सभा

ग्रन्ट-डिफरेंट के साथ बनाएँ

तृतीय-पक्ष फ़ाइलें बनाएँ

JSDoc

कुल मिलाकर

More articles: