जेएस प्रोग्रामर की अपनी रूपरेखा और पेशेवर विकास का विकास करना

क्या आपने कभी सोचा है कि फ्रेमवर्क कैसे काम करता है? सामग्री का लेखक, जिसका अनुवाद आज हम प्रकाशित करते हैं, का कहना है कि जब वह, कई साल पहले, jQuery का अध्ययन करने के बाद, Angular.js पर ठोकर खाई, जो उसने देखा वह उसके लिए बहुत जटिल और समझ से बाहर लग रहा था। तब Vue.js दिखाई दिया, और इस ढांचे के साथ काम करते हुए, उन्हें दो-तरफ़ा डेटा बाइंडिंग की अपनी प्रणाली लिखने के लिए प्रेरित किया गया। इस तरह के प्रयोग प्रोग्रामर के पेशेवर विकास में योगदान करते हैं। यह लेख उन लोगों के लिए है जो उन प्रौद्योगिकियों के क्षेत्र में अपने स्वयं के ज्ञान का विस्तार करना चाहते हैं जिन पर आधुनिक जेएस फ्रेमवर्क आधारित हैं। विशेष रूप से, यह अपने स्वयं के ढांचे के मूल को लिखने के तरीके पर ध्यान केंद्रित करेगा जो HTML तत्वों, प्रतिक्रियाशीलता और दो-तरफ़ा डेटा बाइंडिंग की कस्टम विशेषताओं का समर्थन करता है।

प्रतिक्रिया प्रणाली के बारे में

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

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

प्रॉक्सी पैटर्न

प्रॉक्सी पैटर्न किसी वस्तु पर पहुंच तंत्र को ओवरलोड करने पर आधारित है। यह समान है कि लोग अपने बैंक खातों के साथ कैसे काम करते हैं।

उदाहरण के लिए, कोई भी सीधे अपने खाते के साथ काम नहीं कर सकता है, अपनी आवश्यकताओं के अनुसार इसका संतुलन बदल सकता है। खाते के साथ किसी भी कार्रवाई को करने के लिए, आपको किसी ऐसे व्यक्ति से संपर्क करने की आवश्यकता है, जिसके पास बैंक के साथ, उसके साथ काम करने की अनुमति हो। बैंक खाताधारक और खाते के बीच एक प्रॉक्सी के रूप में कार्य करता है।

var account = {    balance: 5000 } var bank = new Proxy(account, {    get: function (target, prop) {        return 9000000;    } }); console.log(account.balance); // 5,000 ( ) console.log(bank.balance);    // 9,000,000 (   ) console.log(bank.currency);   // 9,000,000 (  ) 

इस उदाहरण में, account ऑब्जेक्ट द्वारा दर्शाई गई खाता शेष राशि का उपयोग करने के लिए bank ऑब्जेक्ट का उपयोग करते समय, गेट्टर फ़ंक्शन अतिभारित होता है, जो इस तथ्य की ओर जाता है कि इस तरह के अनुरोध के परिणामस्वरूप, वास्तविक मूल्य के बजाय 9,000,000 का मूल्य हमेशा वापस आ जाता है, भले ही यह गुण मौजूद नहीं है।

और यहां एक सेटर फ़ंक्शन को ओवरलोड करने का एक उदाहरण है।

 var bank = new Proxy(account, {   set: function (target, prop, value) {       //      0       return Reflect.set(target, prop, 0);   } }); account.balance = 5800; console.log(account.balance); // 5,800 bank.balance = 5400; console.log(account.balance); // 0 (  ) 

यहां, set फ़ंक्शन को ओवरलोड करके, आप इसके व्यवहार को नियंत्रित कर सकते हैं। उदाहरण के लिए, आप उस मान को बदल सकते हैं, जिसे आप किसी प्रॉपर्टी में लिखना चाहते हैं, कुछ अन्य प्रॉपर्टी में डेटा लिख ​​सकते हैं, या सिर्फ कुछ भी नहीं कर सकते हैं।

रिएक्टिविटी सिस्टम उदाहरण

अब जब हम प्रॉक्सी पैटर्न का पता लगा लेते हैं, तो हम अपना JS फ्रेमवर्क विकसित करना शुरू कर देंगे।

इसे जटिल नहीं करने के लिए, हम Angular.js में उपयोग किए गए एक समान सिंटैक्स का उपयोग करेंगे। नतीजतन, नियंत्रक की घोषणा और नियंत्रक के गुणों के लिए टेम्पलेट तत्वों के बंधन सरल और स्पष्ट दिखाई देंगे।

यहां टेम्प्लेट कोड दिया गया है।

 <div ng-controller="InputController">   <!-- "Hello World!" -->   <input ng-bind="message"/>     <input ng-bind="message"/> </div> <script type="javascript"> function InputController () {     this.message = 'Hello World!'; } angular.controller('InputController', InputController); </script> 

पहले आपको गुणों के साथ एक नियंत्रक घोषित करने की आवश्यकता है। अगला, टेम्पलेट में इस नियंत्रक का उपयोग करें, और अंत में, ng-bind विशेषता ng-bind उपयोग करें ताकि तत्व मान के लिए दो-तरफ़ा डेटा बाइंडिंग स्थापित हो सके।

एक टेम्पलेट पार्स करना और एक नियंत्रक को त्वरित करना

हमारे पास कुछ गुण होने के लिए, जिनसे डेटा संलग्न किया जा सकता है, हमें एक स्थान (नियंत्रक) की आवश्यकता होती है, जहां इन गुणों को घोषित किया जा सकता है। इस प्रकार, नियंत्रक का वर्णन करना और इसे ढांचे में शामिल करना आवश्यक है।

नियंत्रकों के साथ काम करने की प्रक्रिया में, फ्रेम उन तत्वों की तलाश करेगा जिनके पास ng-controller गुण हैं। यदि आप घोषित नियंत्रकों में से किसी एक से मैच कर सकते हैं, तो रूपरेखा इस नियंत्रक का एक नया उदाहरण बनाएगी। यह नियंत्रक उदाहरण केवल टेम्पलेट के इस विशेष टुकड़े के लिए जिम्मेदार है।

 var controllers = {}; var addController = function (name, constructor) {   //     controllers[name] = {       factory: constructor,       instances: []   };     // ,     var element = document.querySelector('[ng-controller=' + name + ']');   if (!element){      return; //  ,      }     //         var ctrl = new controllers[name].factory;   controllers[name].instances.push(ctrl);     //   ..... }; addController('InputController', InputController); 

नीचे एक "होममेड" चर controllers की घोषणा है। ध्यान दें कि controllers ऑब्जेक्ट में फ्रेमवर्क में घोषित सभी controllers शामिल हैं जिन्हें addController कहा addController ।

 var controllers = {   InputController: {       factory: function InputController(){           this.message = "Hello World!";       },       instances: [           {message: "Hello World"}       ]   } }; 

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

डेटा बाइंडिंग में शामिल वस्तुओं की खोज करें

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

 var bindings = {}; //  : element   DOM,   Array.prototype.slice.call(element.querySelectorAll('[ng-bind]'))   .map(function (element) {       var boundValue = element.getAttribute('ng-bind');       if(!bindings[boundValue]) {           bindings[boundValue] = {               boundValue: boundValue,               elements: []           }       }       bindings[boundValue].elements.push(element);   }); 

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

यहाँ bindings चर का हमारा संस्करण कैसा दिखता है:

     var bindings = {       message: {           //   :           // controllers.InputController.instances[0].message           boundValue: 'Hello World',           // HTML- (   ng-bind="message")           elements: [               Object { ... },               Object { ... }           ]       }   }; 

नियंत्रक गुणों का द्विपक्षीय बंधन

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

एक प्रॉक्सी का उपयोग करके कोड से किए गए परिवर्तनों का पता लगाना

जैसा कि ऊपर उल्लेख किया गया है, Vue.js संपत्ति परिवर्तन का पता लगाने के लिए एक प्रॉक्सी में घटकों को लपेटता है। हम डेटा बाइंडिंग में शामिल नियंत्रक गुणों के लिए केवल सेटर को सम्‍मिलित करके ऐसा करेंगे:

 //  : ctrl -    var proxy = new Proxy(ctrl, {   set: function (target, prop, value) {       var bind = bindings[prop];       if(bind) {           //    DOM,               bind.elements.forEach(function (element) {               element.value = value;               element.setAttribute('value', value);           });       }       return Reflect.set(target, prop, value);   } }); 

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

इस उदाहरण में, हम केवल input तत्वों के बंधन का समर्थन करते हैं, क्योंकि केवल value विशेषता यहां सेट है।

तत्व घटनाओं का जवाब

अब हमें बस उपयोगकर्ता क्रियाओं के लिए एक सिस्टम प्रतिक्रिया प्रदान करनी है। ऐसा करने के लिए, इस तथ्य को ध्यान में रखें कि जब वे अपने मूल्यों में परिवर्तन का पता लगाते हैं तो DOM तत्व घटनाओं को बढ़ाते हैं।

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

 Object.keys(bindings).forEach(function (boundValue) {   var bind = bindings[boundValue];     //          bind.elements.forEach(function (element) {     element.addEventListener('input', function (event) {       proxy[bind.boundValue] = event.target.value; //  ,          });   }) }); 

परिणाम

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

प्रिय पाठकों! यदि आप पेशेवर रूप से आधुनिक जेएस फ्रेमवर्क का उपयोग करते हैं, तो कृपया हमें इस बारे में बताएं कि आपने उनका अध्ययन कैसे शुरू किया और आपको उन्हें समझने में क्या मदद मिली।