लेख पुराना है। वर्तमान संस्करण इतिहास देखें।

(सभी पिछले लेखों को वर्तमान स्थिति में अद्यतन किया गया है)
कोष

साइट (प्रलेखन भी है)

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

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

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

<select class="my-select"> <option>1</option> <option>2</option> <option>3</option> </select>

एक उदाहरण बनाएँ:

 var mk = new Matreshka();

.my-select X- गुण का .my-select :

 mk.bindElement( 'x', '.my-select' );

डेटा बदलें

 mk.x = 2;

जब हम प्रॉपर्टी x को एक अलग मूल्य प्रदान करते हैं, तो तत्व की स्थिति तदनुसार बदल जाती है।
एक जीवंत उदाहरण देखें

घोंसले के शिकार गुड़िया की एक और महत्वपूर्ण विशेषता घटनाओं (कस्टम वाले सहित) है। उदाहरण के लिए, Matryoshka एक संपत्ति के मूल्य में बदलाव को पकड़ सकता है:

 mk.on( 'change:x', function( evt ) { alert( 'x   ' + evt.value ); });

कोड "x " देगा "x " :

 mk.x = '';

इन और अन्य विशेषताओं के बारे में अधिक जानकारी के लिए ऊपर दिए गए लिंक देखें।

लेख डिजाइन के बारे में थोड़ा सा

मैं विधियों और गुणों को निरूपित करने के लिए jsdoc सिंटैक्स का उपयोग करूँगा, विशेष रूप से, उदाहरण के लिए एक जाली (#), MK#addDependence अर्थ है कि मैं addDependence विधि, MK आवृत्ति के बारे में बात कर रहा हूँ।

सबसे स्वादिष्ट

निर्भरताएँ ( एमके # अतिरिक्त निर्भरता विधि )

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

मान लें कि हमें गुण f a, b, c, d, e का गुण हमेशा होना चाहिए।
शुद्ध घटनाओं पर आधारित कोड ऐसा दिखता है:

 this.on( 'change:a change:b change:c change:d change:e', function() { this.f = this.a + this.b + this.c + this.d + this.e; });

अब इस से तुलना करें:

 this.addDependence( 'f', 'abcd e', function() { return this.a + this.b + this.c + this.d + this.e; });

या इसके साथ भी:

 this.addDependence( 'f', 'abcd e', function( a, b, c, d, e ) { return a + b + c + d + e; });

सबसे पहले , हमें कम इशारों को करना होगा ( 'change:' जरूरत नहीं है 'change:' )
दूसरे , विधि और तर्कों के नाम से, हम स्पष्ट रूप से समझते हैं कि कोड की संबंधित पंक्तियों को क्यों बनाया गया है। मानव भाषा में अनुवाद करते हुए, पहली विधि निम्नानुसार बताई जा सकती है: “ a, b, c, d, e do के गुणों को बदलते समय,” और दूसरा इस प्रकार है: “ a, b, c, d, e गुणों पर गुण f की निर्भरता जोड़ें "। फर्क महसूस करते हैं?
तीसरा , यदि कोई ऐसी संपत्ति जिस पर अन्य संपत्ति निर्भर करती है, को silent ध्वज के साथ बदल दिया जाता है, तो पहला विकल्प काम नहीं करेगा।

उदाहरण के लिए, परिधि की गणना करने का कार्य है।

विकल्प 1, घटनाओं पर:

 this.on( 'change:a change:b', function() { this.p = ( this.a + this.b ) * 2; });

विकल्प 2 निर्भरता का उपयोग कर:

 //  2 this.addDependence( 'p', 'a b', function() { return ( this.a + this.b ) * 2; });

अब, अगर हम कहते हैं:

 this.set({ a: 2, b: 3 }, { silent: true });

... तो पहले संस्करण में p नहीं बदलेगा, दूसरे में - यह बदल जाएगा।

कृपया ध्यान दें कि यदि आप बदलते p पर एक ईवेंट हैंडलर लटकाते हैं, और p से एक गुण silent ध्वज के साथ परिवर्तनों पर निर्भर करता है, तो, जैसा कि अपेक्षित था, परिवर्तन हैंडलर p नहीं कहा जाएगा।

 this.on( 'change:p', function() { /* ... */ } ); this.set( 'a', 12, { silent: true }); //   "p"    ""

अगले संस्करण में, यह अन्य वर्गों में स्थित डेटा पर संपत्ति की निर्भरता को जोड़ने की योजना है (अनुप्रयोगों में एक सामान्य कार्य जहां डेटा उपस्थिति पर हावी है)। यह पहले से ही लागू है, लेकिन भाषा सिंटैक्स सीमाओं के कारण प्रलेखित नहीं है। यह माना जाता है कि अन्य वर्गों पर निर्भरता इस तरह दिखाई देगी:

 this.addDependence( 'a', [ instance1, 'bc d', instance2, 'ef g', this, 'hij' ], function() { /* ... */ });

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

उदाहरणों के साथ पृष्ठ पर, आप विधि को लाइव देख सकते हैं।

रेंडोल की टिप्पणी के बारे में: निर्भरता का उपयोग करके मानचित्रण को लागू किया जा सकता है।

मध्यस्थ (मध्यस्थ)

एमके विधि # setMediator

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

 // - this.on( 'change:a', function() { if( typeof this.a !== 'string' ) { this.a = String( this.a ); } }); // - 1 this.on( 'change:a', function() { if( typeof this.a === 'string' ) { /* ... */ } }); // - 2 this.on( 'change:a change:b', function() { if( typeof this.a === 'string' ) { /* ... */ } }); //   this.a = 123;

क्या आप समझते हैं कि यहां क्या चल रहा है? पहला हैंडलर a को एक स्ट्रिंग में परिवर्तित करता a , और अंतिम दो हैंडलर को यह जांचने के लिए मजबूर किया जाता है कि क्या यह a स्ट्रिंग है, क्योंकि कनवर्टर हैंडलर सभी हैंडलर (खुद सहित) को फिर से शुरू करता है। एक समाधान की तलाश में इधर-उधर भटकना, जैसे कि beforechange:%% इवेंट beforechange:%% , यह फ्रेमवर्क में एक नई अवधारणा को पेश करने का निर्णय लिया गया - "मध्यस्थ"।

मध्यस्थ (या मध्यस्थ) इस संपत्ति के परिवर्तन से जुड़े किसी भी घटना से पहले संपत्ति के मूल्य को बदल देता है।

MK#setMediator का सिंटैक्स सरल है: पहला तर्क वह कुंजी है जिसके लिए आप मध्यस्थ सेट करना चाहते हैं, दूसरा तर्क वह फ़ंक्शन है जिसे संपत्ति के नए मूल्य को वापस करना चाहिए। वैकल्पिक सिंटैक्स: यदि आप कक्षा में एक साथ कई मध्यस्थों को लटकाना चाहते हैं तो केस के लिए एक मध्यस्थ कुंजी वस्तु को विधि के पास भेज दिया जाता है।

उदाहरण के लिए, संपत्ति हमेशा एक स्ट्रिंग होनी चाहिए, और संपत्ति b हमेशा एक पूर्णांक (या NaN ) होनी चाहिए

 this.setMediator( 'a', function( value ) { return String( value ); }); this.setMediator( 'b', function( value ) { return parseInt( value ); });

और उन लोगों के लिए जो जावास्क्रिप्ट को अच्छी तरह से जानते हैं:

 this.setMediator( 'a', String ); this.setMediator( 'b', parseInt );

मध्यस्थ ऐसी सरल संभावनाओं तक सीमित नहीं हैं। कुछ भी किसी भी गणना को करने से रोकता है, लेकिन केवल सावधानी से ताकि आवेदन के प्रदर्शन को नुकसान न पहुंचे।

विधि मेगा-सुविधाजनक और शांत है, जब सर्वर एक निश्चित प्रकार के मूल्य को स्वीकार करता है। केवल एक मध्यस्थ हो सकता है। एक ही प्रॉपर्टी के साथ अगला MK#setMediator पुराने पिक को ब्लॉक कर देगा। "मध्यस्थ" को हटाने के लिए, आप एक फ़ंक्शन के बजाय null पास कर सकते हैं।

उदाहरण के साथ पृष्ठ से एक लाइव उदाहरण देखें।

 mk.setMediator({ percentageValue: function( v ) { return v > 100 ? 100 : v < 0 ? 0 : v; }, stringValue: String, integerValue: parseInt });

हमने तीन गुणों के लिए पिक्स सेट किए हैं। पहला एक प्रतिशत संपत्ति है: संपत्ति का मूल्य 0 से 100 तक हो सकता है, जो इस सीमा की सीमाओं से परे जाता है, स्वचालित रूप से एक वैध मूल्य में बदल जाता है (यदि 0 से कम है, तो मान 0 हो जाता है, यदि 100 से अधिक है, तो मान 100 से अधिक है) दूसरा मान एक स्ट्रिंग है, संपत्ति हमेशा एक स्ट्रिंग होनी चाहिए। तीसरा हमेशा पूर्णांक (या NaN ) होना चाहिए। विचार को विकसित करते हुए, आप एक ऐसी संपत्ति बना सकते हैं जो हमेशा सही या गलत हो, आप एक ऐसी संपत्ति बना सकते हैं जो हमेशा कुछ लोगों का उदाहरण होगी ...

MK.Array विधि # setItemMediator

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

 var mkArray = new MK.Array( 1, 2, 3, 4, 5 ); mkArray.setItemMediator( function( value ) { return String( value ); }); mkArray.push( 6, 7 ); mkArray.unshift( true, {} );

 console.log( mkArray.toJSON() ); // [ "true", "[object Object]", "1", "2", "3", "4", "5", "6", "7" ]

यह टाइप किया गया सरणी बनाता है: स्ट्रिंग्स की एक सरणी। हां, निश्चित रूप से, इस तरह के टाइप किए गए सरणी, खराब के लिए अंतर्निहित टाइप किए गए सरणियों से प्रदर्शन में भिन्न होते हैं। लेकिन डेटा को मान्य करने और बदलने की क्षमता अब कोई सीमा नहीं है।

यह मत भूलो कि एक सरणी तत्व का मध्यस्थ पूरी कक्षा में एकमात्र हो सकता है। और आप मध्यस्थ को null करने के लिए इसे हटा सकते हैं।

 mkArray.setItemMediator( null );

वैसे, उपरोक्त उदाहरण उन्नत प्रोग्रामर के लिए तय किए जा सकते हैं:

 mkArray.setItemMediator( String );

कूल?

"कई अनुप्रयोगों के अनुसार"

लेखों की पहली श्रृंखला के प्रकाशन के बाद, हब्रायुज़र्स ने मैत्रियोश्का की कुछ विशेषताओं की आलोचना की। आलोचना को अच्छी तरह से स्थापित किया गया था, और विवादास्पद मुद्दों की समीक्षा करने और सुधार करने का निर्णय लिया गया था। यहाँ उनमें से कुछ हैं:

1. MK.Array # पॉप और MK.Array # शिफ्ट हटाए गए आइटम को वापस करें, इसके बजाय "स्व।" Starfall : लेख पर टिप्पणी , winbackgo : लेख पर टिप्पणी करें
2. input[type="text"] और 'keyup' अब 'paste' ईवेंट को सुनते हैं, न कि केवल 'keyup' । safron : लेख पर टिप्पणी करें
3. input[type="checkbox"] और input[type="radio"] लिए 'keyup' अब 'keyup' इवेंट के लिए सुनते हैं। इसका मतलब यह है कि आप कीबोर्ड से इन तत्वों के साथ काम कर सकते हैं जब उन्हें डेटा (उसी टिप्पणी) को बाध्य किया जाता है।

Balalaika

बालालय्का

इसके अलावा, jQuery पर कठिन निर्भरता को हटाने का निर्णय लिया गया था। मेरी राय में, jQuery एक अद्भुत पुस्तकालय है, लेकिन नए ब्राउज़रों में प्रासंगिकता खो रहा है। अब, यदि पेज पर कोई jQuery नहीं है, तो इसे एक मिनी लाइब्रेरी से बदल दिया जाता है जिसे मैंने "बालाकला" कहा (नोट: केवल अगर नहीं; यदि jQuery जुड़ा हुआ है, तो jQuery अभी भी उपयोग किया जाता है)।

Balalaika को Array.prototype विरासत में Array.prototype , इसलिए सभी तरीके जो कि डेवलपर के लिए उपलब्ध हैं, वर्गों के साथ काम करने के लिए jQuery संगत तरीके ( removeClass , hasClass , hasClass ), इवेंट्स ( on , off ), HTML पार्सिंग ( parseHTML ) और अन्य शामिल हैं।

बालाकला को सीधे उपयोग करने के लिए, वैश्विक चर $ b का उपयोग किया जाता है :

 $b( 'div' ).forEach( function(){ /* ... */ } ); $b( '.blah-blah', context ).is( 'div' ); $b( 'input[type="text"]' ).on( 'keydown', handler );

(बालाकला के बारे में एक अलग पोस्ट लिखने की योजना है)

banzalik : एक इच्छा के साथ टिप्पणी करें
jMas : एक और टिप्पणी

अन्य नवाचार

एमके # चयन विधि

पहले तत्व का चयन करता है जो this लिए एक के अंदर चयनकर्ता से मेल खाता है (कुंजी "__this__" , पिछले लेख देखें)। विधि को व्यक्तिगत तत्वों के साथ सरलीकृत कार्य के लिए बनाया गया था, लेकिन तत्वों के संग्रह के साथ नहीं।

 this.select( '.blah-blah' );

एमके # चयन विधि

this अंदर चयनकर्ता से मेल खाने वाले सभी तत्वों का चयन करता है। $ (डॉलर संकेत) विधि के समान है। MK#selectAll तरीकों के सेट को पूरा करने के लिए बनाया MK#selectAll : यदि "चयन" विधि ( MK#select ) है, तो एक "सभी का चयन करें" विधि होनी चाहिए।

 this.selectAll( '.blah-blah' ); //   ,   this.$( '.blah-blah' );

MK.Array # पुल विधि

निर्दिष्ट सूचकांक के साथ आइटम को हटाता है और वापस करता है।

 var x = this.pull( 3 );

यह स्प्लिट के ऊपर सिन्सेटिक शुगर है।

 var x = this.splice( 3, 1 )[ 0 ];

गुण .MK , isMKArray और isMKObject है

गुण जो हमेशा संबंधित वर्गों के उदाहरणों में true होते हैं।

 var mkObject = new MK.Object(); alert( mkObject.isMK && mkObject.isMKObject ); // true

फिक्स

इसके अलावा, कई कीड़े तय किए गए थे। यहाँ फिक्स की एक सूची है:

यदि तर्क के रूप में, कुछ भी न करें, तो MK.Object # addJSONKeys और MK.Object # removeJSONKeys विधियाँ undefined (या कुछ भी पारित नहीं हुआ है)।
आप MK.Object # addJSONKeys , MK.Object # removeJSONKeys , MK # तरीकों के साथ संख्याओं का उपयोग कर सकते हैं
फिक्स्ड एमके # एक बार विधि

नामित तरीके और गुण

Semver.org की सिफारिशों का पालन करते हुए, अप्रचलित तरीकों और गुणों को 1.0 रिलीज तक नहीं हटाया जाएगा, लेकिन नए तरीकों का उपयोग करने के लिए चेतावनी और अनुरोध कंसोल में प्रदर्शित किए जाएंगे।

MK.elementProcessors -> MK। defaultBinders
एमके # एल -> एमके # बाध्य
एमके # $ एल -> एमके # बाउंडऑल
MK.htmlp -> एमके। binders.innerHTML ()
MK.classp () -> एमके। binders.className ()

स्मार्ट ऐरे

MK.Array प्लगइन का उल्लेख MK.DOMArray में किया गया था, जिसका उल्लेख MK.Array बारे में लेख में किया गया था। यही है, कार्यक्षमता कि "ध्यान आकर्षित करने के लिए" जीआईएफ परिलक्षित बॉक्स से बाहर काम कर रहा था। आपको याद दिला दूं कि ऐरे में बदलाव (ऐड, डिलीट, सॉर्ट ...) होने पर MK.DOMArray प्लगइन स्वचालित रूप से DOM को बदल देता है।

Matryoshka वेबसाइट से उदाहरण देखें । स्मार्ट सरणी का अधिक विस्तृत विवरण थोड़ी देर बाद की योजना बनाई गई है।

"रोड मैप"

बदली Model संपत्ति को लागू करें (जो Backbone से model समान होगा)। यह सुविधा सरणी तत्व के मध्यस्थ पर वाक्यगत शर्करा होगी।
आलसी आरंभीकरण। अब, जब वंशानुक्रम होता है, तो आपको हमेशा initMK विधि को कॉल करना चाहिए। कोषेर नहीं।
ईवेंट इंजन को फिर से लिखें। संभवतः, DOM EventTarget इंटरफ़ेस को EventTarget रूप में लिया जाएगा।
अन्य वर्ग उदाहरणों (जैसा कि ऊपर वर्णित है) पर निर्भरता के लिए MK#addDependence निर्भरता MK#addDependence को अपडेट करें।
मिनिफ़ायर के लिए कोड ऑप्टिमाइज़ करें।
साइट पर सही ग्रंथ। साइट, जैसा कि आप देख सकते हैं, अंग्रेजी में है, और पाठ में त्रुटियां हैं। आप उस पाठ का चयन करने के बाद Ctrl + Enter के संयोजन का उपयोग करके सही त्रुटियों की मदद कर सकते हैं जिसमें एक त्रुटि है (इसलिए अनुरोध पूल बनाने के लिए नहीं)। मैं बहुत आभारी रहूंगा।

1.0 संस्करण में (जो कि एक साल बाद की योजना बनाई गई है), यह पहली बार, अप्रचलित तरीकों को हटाने के लिए, और दूसरी बात, आठवें गधे के लिए समर्थन को हटाने की योजना है। जब कोई भी IE8 का समर्थन नहीं करता है तो सभी इंटरनेट बिल्ली के बच्चे खुश होंगे।

निष्कर्ष में

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

Matryoshka का एक और लक्ष्य है कि एक "डेटा गॉड" ढांचे का उपयोग करके एक डेवलपर बनाया जाए, जो पूरी तरह से 100% नियंत्रित करता है कि मॉडल में क्या हो रहा है, ज़ाहिर है, इंटरफ़ेस के बारे में चिंता किए बिना। उदाहरण के लिए, वस्तुओं और सरणियों के पेड़ पर डेटा परिवर्तन की घटना के पॉपअप इवेंट को लागू करने की योजना बनाई गई है, और यह बहुत अच्छा होगा। अधिक है ...

एक्सेसरीज़ (गेटर्स एंड सेवर्स) के आधार पर, मैत्रियोस्का कर्नेल जो स्थान प्रदान करता है, वह प्रोग्रामर की रचनात्मकता के लिए व्यापक क्षेत्र प्रदान करता है। सहमत, बिचौलियों और निर्भरता का विचार सतह पर है। एक इनपुट पर कहें, value प्रॉपर्टी हमेशा एक स्ट्रिंग होती है, ताकि हम इसे वहां न valueAsNumber , valueAsNumber प्रॉपर्टी हमेशा एक नंबर होती है, जो स्ट्रिंग वैल्यू पर निर्भर करती है ...

पोस्ट को अंत तक पढ़ने (या स्क्रॉल करने) के लिए धन्यवाद। अच्छे की सभी किरणें।

(पुरालेख) मातृेशका.जेएस v0.1

सबसे स्वादिष्ट

निर्भरताएँ ( एमके # अतिरिक्त निर्भरता विधि )

मध्यस्थ (मध्यस्थ)

एमके विधि # setMediator

MK.Array विधि # setItemMediator

"कई अनुप्रयोगों के अनुसार"

बालालय्का

अन्य नवाचार

एमके # चयन विधि

एमके # चयन विधि

MK.Array # पुल विधि

गुण .MK , isMKArray और isMKObject है

फिक्स

नामित तरीके और गुण

स्मार्ट ऐरे

"रोड मैप"

निष्कर्ष में

More articles: