(पुरालेख) मातृेशका.जेएस - परिचय

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

हमर के सभी पाठकों और लेखकों को बधाई।

मैं आपको एक कॉम्पैक्ट फ्रेमवर्क से परिचित कराना चाहता हूं जो आपको संरचित अनुप्रयोगों पर थोड़ा बदलाव करने की अनुमति देता है। मैत्रिकोस्का में थोड़ा सा जादू सन्निहित है, जिसे निम्नानुसार लेखों की एक श्रृंखला द्वारा प्रकट किया जा सकता है:

• परिचय
• विरासत
• MK.Object
• MK.Array
• मातृेशका।जस वि ० १
• मातृेशका.जेएस v0.2
• टोडो एमवीसी कार्यान्वयन

ध्यान आकर्षित करने के लिए कोड:

mk.on( 'change:x', function() { alert( 'x is changed to ' + this.x ); }); mk.x = 2; // alerts "x is changed to 2" 

और यह ... IE8 में काम करता है।

क्या है मैट्रीशोका?

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

क्यों?

मैं प्रस्तुति के बारे में सोचने और मेरे द्वारा लिखे गए कोड के साथ इसे बदलने के बारे में थक गया हूं। जावास्क्रिप्ट में डेटा सिंक्रोनाइज़ेशन और प्रेजेंटेशन की सभी बैचेनी मुझमें नकारात्मक भावनाओं को जन्म देती है, और भविष्य में लक्ष्यित किए जाने वाले मेट्रीशोका का महत्वाकांक्षी लक्ष्य यह पूरी तरह से भूल जाना है कि हमारे पास एक यूआई है, जो केवल डेटा के साथ काम करता है। बेशक, यह कार्य 100% हल नहीं किया जा सकता है, लेकिन हम, प्रोग्रामर, कोड क्लीनर, कम और अधिक लचीला बनाने के लिए हमें दिए गए टूल में से सबसे अधिक निचोड़ना चाहिए। यह आपके कोड को हिला देने और बुराई बनने का समय है।

डेटा बाइंडिंग

यह ज्ञात है कि ब्राउज़र में क्लाइंट एप्लिकेशन को डेटा और प्रस्तुति के बीच सिंक्रनाइज़ेशन की आवश्यकता होती है। क्लासिक समस्या: डेटा है:

 var o = { x: 2 }; 

एक select जो इस डेटा को बदलना चाहिए:

 <select> <option>1</option> <option>2</option> <option>3</option> <select> 

यदि आप शुद्ध JS + jQuery कोड का उपयोग करते हैं, तो हम निम्नलिखित कुछ लिखेंगे:

 $( 'select' ).on( 'change', function() { ox = +this.value; }); 

फिर, जब हम डेटा बदलना चाहते हैं, हम लिखते हैं:

 ox = 1; $( 'select' ).val( ox ); 

यह बहुत अच्छा नहीं है, क्योंकि यह आपको एक बार में दो "परमाणुओं" के लिए मूल्य निर्धारित करने के लिए मजबूर करता है: एक संपत्ति और एक तत्व।

इस समस्या को विभिन्न तरीकों से हल किया जाता है: बैकबोन (एमवीसी) एप्लिकेशन को एक मॉडल (मॉडल, संग्रह), प्रस्तुति (एचटीएमएल कोड) और नियंत्रक (देखें) में विभाजित करता है। नॉकआउट और एंगुलर (एमवीवीएम) एक अभ्यास का उपयोग करके डेटा को बांधता है जो .NET से क्लाइंट वेब पर जाता है: नियंत्रक की जगह तर्क का हिस्सा (इस मामले में ViewModel) HTML कोड में लिखा जाता है (यदि विवरण गलत है तो मैं माफी मांगता हूं)। ऐसे ढांचे हैं, जिन्हें आप पकड़ नहीं सकते।

Matryoshka इस तरह से प्रस्तुति के लिए डेटा संलग्न करता है कि, सबसे पहले, प्रोग्रामर HTML कोड (MVVM के विपरीत) को नहीं छूता है, और दूसरी बात, प्रोग्रामर मॉडल को बदलने के लिए HTML (बैकबोन के विपरीत) की घटनाओं के बारे में सोचना बंद कर देता है।

 var mk = new Matreshka; //  new MK; ,  MK === Matreshka,    mk.bindNode( 'x', 'select', { on: 'change', getValue: function() { return this.value; }, setValue: function( v ) { this.value = v; } }); 

यदि हम डेटा बदलना चाहते हैं, तो हम बस लिखते हैं:

 mk.x = 2; 

ऐसा कोड न केवल एक एक्स को एक ड्यूस को निर्दिष्ट करेगा, बल्कि .value = 2 सेट करके चयन की स्थिति को भी बदल .value = 2 ।
और यह .set जैसे तरीकों का उपयोग किए बिना है।
jsbin.com/jikewipi/2/edit

यहाँ क्या हुआ?

 mk.bindNode( 'x', 'select' ... ) 

bindNode विधि, विचित्र रूप से पर्याप्त है, तत्व को संपत्ति के लिए बाध्य करने के लिए जिम्मेदार है। पहला तर्क वस्तु की कुंजी है, दूसरा चयनकर्ता है, इस मामले में 'select' । दूसरे तर्क का प्रकार किसी भी मान को jQuery द्वारा स्वीकार किया जाता है: चयनकर्ता, शुद्ध तत्व, jQuery वस्तु, NodeList, तत्वों की सरणी ... अर्थात, 'select' को $( 'select' ) या document.getElementsByTagName( 'select' ) या document.querySelector( 'select' ) से बदला जा सकता है document.querySelector( 'select' ) ।

तीसरा तर्क सबसे दिलचस्प है, हम क्रम में विश्लेषण करेंगे।

 on: 'change' 

प्रश्न का उत्तर दें: "तत्व पर क्या घटना होनी चाहिए ताकि हम तत्व से मूल्य लेते हैं और इसे संबंधित संपत्ति को सौंपते हैं?"

 getValue: function() { return this.value; } 

प्रश्न का उत्तर दें: "किसी तत्व का मान कैसे निकालें?", मान लौटाते हुए।

 setValue: function( v ) { this.value = v; } 

प्रश्न का उत्तर दें: "हम एक तत्व के लिए मूल्य कैसे निर्धारित करते हैं?", v कहाँ मूल्य है (इस मामले में, 2 )।

डॉक से लिंक करें: finom.imtqy.com/matreshka/docs/Matreshka.html#bindification

आइए कार्य को जटिल करते हैं। मान लें कि हमारे पास jQuery UI से एक स्लाइडर है: api.jqueryui.com/slider और हमें इसे अपने डेटा से बांधने का कार्य था। हम प्रलेखन को देखते हैं और "slide" घटना को देखते हैं, जो स्लाइडर को घसीटा जाने पर आग लगती है।

पहले, बंधन से पहले, एक स्लाइडर घोषित करें:

 <div class="slider"></div> 

 $( ".slider" ).slider({ min: 0, max: 100 }); 

दूसरी बात, हम मातृशोका का उदाहरण देते हैं:

 var mk = new Matreshka(); 

तब हम बंधन कहते हैं:

 mk.bindNode( 'x', '.slider', { on: 'slide', // ,       getValue: function() { return $( this ).slider( 'option', 'value' ); //      (.  jQuery ui.slider)? }, setValue: function( v ) { $( this ).slider( 'option', 'value', v ); //      (.  jQuery ui.slider)? } }); 

अब जब हम निम्नलिखित कोड कहते हैं ...

 mk.x = 44; 

... स्लाइडर की स्थिति बदल जाएगी।

और इसके विपरीत, जब हम स्लाइडर हैंडल को खींचते हैं, तो हमारा mk.x बदल जाएगा।

UPD : संस्करण 0.2 से शुरू, तीसरे तर्क में एक नई कुंजी 'initialize' , जो आपको किसी तत्व को बाँधने से पहले आरंभीकृत करने की अनुमति देता है। 0.2 पर लेख देखें । कोड अब इस तरह दिखता है:

 mk.bindNode( 'x', '.slider', { initialize: function() { $( this ).slider({ min: 0, max: 100 }); }, on: 'slide', getValue: function() { return $( this ).slider( 'option', 'value' ); }, setValue: function( v ) { $( this ).slider( 'option', 'value', v ); } }); 

मान प्रदर्शित करने वाले HTML तत्व को जोड़कर कार्य को थोड़ा जटिल बनाते हैं:

 <div class="output">Value is <span class="x"></span></div> 

और इसे 'x' से बांधें:

 mk.bindNode( 'x', '.output .x', { setValue: function( v ) { this.innerHTML = v; } }); 

जैसा कि आप देख सकते हैं, तत्व के बाध्यकारी विकल्पों में "on" संपत्ति और "getValue" विधि का अभाव है। इसका मतलब है कि हम ".output .x" तत्व से मान नहीं ".output .x" , लेकिन केवल इसे सेट करें।

हम कई तत्वों को एक संपत्ति में बांध सकते हैं। रूपांतरण भी सत्य है: हम कई गुणों को एक तत्व से जोड़ सकते हैं। बस याद रखें कि "कई से कई" नियम के अनुसार मैट्रीशॉका तत्वों को बांधने में सक्षम है।

परिणाम: jsbin.com/bulobuhu/7/edit (कंसोल टैब खोलें और x बदलने का प्रयास करें, उदाहरण के लिए, mk.x = 42; लिखें mk.x = 42; )

महान, हमने दो तत्वों को बाध्य किया, लेकिन निरर्थक कोड का एक गुच्छा मिला (मेरी राय में)। क्या होगा अगर हमारे पास बहुत सारे स्लाइडर हैं? हर बार जब मैं लिखता हूँ ...

 mk.bindNode( property, element, { on: 'slide', getValue: function() { return $( this ).slider( 'option', 'value' ); }, setValue: function( v ) { $( this ).slider( 'option', 'value', v ); } }); 

... बहुत सुंदर नहीं है।

क्या करें? तत्वों की सामान्य विशेषताओं को याद रखना आवश्यक है जो तत्वों को बांधते समय जांच की जाएगी। ऐसा करना सुविधाजनक होगा:

 mk.bindNode( 'x', '.slider' ); 

यह कैसे करना है? Matryoshka के पास एक स्थिर संपत्ति MK.elementProcessors MK.defaultBinders (बदला हुआ) है, जो कार्यों की एक सरणी है। फ़ंक्शंस तर्क el लेते हैं, जो जाँच की जा रही तत्व है, और इसमें यह शर्त शामिल है: यदि तत्व कुछ नियम से मेल खाता है, तो हम विकल्प ऑब्जेक्ट को .bindNode हैं, जो ऊपर .bindNode उदाहरण में तीसरा तर्क है।

किसी भी स्लाइडर के लिए एक नियम है: सभी के पास एक ui-slider वर्ग है। इसलिए, हमारी स्थिति फ़ंक्शन इस तरह दिखाई देगी ( UPD : 'initialize' प्रॉपर्टी के बारे में मत भूलना):

 function( el ) { if( $( el ).hasClass( 'ui-slider' ) ) { return { on: 'slide', getValue: function() { return $( this ).slider( 'option', 'value' ); }, setValue: function( v ) { $( this ).slider( 'option', 'value', v ); } }; } } 

एक उदाहरण, मुझे आशा है, काफी सरल है: हम जांचते हैं कि क्या तत्व स्लाइडर है और यदि हां, तो विकल्प वापस करें।

हम MK.defaultBinders सरणी में फ़ंक्शन सम्मिलित करते हैं:

 MK.elementProcessors.push( function( el ) { if( $( el ).hasClass( 'ui-slider' ) ) { return { on: 'slide', getValue: function() { return $( this ).slider( 'option', 'value' ); }, setValue: function( v ) { $( this ).slider( 'option', 'value', v ); } }; } }); 

Doc लिंक: finom.imtqy.com/matreshka/docs/Matreshka.html#defaultBinder

उसके बाद, .bindNode फ़ंक्शन में कम से कम सौ स्लाइडर्स होने से, हम केवल संपत्ति और बाध्य होने वाले तत्व को परिभाषित करते हैं:

 <div class="slider1"></div> <div class="slider2"></div> 

 $( ".slider1, .slider2" ).slider({ min: 0, max: 100 }); var mk = new Matreshka(); mk.bindNode({ x1: '.slider1', x2: '.slider2' }); 

परिणाम: jsbin.com/celarefu/2/edit

नोटिस कैसे उदाहरण में आउटपुट संदर्भ से बंधा है:

 mk.bindNode({ x1: '.output .x1', x2: '.output .x2' }, MK.binders.innerHTML() ); 

MK.binders एक स्थिर संपत्ति है जिसमें कस्टम बाइंडिंग फ़ंक्शंस हैं जो ऊपर वर्णित ऑब्जेक्ट को वापस करना चाहिए (गुणों के साथ on, setValue, getValue )। एक वस्तु को अपने स्वयं के बाइंडरों के साथ विस्तारित किया जा सकता है।
MK.binders.innerHTML - एक फ़ंक्शन जो नियमित HTML तत्व के लिए बाध्यकारी विकल्प देता है, अपने MK.binders.innerHTML HTML को बदल देता है।

Doc: finom.imtqy.com/matreshka/docs/Matreshka.binders.html#innerHTML

एक ऐसा नियम क्यों नहीं बनाया गया है जो किसी भी तत्व के लिए .innerHTML बदलता है जो किसी अन्य नियम से मेल नहीं खाता है? एक शब्द में: सुविधा। कभी-कभी ऐसे तत्वों को बांधने की आवश्यकता होती है जिनके लिए एक मूल्य की आवश्यकता नहीं होती है, लेकिन अगले लेख में उस पर और अधिक।

डिफ़ॉल्ट रूप से, MK.defaultBinders में एक फ़ंक्शन होता है जो तुच्छ नियमों के अनुपालन के लिए एक तत्व की जांच करता है, जिससे सरल तत्वों ( select , textarea , input[type="text"] , input[type="checkbox"] , input[type="radio"] )।
उदाहरण के लिए

 <select class="my-select"> ... </select> 

इस तरह एक कोड का उपयोग करना:

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

... घोंसले के शिकार गुड़िया खुद ही जान जाएगी कि, कैसे प्राप्त किया जाए, कैसे एक तत्व का मूल्य निर्धारित किया जाए, क्योंकि सबसे आम select ।

उदाहरण: jsbin.com/tepiyoso/2/edit (क्लिक करें, इनपुट के पाठ को बदलें और स्रोत पर एक नज़र डालें)

घटनाओं

Matryoshka में एक घटना जनरेटर होता है जो Backbone.js के समान काम करता है। प्रारंभ में, फ्रेमवर्क आपकी अपनी आवश्यकताओं के लिए लिखा गया था, इसलिए घटनाओं के लिए जिम्मेदार कोड का हिस्सा सिर्फ इस ढांचे से उधार लिया गया था। लेकिन इन विधियों का कोड बहुत स्थिर निकला, इसलिए इसे छोड़ने का निर्णय लिया गया।

 var mk = new Matreshka(); mk.on( 'someevent', function( a, b ) { alert( a + ', ' + b ); }); mk.trigger( 'Hello', 'World!' ); // alerts "Hello, World!" 

क्या वह परिचित है?

प्रलेखन लिंक: finom.imtqy.com/matreshka/docs/Matreshka.html#on

पोस्ट की शुरुआत में वर्णित स्वादिष्ट विशेषताओं में से एक संपत्ति परिवर्तन की घटना को ट्रैक कर रहा है:

 var mk = new Matreshka(); mk.on( 'change:x', function() { alert( 'New x value is ' + this.x ); }); mk.x = 5; //alerts "New x value is 5" 

हम किसी संपत्ति को किसी तत्व से जोड़ सकते हैं और उसके मूल्य में परिवर्तन को ट्रैक कर सकते हैं:

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

 var mk = new Matreshka(); mk.bindNode( 'x', '.my-select' ); mk.on( 'change:x', function() { alert( 'x is now ' + this.x ); }); 

दृष्टिकोणों में बहुत बड़ा अंतर है: हम किसी तत्व के DOM में परिवर्तन ट्रैक करते थे, और अब हम डेटा में परिवर्तन ट्रैक करते हैं, क्योंकि डेटा हमारे लिए विशेष रूप से महत्वपूर्ण है, तत्वों की स्थिति अपने आप बदल जाती है।
इसे स्वयं आज़माएँ: jsbin.com/dadakeba/1/edit

.set विधि का उपयोग करना

.set विधि केवल दी गई संपत्ति का मान प्रदान करती है। इसका उपयोग दो उद्देश्यों के लिए किया जाता है:
1. change:*key* लिए पासिंग गुण change:*key* ईवेंट ऑब्जेक्ट (उदाहरण के लिए, "silent" फ्लैग)। UPD: अधिक झंडे हैं।

 mk.on( 'change:x', function( evtOpts ) { alert( evtOpts.myFlag ); }); mk.set( 'x', 5, { myFlag: 'blah' } ); //      "change:x" mk.set( 'x', 42, { silent: true } ); //        

ध्यान दें कि भले ही silent: true झंडा पास हो, फिर भी बाध्य तत्व का मूल्य बदल जाएगा।
2. कोड संक्षिप्त नाम। आप .set विधि के गुणों के साथ कोई ऑब्जेक्ट पास कर सकते हैं।

 mk.set( { x1: 1, x2: 2 } ); mk.set( { x1: 3, x2: 4 }, { silent: true } ); 

कहाँ से लाऊँ?

Github पर रिपॉजिटरी: github.com/finom/matreshka (फ्रेमवर्क का कोड build/ फ़ोल्डर में है)
Matryoshka को jQuery की आवश्यकता होती है, हालांकि इस पर निर्भरता को हटाने की योजना है। संस्करण 0.1 से शुरू, jQuery की आवश्यकता नहीं है।

निष्कर्ष में

मैंने आपको उन मुख्य चिप्स से परिचित कराया जो कि मैत्रियोश्का वहन करती हैं। आप प्रलेखन में अन्य कार्य पा सकते हैं। वहां आपको अन्य समान रूप से महत्वपूर्ण तरीके मिलेंगे:
.off निर्दिष्ट घटनाओं को अक्षम करना
.remove हटाने की संपत्ति
.define हैंगिंग कस्टम .define
.defineGetter एक तत्व पर एक .defineGetter लटका
.bound , .boundAll , एक तत्व या तत्वों का संग्रह लौटाता है, क्रमशः, एक संपत्ति से बंधा हुआ
.unbindElement एक संपत्ति और एक तत्व के बीच की कड़ी को तोड़ रहा है
... और अन्य।

संस्करण 0.0.X क्यों?

सिर्फ इसलिए कि परियोजना, इस तथ्य के बावजूद कि इसे एक अलग नाम के तहत एक वर्ष से अधिक समय के लिए विकसित किया गया है, पहली बार अब (केवल इस लेख में) प्रस्तुत किया गया है।

आगे क्या है?

अगले लेख में मैं आपको बताऊंगा कि कैसे मैत्रियोश्का का उपयोग करके अपना पहला आवेदन लिखना है, न केवल सुविधाजनक कार्यों के एक सेट के रूप में, बल्कि कक्षाओं पर आधारित एक पूर्ण रूपरेखा के रूप में, और आपको बताता है कि कक्षाएं वास्तव में क्यों हैं (मैं इस मुद्दे के बारे में स्थानीय अभद्रता से परिचित हूं)।
अगला, हम MK.Array और MK.Object बारे में बात करेंगे जो डेटा के लिए जिम्मेदार हैं।
उसके बाद, यदि पाठक रुचि रखता है, तो मैं आपको बताऊंगा कि जादू कैसे काम करता है, और मैं IE8 में Object.defineProperty समर्थन को कैसे लागू करने में कामयाब रहा।

उन सभी के लिए बहुत धन्यवाद जो लेख को अंत तक पढ़ने में सक्षम थे। सौभाग्य और सफल कोडिंग।