Backbone.js में निहित

Backbone.js का उपयोग कर सहकर्मी! क्या आपने कभी सोचा है कि इस लाइब्रेरी में विरासत कैसे काम करती है?
जानिए कैसे Backbone.Model.extend({}) व्यवहार करता है?
और आपको शायद पता है और याद है कि विस्तार के दो वैकल्पिक पैरामीटर हैं: प्रोटो प्रॉप्स और स्टैटिक प्रॉप्स।
यदि आपने उपरोक्त प्रश्नों में से कम से कम एक प्रश्न का नकारात्मक उत्तर दिया है, तो मैं बिल्ली के नीचे पूछता हूं।
मैं चरण-दर-चरण अनुसंधान, आरेख, टैबलेट और उदाहरणों को खुश करने की कोशिश करूंगा।

प्रस्तावना

मेरे लिए व्यक्तिगत रूप से, यह समझना कि प्रयुक्त पुस्तकालय / घटक कैसे काम करता है (विशेष रूप से वह जो मैं सबसे अधिक बार उपयोग करता हूं) कुछ अनिवार्य और महत्वपूर्ण है। क्यों?

• आप तृतीय-पक्ष लोकप्रिय लाइब्रेरी के स्रोत कोड से बहुत सारे नए, उपयोगी और दिलचस्प सीख सकते हैं।
• लाइब्रेरी के काम से संबंधित किसी समस्या / बग पर कसने का जोखिम कम से कम है
• ओपनेंसर्स लाइब्रेरी को कांटा करने और अपना बिट करने का एक छोटा सा मौका है

मैं लंबे समय से Backbone.js में वंशानुक्रम के मुद्दे पर रुचि रखता हूं
और इसलिए मैंने फैसला किया, स्रोत खोला, और ... चलो शुरू हो जाओ!

मैं तुरंत एक आरक्षण करूँगा: विरासत सभी पुस्तकालय संस्थाओं के लिए समान है, चाहे वह मॉडल, दृश्य, संग्रह या राउटर हो। इस लेख में, मैं एक उदाहरण के रूप में दृश्य का उपयोग करूंगा।

प्रलेखन

प्रलेखन से, हम जानते हैं कि विस्तार विधि के दो पैरामीटर हैं: गुण और classProperties।

Backbone.View.extend (गुण, [classProperties])

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

अपनी खुद की एक संग्रह कक्षा बनाने के लिए, Backbone.Collection का विस्तार करें, उदाहरण के गुण प्रदान करने के साथ-साथ वैकल्पिक classProperties को सीधे संग्रह के निर्माण कार्य में संलग्न किया जाए।

हम सोर्स कोड देखते हैं

डेवलपर टूल डीबगर की तरह, चलो विस्तार विधि के माध्यम से चलते हैं।
टेस्ट कोड:

 Backbone.View.extend({ testProp1: true }, { testProp2: true }); 

स्टेज # 1

 // Helper function to correctly set up the prototype chain, for subclasses. // Similar to `goog.inherits`, but uses a hash of prototype properties and // class properties to be extended. var extend = function(protoProps, staticProps) { var parent = this; var child; 

टिप्पणियों से हम देखते हैं कि यह कुछ बदलावों के साथ goog.inherits (जो मुझे नहीं निपटना था) का एक एनालॉग है।
पहले चरण में, हमारे पास:

• प्रोटोपप्रॉप्स: फ़ंक्शन का पहला तर्क
• staticProps: फ़ंक्शन का दूसरा तर्क
• माता-पिता: इस मामले में, निर्माता Backbone.View है
• बच्चा: हमारे लिए अभी तक कुछ अज्ञात है

तुरंत मैं दो बिंदुओं को स्पष्ट करना आवश्यक समझता हूं:
1. Backbone.View कंस्ट्रक्टर एक कंस्ट्रक्टर फ़ंक्शन है जो विकल्पों को संसाधित करने, घटनाओं की सदस्यता लेने, प्रारंभिक विधि को कॉल करने और अन्य कार्यों के लिए काम करता है जो लाइब्रेरी के काम में बहुत महत्वपूर्ण हैं और पर्दे के पीछे जगह लेते हैं।
2. Backbone.View.prototype मानक विधियों और गुणों का एक समूह है: प्रस्तुत करना, हटाना, आदि।

स्टेज # 2

 if (protoProps && _.has(protoProps, 'constructor')) { child = protoProps.constructor; } else { child = function(){ return parent.apply(this, arguments); }; } 

पहले से अनजान बच्चे के लिए कुछ दिलचस्प होता है। यह कंस्ट्रक्टर के पहले पैरामीटर (प्रोटोपॉप्स) में दिए गए फंक्शन में या बैकबोन. व्यू कंस्ट्रक्टर में बदल जाता है। अब तक, हम इस पर निश्चित नहीं हैं और आगे बढ़ते हैं।

स्टेज # 3

 _.extend(child, parent, staticProps); 

Backbone.View कंस्ट्रक्टर और हमारे स्टेटिकप्रॉप्स के सभी गुणों और तरीकों के साथ बच्चे का विस्तार करें।

वास्तव में, Backbone.View निर्माता के पास कोई गुण और विधियां नहीं हैं, सबसे अधिक संभावना है कि यह सिर्फ मामले में किया जाता है। आप कभी नहीं जानते, किसी दिन वे दिखाई देंगे, और फिर से लिखने की आवश्यकता नहीं होगी।

स्टेज # 4

 var Surrogate = function(){ this.constructor = child; }; Surrogate.prototype = parent.prototype; child.prototype = new Surrogate; 

एक निश्चित सरोगेट प्रकट होता है। यह आपके साथ हमारे बच्चे का एक प्रोटोटाइप है, जिसकी निर्माता संपत्ति बच्चा है (हाँ, हाँ, यह है) और प्रोटोटाइप Backbone.View.prototype है।

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

स्टेज # 5

 if (protoProps) _.extend(child.prototype, protoProps); child.__super__ = parent.prototype; return child; 

प्रोटॉपप्रॉप्स के गुणों और विधियों को बच्चे (सरोगेट) प्रोटोटाइप (विस्तार कार्य के लिए पहला तर्क) में जोड़ें और __super__ संपत्ति बनाएं, जो Backbone.View.prototype का संदर्भ होगा।
नतीजतन, हमें एक वसा निर्माता (बच्चा) मिलता है जो कुछ इस तरह दिखता है:

निष्कर्ष और उपयोग के उदाहरण

विस्तार का उपयोग, हम मानक गुणों के अलावा, स्थिर सेट कर सकते हैं। वे कंस्ट्रक्टर के साथ-साथ कंस्ट्रक्टर संपत्ति के संदर्भ में उपयोग के लिए उपलब्ध होंगे।

 var ViewConstructor = Backbone.View.extend({ protoMehod: function () { console.log(this.constructor.staticMethod()); } }, { staticProperty: 5, staticMethod: function () { return 'Hello from constructor. Property is ' + this.staticProperty; } }); var viewInstance = new ViewConstructor(); 

दूसरे तर्क ऑब्जेक्ट (staticProps) में विधियों के लिए संदर्भ ViewConstructor है। पहले तरीकों के लिए - viewInstance।

हम विस्तार विधि के पहले पैरामीटर में केवल निर्माणकर्ता संपत्ति में इसे सेट करके आसानी से अपने कंस्ट्रक्टर का उपयोग कर सकते हैं:

 Backbone.View.extend({ constructor: function () { //        Backbone.View this.staticMethod(); }, render: function () { this.constructor.staticProperty; // 5 } }, { staticProperty: 5, staticMethod: function () { return 'Hello from constructor. Property is ' + this.staticProperty; } }); 

इस मामले में, नए ऑपरेटर का उपयोग करते समय एक उदाहरण बनाते समय, पहले पैरामीटर में पुनर्निर्मित एक निर्माणक का उपयोग किया जाएगा, जिसके लिए दूसरे पैरामीटर में निर्दिष्ट सभी स्थिर गुण उपलब्ध होंगे, साथ ही Backbone.View.prototype के सभी तरीके भी उपलब्ध होंगे।