jQuery यूआई प्लगइन्स के लिए एक बुनियादी ढांचे के रूप में

परिचय

jQuery UI सबसे अच्छी तरह से पूर्वनिर्धारित विजेट के एक सेट के रूप में जाना जाता है। उनका मुख्य लाभ, मेरी राय में, एक सुसंगत एपीआई है: प्रत्येक विजेट को उसी तरह से प्रबंधित किया जाता है। उनका दूसरा लाभ यह है कि वे अपने राज्य को संग्रहीत करते हैं: यदि आप तत्व पर विजेट को फिर से लटकाते हैं, तो परिणाम विजेट का एक मौजूदा उदाहरण होगा।
लेकिन jQuery यूआई केवल विंडोज़ और टैब का सेट नहीं है (हर किसी के पसंदीदा का मतलब नहीं है)। यह अपने स्वयं के विजेट बनाने के लिए एक संपूर्ण बुनियादी ढांचा है: एक सुविधाजनक सुसंगत एपीआई के साथ, राज्य भंडारण के साथ और विरासत की संभावना के साथ। अजीब तरह से पर्याप्त है, यह कई लोगों के लिए खबर है, जिसके परिणामस्वरूप यह लेख दिखाई दिया - जैसे कि यह मेरे लिए कुछ महीने पहले खबर थी।

गीतात्मक विषयांतर

समय और स्थान को बर्बाद न करने के लिए, कोड में नीचे हर जगह यह समझा जाता है कि खिड़की। $ == window.jQuery, अपरिभाषित भ्रष्ट नहीं किया गया है, और हम jQuery, केवल jQuery और कुछ भी नहीं jQuery कनेक्ट करते हैं, और सभी विज्ञापन कुछ इस तरह से लिपटे होते हैं इसमें से:

( function ($) {
//
})(jQuery)
* This source code was highlighted with Source Code Highlighter .

यह भी समझा जाता है कि पाठक jQuery से काफी परिचित है और कम से कम jQuery UI से प्रलेखन पढ़ें।

जादू $ .भा त

सभी जादू $.widget विधि में है। यह 2 (या 3 - वंशानुक्रम के मामले में) पैरामीटर लेता है। आधिकारिक तौर पर, इस पद्धति को "विजेट फैक्टरी" कहा जाता है।
पहला पैरामीटर एक स्ट्रिंग है, इसमें नाम और विजेट नाम शामिल हैं, जो एक डॉट द्वारा अलग किए गए हैं। उदाहरण के लिए, "my.myWidget" । नाम स्थान की आवश्यकता है; नेस्टिंग समर्थित नहीं है। दूसरा पैरामीटर ऑब्जेक्ट शाब्दिक है, जो वास्तव में, हमारे विजेट का वर्णन करता है:

$.widget( "my.myWidget" , {
options: {
greetings: "Hello"
},
_create: function () {
this .element.html( this .options.greetings);
}
})
* This source code was highlighted with Source Code Highlighter .

नाम के तहत फ़ील्ड में पड़ा फ़ंक्शन _create एक कंस्ट्रक्टर के रूप में कार्य करता है और विजेट उदाहरण बनाते समय कहा जाएगा; इस उदाहरण से यह संकेत मिलता है।
this.element है। तत्व वह विजेट है जिस पर लटका दिया गया है। यह हमेशा एक एकल आइटम है, न कि एक संग्रह (जैसा कि नियमित प्लगइन्स के साथ मामला है); यदि आप एक विजेट को एक jQuery ऑब्जेक्ट से जोड़ते हैं जिसमें एक से अधिक तत्व होते हैं, तो कई उदाहरणों के रूप में कई तत्व बनाए जाएंगे।
options फ़ील्ड विजेट की डिफ़ॉल्ट सेटिंग्स संग्रहीत करता है। यह फ़ील्ड विरासत में मिली है, इसलिए यह हमेशा विजेट में रहेगा, भले ही आप इसे स्पष्ट रूप से घोषित न करें।
यदि आप विजेट को कॉल करते समय किसी ऑब्जेक्ट को पास करते हैं, तो पारित ऑब्जेक्ट _create कॉल करने से पहले डिफ़ॉल्ट सेटिंग्स के साथ "दाग" ( $.merge पद्धति का उपयोग करके) _create ।
सेटिंग्स के साथ काम करने के लिए setOption विधि जिम्मेदार है:

$.widget( "my.myWidget" , {
options: {
greetings: "Hello"
},
_create: function () {
this ._render();
},
_render: function () {
this .element.html( this .options.greetings);
},
setOption: function (key, value) {
if (value != undefined) {
this .options[key] = value;
this ._render();
return this ;
}
else {
return this .options[key];
}
}
})
* This source code was highlighted with Source Code Highlighter .

इसका उपयोग उसी तरह किया जाता है जैसे किसी मानक विजेट में:

var mw = $( '.mywidget' ).myWidget({greeting: 'Hi there!' })
console.log(mw.myWidget( 'option' , 'greeting' )); // 'Hi there!'
mw.myWidget( 'option' , 'greeting' , 'O HAI CAN I HAZ CHEEZBURGER?' );
* This source code was highlighted with Source Code Highlighter .

निजी और सार्वजनिक तरीके

विजेट विधि को उसी तरह से एक्सेस किया जा सकता है, जैसा कि हम सेटिंग्स को संदर्भित करते हैं:

$.widget( "my.myWidget" , {
options: {
greetings: "Hello"
},
_create: function() {
this ._render();
},
_render: function() {
this .element.html( this .options.greetings);
},
sayHello: function(saying) {
alert(saying);
},
_setOption: function(key, value ) {
if (arguments.length == 1) {
this .options[key] = value ;
this ._render();
return this ;
}
else {
return this .options[key];
}
}
})
// …
mw.myWidget( "sayHello" , 42);
* This source code was highlighted with Source Code Highlighter .

लेकिन इसके लिए, यह विधि सार्वजनिक होनी चाहिए। UI प्लगइन्स के प्रतिमान में एक विधि को सार्वजनिक कैसे करें? यह सरल है: विजेट इंजन उन सार्वजनिक तरीकों पर विचार करता है जिनके नाम अंडरस्कोर से शुरू नहीं होते हैं। अन्य सभी विधियां निजी हैं। विजेट फ़ील्ड जो फ़ंक्शंस नहीं हैं वे हमेशा निजी होते हैं।
यह, निश्चित रूप से, सार्वजनिक और निजी तरीकों के पूर्ण अर्थों में नहीं है, लेकिन उनका अनुकरण, हालांकि, अंतर का उपयोग करने के लिए पर्याप्त है।

कॉलबैक

वास्तव में, ये विजेट के अंदर उपयोगकर्ता की घटनाओं के लिए बाध्यकारी के लिए सिर्फ शॉर्टकट हैं। उन्हें विजेट्स में उसी तरह से ट्रांसफर किया जाता है जैसे सेटिंग्स में।

$.widget( "my.myWidget" , {
options: {
greetings: "Hello"
},
_create: function () {
this ._render();
},
_render: function () {
this .element.html( this .options.greetings);
this ._trigger( "onAfterRender" , null , {theAnswer: 42})
}
})
// …
var mw = $( ".mywidget" ).myWidget(
{
greeting: "Hi there!" ,
onAfterRender: function (evt, data) {
console.log(data.theAnswer)
}
})

* This source code was highlighted with Source Code Highlighter .

यह अच्छे पुराने के बराबर है।

mw.bind( 'onAfterRender.myWidget' , function (evt, data) {console.log(data.theAnswer)})
* This source code was highlighted with Source Code Highlighter .

विनाशकर्ता

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

$.Widget.prototype.destroy.call( this );
* This source code was highlighted with Source Code Highlighter .

विरासत

सबसे स्वादिष्ट चीजों में से एक, हालांकि इस पर व्यावहारिक रूप से कोई जानकारी नहीं है।
यदि दूसरा तर्क कुछ अन्य विजेट A (इस मामले में हमारा विजेट तीसरा तर्क है) के लिए पारित किया जाता है, तो नया विजेट B इसका वंशज होगा।
मान लीजिए कि हमारे एप्लिकेशन में बहुत सारे डायलॉग बॉक्स हैं, और सभी मोडल हैं। हालांकि, उन्हें Esc द्वारा बंद नहीं किया जाना चाहिए। मुझे हर बार लिखने का मन नहीं करता:

$( '.dialog' ).dialog({
modal: true ,
closeOnEscape: false ,
// … ,
// …
})
* This source code was highlighted with Source Code Highlighter .

हम मानक डायलॉग से इनहेरिट कर सकते हैं और डिफ़ॉल्ट सेटिंग्स को फिर से परिभाषित कर सकते हैं:

$.widget( "my.mydlg" , $.ui.dialog, {
options: {
modal: true ,
closeOnEscape: false ,
},
_create: function() {
$.ui.dialog.prototype._create.call( this );
}
})
* This source code was highlighted with Source Code Highlighter .

अब हम .dialog को पूरे कोड में .mydlg के साथ बदलते हैं और दोहराव को कम करने का आनंद लेते हैं। दुर्भाग्य से, आपको पूर्वजों को स्पष्ट रूप से निर्दिष्ट करना होगा और मैन्युअल रूप से इसके निर्माता को कॉल करना होगा।

निष्कर्ष

यह मुझे लगता है कि यूआई विगेट्स कोड को संशोधित करने का एक अच्छा तरीका है। छोटे और मध्यम आकार के प्रोजेक्ट्स में, वे स्वयं पर्याप्त एप्लिकेशन इन्फ्रास्ट्रक्चर प्रदान कर सकते हैं।
इस मामले में, आपको संपूर्ण, काफी वजनदार, jQueryUI - पर्याप्त कोर घटक को खींचने की आवश्यकता नहीं है।
इस विजेट इंजन को रेखांकित करने वाले पैटर्न को ब्रिज कहा जाता है (हालांकि, निश्चित रूप से, $.widget विधि एक कारखाना है)। एक फ़ाइल के साथ $ .widget विधि समाप्त करने के बाद, आप विगेट्स प्राप्त कर सकते हैं जो स्वयं मार्कअप से अपनी सेटिंग्स को पढ़ते हैं, अपने लिए महत्वपूर्ण तत्व ढूंढते हैं, और स्वचालित रूप से एक पदानुक्रमित संरचना में व्यवस्थित होते हैं। लेकिन यह स्पष्ट रूप से एक अलग लेख के लिए एक विषय है।