🤙 🤸🏻 🤙🏼 (पुरालेख) मातृेशका.जस

लेख पुराना है। नए दस्तावेज़ में इस पोस्ट से सबसे अधिक प्रासंगिक जानकारी है। मातृेशका देखें।

(याद करें रिपॉजिटरी यहां है )

सभी का अभिवादन। मैंने पिछले लेख को इस तथ्य पर समाप्त किया कि हमें डेटा की एक सरणी की आवश्यकता हो सकती है। Matreshka.js परियोजना में एक सरणी MK.Array वर्ग के उदाहरण हैं। वे नियमित सरणियों से कैसे भिन्न हैं? लगभग कुछ भी नहीं। प्रोटोटाइप MK.Array में वे सभी विधियाँ शामिल हैं जो एक "पारंपरिक" सरणी में है, निर्माता मूल Array के समान तर्क लेता है, और उदाहरणों में कई दिलचस्प विशेषताएं हैं।

MK.Array स्टेरॉयड पर एक सरणी है जो कर सकता है:

सब कुछ Array कर सकते हैं
संशोधन पर घटनाओं को उत्पन्न करें
जहाँ संभव हो चैन विधि कॉल का उपयोग करें
जानता है कि Matryoshka क्या कर सकता है: गुणों को तत्वों को बांधें और कस्टम घटनाओं को उत्पन्न करें

श्रृंखला में पहले लेख से gif याद है?

MK.Array का उपयोग करते समय याद रखने योग्य 5 बातें हैं:

0. Array से MK.Array लिए आए तरीके फिर से लिखे नहीं MK.Array । MK.Array की अंतर्निहित क्षमताओं का उपयोग करता है, जिसका अर्थ है कि, सबसे पहले, वर्ग कोड बहुत कॉम्पैक्ट है, और दूसरी बात, हम तरीकों के गलत कार्यान्वयन से बचते हैं। इसका मतलब यह भी है कि इंटरनेट एक्सप्लोरर 8 में कई नए तरीके काम नहीं करेंगे, जब तक कि आप कनेक्ट न हों, es5-shim । जब एक असमर्थित विधि को कॉल किया जाता है, तो एक त्रुटि उत्पन्न होती है, जिसका संदेश इस लाइब्रेरी को जोड़ने की पेशकश करेगा।

नवीनतम क्रोम बिल्ड और एमडीएन प्रलेखन में Array प्रोटोटाइप का अध्ययन करते समय कार्यान्वित विधियों की सूची संकलित की गई थी।

1. विधियाँ जो एक आवृत्ति को संशोधित करती हैं, दो घटनाओं को उत्पन्न करती हैं: "modify" और विधि का नाम। उदाहरण के लिए, .push पद्धति को निष्पादित करने के बाद, न केवल "modify" है, बल्कि "push" भी "push" । UPD : तत्वों को जोड़ते समय, घटना "add" उत्पन्न होती है, जब हटाते हुए - "remove" ।

 var mkArray = new MK.Array; mkArray.on( 'push', function() { alert( 'push' ); }); mkArray.on( 'modify', function() { alert( 'modify' ); }); mkArray.push( 42 );

संशोधित तरीकों की सूची:

2. उचित घटनाओं को उत्पन्न करने से बचने के लिए, silent शुरू होने वाले तरीकों का उपयोग करें। उदाहरण के लिए, यदि आप किसी सरणी में एक तत्व जोड़ना चाहते हैं, लेकिन घटनाओं को उत्पन्न करने से बचना चाहते हैं, तो silentPush उपयोग silentPush (ध्यान दें कि मूल विधि का नाम पूंजीकृत है)।

 var mkArray = new MK.Array; mkArray.silentPush( 42 );

ट्रिगर होने पर संशोधित न होने वाले तरीकों की सूची:

3 .। .forEach विधि, जो मूल Array के प्रोटोटाइप में undefined , MK.Array पर MK.Array :

 var mapped = mkArray .forEach( function() { ... }) .forEach( function() { ... }) .map( function() { ... }) ;

4. मूल Array तरीके, जो Array को संशोधित करते हैं, और एक माध्यमिक कार्य करते हैं, सरणी की लंबाई लौटाते हैं। .push , .unshift ) ~~या हटाए गए तत्व ( .pop , .shift )~~ ( UPD : 0.1 में निर्धारित), MK.Array खुद को MK.Array वापस करते हैं। यह मुझे तरीकों की श्रृंखला (कुछ ऐसी चीज जिसकी मुझे हमेशा कमी थी) का निर्माण करने की अनुमति देता है। ऐसे तरीके जिनका प्राथमिक कार्य पारंपरिक तरीके से किसी अन्य प्रकार के काम का मूल्य वापस करना है। इसका मतलब है कि .indexOf एक नंबर देता है, .toString - एक स्ट्रिंग ...

 mkArray .push( 1, 2, 3, 4 ) .unshift( 0 ) .push( 5 ) .forEach( function() { ... } ) .sort() .reverse() ;

इस व्यवहार के लिए मुआवजा बहुत सरल है, उदाहरण के लिए, .push विधि के लिए:

 var array = new Array( 1, 2, 3, 4 ), mkArray = new MK.Array( 1, 2, 3, 4 ), arrayLength, mkArrayLength; arrayLength = array.push( 6, 7 ); mkArray.push( 6, 7 ); mkArrayLength = mkArray.length;

5. Iterator मेथड ( .forEach , .forEach , .filter , ...) पहले आर्ग्यूमेंट के रूप में लेते हैं जो एक फंक्शन है जिसका तीसरा आर्ग्यूमेंट एक देशी ऐरे का उदाहरण है। आठवें गधे की ख़ासियत Array.prototype[ method ].apply के उपयोग की अनुमति नहीं देती है। पूरी Array.prototype[ method ].apply से Matryoshka के संदर्भ में, इसलिए, तरीकों का प्रक्षेपण इस तरह से होता है:
1. MK.Array उदाहरण Array उदाहरण में परिवर्तित हो जाता है।
2. Array.prototype[ name ].apply( array, arguments ); विधि Array.prototype[ name ].apply( array, arguments );
3. MK.Array उदाहरण को साफ़ किया गया है और परिणामी Array साथ अद्यतन किया गया है।

 mkArray.forEach( function( item, index, array ) { console.log( array === mkArray ); // false });

यह मैट्रीशोका के कार्यान्वयन की एक विशेषता है, जो अनुभवी प्रोग्रामर के बीच घबराहट का कारण बन सकता है। गुस्से वाली टिप्पणी लिखने में जल्दबाजी न करें। अगर यह हब्र के लिए दिलचस्प होगा, तो मैं सबसे महत्वपूर्ण बात बताऊंगा: मैट्रीशका कैसे काम करता है।

UPD : संस्करण 1.0 में, यह सुविधा IE8 के लिए समर्थन की अस्वीकृति के कारण तय की जाएगी

विरासत

Matryoshka-array को उसी तरह से विरासत में मिला है जैसे कि Matryoshka को विरासत में मिला है।

 var MyArray = Class({ 'extends': MK.Array, constructor: fucntion() { this.initMK(); } });

.initMK विधि, इस मामले में, Matryoshka के बुनियादी छद्म-निजी गुणों को आरंभ करने के अलावा, सरणी द्वारा आवश्यक इवेंट हैंडलर को जोड़ता है और इनहेरिटेंस पर चलाने की आवश्यकता होती है।

स्पॉइलर के तहत पाठ मैट्रियोशका 0.1 की रिहाई के बाद प्रासंगिकता खो दिया है। आप इसे पढ़ नहीं सकते।

व्यावहारिक अनुप्रयोग

MK.Array अपने आप में एक रेडी-टू- MK.Array क्लास है जो किसी भी एप्लीकेशन में चीनी MK.Array । केवल एक "लेकिन" है: नेस्टेड गुड़िया सरणी डेटा को एलीमेंट के तत्वों से बाँध नहीं सकती है। .bindElement , आप एक तत्व को .bindElement का उपयोग करके एक सूचकांक से .bindElement सकते .bindElement , लेकिन जाहिर है कि यह थोड़ा समझ में आता है: सूचकांक लगातार संशोधन के साथ बदलते हैं। यदि आप कहते हैं कि क्या है, तो एक सूची है जिसे सरणी बदलने पर अद्यतन किया जाना चाहिए। इस मामले में, आपको आवश्यक तरीकों को ट्रैक करने और मैन्युअल रूप से डोम को बदलने की आवश्यकता है। उदाहरण के लिए, यदि एप्लिकेशन में तत्वों को जोड़ना और हटाना शामिल है, तो आपको "push" और "splice" की घटनाओं को सुनने की जरूरत है, एकमात्र सवाल यह है कि आपके आवेदन की क्या आवश्यकता है।

पोस्ट की शुरुआत में क्लिप (अभी तक) अनडक्वामेंटेड MK.DOMArray प्लगइन के काम का एक प्रदर्शन है, जो डेटा परिवर्तनों का जवाब देते हुए, स्वचालित रूप से DOM को बदलता है। प्लगइन एक प्रयोग के रूप में बनाया गया था, Matryoshka की क्षमताओं को प्रदर्शित करने और इस विचार के करीब पहुंचने के लिए कि डेटा को बदलने पर DOM को खुद को अपडेट करना चाहिए। लेकिन प्रयोग इतना सफल रहा कि शायद, प्लग-इन कोड MK.Array कोड में MK.Array हो जाएगा। DOM में परिवर्तन इष्टतम हैं: जब ऑब्जेक्ट्स को सरणी में जोड़ा जाता है, तो नए तत्वों को पेज में जोड़ा जाता है, हटाए जाने पर, उन्हें हटा दिया जाता है, जब सॉर्ट किया जाता है, तो उन्हें सॉर्ट किया जाता है। यह सुनिश्चित करना है कि तालिका को फिर से नहीं बनाया गया है, लेकिन क्रमिक रूप से प्रतिक्रिया करता है।

यहां उदाहरण में MK.DOMArray -अरे (या इसके वंशज: MK.DOMArray ) को बैकबोन में संग्रह का एक एनालॉग कहा जा सकता है, और इसके तत्व मॉडल का एक एनालॉग हैं। एक उदाहरण यहाँ देखा जा सकता है: jsbin.com/aZEseWE/16 (इस उदाहरण से gif दर्ज किया गया था)। और यहाँ: jsbin.com/eQomoJe/9 एक अधिक तपस्वी विकल्प है। इसमें अंतर्निहित तरीकों का कोई ओवरराइड नहीं है। मैं स्पष्ट अतिरेक के बावजूद दूसरी विधि पसंद करता हूं।

MK.DOMArray इस तरह से काम करता है: वस्तुओं को जोड़ने पर (शुरुआत, अंत, मध्य ... कोई बात नहीं), यह जाँचता है कि क्या "स्वयं" में एक .renderer विधि है और, यदि कोई है, तो दिए गए तत्व को पेज ट्री में सम्मिलित करता है और ऑब्जेक्ट पर किसी ईवेंट को ट्रिगर करता है। "render" ।

 var Example = Class({ 'extends': MK.DOMArray, constructor: function() { this //   .initMK() //   .bindElement( this, 'table tbody' ) ; }, renderer: function( object ) { //     .    ,   return '<tr><td class="a"></td><td class="b"></td><td class="c"></td></tr>'; } });

अतिरिक्त ऑब्जेक्ट का कार्य "render" इवेंट को पकड़ना है और "__this__" लिए बाध्य तत्वों के अंदर तत्वों को "__this__" ।

 var ExampleObject = Class({ 'extends': MK.Object, constructor: function( o ) { this .initMK() .jset( o ) .on( 'render', function( evt ) { this //    'render' — ,    //  MK.DOMArray    HTML    ? //    ( )   ,  , //          .bindElement( this, evt.el ) //    .bindElement({ a: this.$( '.a' ), b: this.$( '.b' ), c: this.$( '.c' ) }, MK.htmlp ) ; }) ; } });

विचार

यह वह जगह है जहां प्लगइन काम करता है, जो विशेष रूप से तालिकाओं के साथ काम करता है। शायद यह इस तरह काम करेगा:

 var table = MK.Table({ table: '.my-table' rows: [{ title: 'A', key: 'a' }, { title: 'B', key: 'b' }] }); table.push({ a: 'Fuck', b: 'Yeah' });

चक्र के अंत में

मैट्रीशका एक कॉम्पैक्ट, आसानी से सीखने वाली रूपरेखा है जो विकसित होती रहेगी। प्रोग्रामर की तैयारी के स्तर के बावजूद, मैट्रियोशका सीखना आसान है और, शुरुआती लोगों द्वारा संरचित कोड में स्थानांतरित होने पर, सबसे अधिक संभावना है। कॉम्पैक्टनेस और एक्स्टेंसिबिलिटी प्लगइन्स और ऐड-ऑन के लिए विचारों का एक गुच्छा देता है। समय के साथ, jQuery निर्भरता को हटा दिया जाएगा ( UPD : पहले ही हटा दिया गया), Internet Explorer 8 के लिए समर्थन, बेहतर प्रदर्शन और बहुत कुछ ...

आपके ध्यान के लिए धन्यवाद, सब अच्छा है।

PS अब README रिपॉजिटरी में एक रोडमैप है।

(पुरालेख) मातृेशका.जस - MK.Array

विरासत

व्यावहारिक अनुप्रयोग

चक्र के अंत में

More articles: