👩🏿‍🏭 🧕🏻 👩🏿‍🎓 JQuery यूआई विजेट फैक्टरी 🐳 ⚫️ 🎵

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

यह क्या है

विजेट फैक्टरी एक jQuery वैश्विक वस्तु विधि है - jQuery.widget - 2 या 3 तर्कों को स्वीकार करना।

jQuery.widget( 'namespace.widgetname', namespace.superwidget, //   -    //       {...} //  , //      );

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

 jQuery.widget("demo.multi", {...})

jQuery.demo.multi और jQuery.demo.multi.prototype ।

दूसरा (वैकल्पिक) तर्क, इससे विरासत के लिए एक प्रोटोटाइप। उदाहरण के लिए, jQuery UI में एक "माउस" प्लगइन है, जिस पर बातचीत के लिए [माउस के साथ] सभी प्लगइन्स आधारित हैं। इसे प्राप्त करने के लिए, draggable , droppable इत्यादि को माउस प्लगइन से विरासत में मिला है:

 jQuery.widget( "ui.draggable", $.ui.mouse, {...} );

यदि आप इस तर्क को निर्दिष्ट नहीं करते हैं, तो विजेट सीधे "मुख्य विजेट" jQuery.Widget से विरासत में मिला है (छोटे w के साथ jQuery.Widget और बड़े W के साथ jQuery.Widget बीच अंतर पर ध्यान दें)।

अंतिम तर्क ऑब्जेक्ट शाब्दिक है जिसे विजेट के प्रत्येक उदाहरण के लिए प्रोटोटाइप के रूप में उपयोग किया जाएगा। कारखाना एक प्रोटोटाइप श्रृंखला बनाता है, जिसमें विजेट के प्रोटोटाइप को सभी विजेट्स से jQuery.Widget जाता है, जहां से इसे मूल jQuery.Widget तक विरासत में मिला है।

जब jQuery.widget को jQuery के प्रोटोटाइप (jQuery.fn) में बुलाया जाता है, तो एक नया तरीका बनाया जाता है जो विजेट के नाम से मेल खाता है, हमारे मामले में यह jQuery.fn.multi होगा। .fn विधि jQuery वस्तु और विजेट उदाहरणों में प्राप्त DOM तत्वों के बीच इंटरफेस के रूप में कार्य करता है। JQuery ऑब्जेक्ट में प्रत्येक तत्व के लिए एक विजेट उदाहरण बनाया गया है।

लाभ

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

एक नाम स्थान और प्रोटोटाइप बनाना
इसके अलावा, प्रश्नों और फ़िल्टरिंग के लिए, एक छद्म चयनकर्ता नाम स्थान और नाम के आधार पर उत्पन्न होता है, उदाहरण के लिए $(":demo-multi") ।
प्रोटोटाइप और jQuery.fn बीच संबंध
jQuery.widget.bridge माध्यम से कार्यान्वित किया गया
डिफ़ॉल्ट सेटिंग्स के साथ उपयोगकर्ता सेटिंग्स मर्ज करें
डिफ़ॉल्ट सेटिंग्स को बदला जा सकता है (अनुवादक का नोट - जाहिर है, सभी विजेट उदाहरणों के लिए डिफ़ॉल्ट सेटिंग्स का मतलब है - आप किसी विशिष्ट पृष्ठ के लिए डिफ़ॉल्ट रूप में अपने विजेट के प्रोटोटाइप में डिफ़ॉल्ट सेटिंग्स बदल सकते हैं, उदाहरण के लिए)।
एक प्लगइन उदाहरण $("#something").data("pluginname") माध्यम से उपलब्ध है $("#something").data("pluginname")
DOM तत्व (ट्रांसलेटर के नोट - जिसका अर्थ है एक विशिष्ट DOM तत्व का लिंक, जिस पर प्लग-इन this.element ) के लिए एक jQuery ऑब्जेक्ट का संदर्भ इस। की संपत्ति के रूप में उपलब्ध है, इसलिए प्लग-इन और तत्व के साथ सहभागिता करना बहुत आसान हो जाता है।
विजेट तरीके jQuery के प्रोटोटाइप विधि तर्कों - $("#something").multi("refresh") माध्यम से उपलब्ध हैं $("#something").multi("refresh") - या सीधे उदाहरण के माध्यम से - $("#something").data("multi").refresh() ।
एक ही आइटम पर कई उदाहरणों को रोकता है
कॉलबैक तंत्र उपयोगकर्ता को सदस्यता दे सकता है: this._trigger("clear")
- सदस्यता लें:
```
 $( "#something" ).multi({ clear: function( event ) {} }); 
```
- या अगर .bind माध्यम से:
```
 $( "#something" ).bind( "multiclear", function( event ) {} ); 
```
  (अनुवादक का नोट - प्लगइन और घटना के नाम से अटकी घटना का नाम नोट करें)
एक तंत्र जो प्रारंभ के बाद प्लग-इन विकल्पों को बदलने की सुविधा देता है
बस इंस्टेंस को सक्षम / अक्षम करें या नष्ट कर दें और अपनी मूल स्थिति में लौटें। (अनुवादक का नोट - आगे देखें निजी तरीके _destroy , आदि)

अपना स्वयं का प्रोटोटाइप बनाएँ

बुनियादी ढांचे

आप के रूप में एक प्रोटोटाइप के रूप में पारित ऑब्जेक्ट शाब्दिक रूप से व्यवस्थित किया जा सकता है, लेकिन इसमें options (अनुवादक के नोट - डिफ़ॉल्ट विकल्प), कॉलबैक _create , _setOption , और destroy करना शामिल होना चाहिए।

उदाहरण

 (function( $ ) { $.widget( "demo.multi", { //          options: { clear: null }, //   _create: function() { }, //   _setOption       _setOption: function( key, value ) { switch( key ) { case "clear": //   break; } //  jQuery UI 1.8,     _setOption    $.Widget.prototype._setOption.apply( this, arguments ); //  jQuery UI 1.9  ,     _super this._super( "_setOption", key, value ); }, //   destroy      DOM,     destroy: function() { //  jQuery UI 1.8    destroy    $.Widget.prototype.destroy.call( this ); //  jQuery UI 1.9        _destroy        } }); }( jQuery ) );

तरीकों में इनकैप्सुलेशन

आपकी वस्तु में विभिन्न विशिष्ट परिचालनों को संसाधित करने के तरीके, उदाहरण के लिए, नए तत्वों को बनाने या सम्मिलित करने या घटनाओं को संसाधित करने की विधियाँ होंगी। प्रत्येक ऑपरेशन के लिए पृथक तरीकों का उपयोग करना बुद्धिमान होगा, बजाय _create पद्धति में सब कुछ का एक गुच्छा _create करने के लिए। यह परिवर्तनों के मामले में कोड की नकल नहीं करेगा।

उदाहरण के लिए, एक काल्पनिक विजेट में <select multiple> , कोई व्यक्ति <li> और <ul> बनाने के लिए बच्चे <option> ऊपर जाना चाहेगा। इसे _create पद्धति के माध्यम से लागू किया जा सकता है:

 _create: function() { var self = this; this.list = $( "<ul>" ).insertAfter( this.element ); this.element.hide().find( "option" ).each(function( i, el ) { var $el = $( el ), text = $( el ).text(), item = $( "<li class='multi-option-item'>" + text + "</li>" ); item.appendTo( self.list ).click(function(){ console.log( $el.val() ); }); }); }

दुर्भाग्यवश, यदि आप कोड को _create इस _create छोड़ देते हैं, तो यह मूल <option> तत्व और हमारे द्वारा बनाई जाने वाली सूची आइटम, या <option> की स्थिति में जोड़े गए या हटाए गए तत्वों की स्थिति के बीच के लिंक को परिभाषित करने में कठिनाई पैदा करेगा। विजेट को इनिशियलाइज़ करने के बाद। इसके बजाय, हम तत्व के साथ काम करने के लिए refresh विधि को जिम्मेदार _create और _create विधि से _create । हम सूची के तत्वों पर क्लिकों के प्रसंस्करण को भी अलग से निकालेंगे, और हम एक नया आइटम बनाने के बाद, नए हैंडलर को संलग्न नहीं करने के लिए, घटना के प्रतिनिधिमंडल का उपयोग करेंगे।

उदाहरण

 _create: function() { this.list = $( "<ul>" ) .insertAfter( this.element ) .delegate( "li.multi-option-item", "click", $.proxy( this._itemClick, this ) ); this.element.hide(); this.refresh(); }, refresh: function() { //     this.items = this.items || $(); //  ,        this.element.find( "option:not(.demo-multi-option)" ).each( $.proxy(function( i, el ) { //  ,         var $el = $( el ).addClass( "demo-multi-option" ), text = $el.text(), //    item = $( "<li class='multi-option-item'>" + text + "</li>" ) .data( "option.multi", el ) .appendTo( this.list ); //    this.items = this.items.add( item ); },this)); //      ,          this.items = this.items.filter( $.proxy(function( i, item ) { var isInOriginal = $.contains( this.element[0], $.data( item, "option.multi" ) ); if ( !isInOriginal ) { $( item ).remove(); } return isInOriginal; }, this )); }, _itemClick: function( event ) { console.log( $( event.target ).val() ); }

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

जैसा कि आपने शायद ध्यान दिया, हमने शुरुआत में कुछ तरीकों को अंडरस्कोर के साथ लिखा, जबकि कुछ ने उनके बिना। एक उपसर्ग के साथ तरीकों को "निजी" माना जाता है। कारखाना $.fn माध्यम से उन्हें कॉल करने के सभी प्रयासों को अवरुद्ध करता है

 $( "#something" ).multi( "_create" )

उपरोक्त कोड एक अपवाद फेंक देगा। लेकिन, चूंकि वे प्रोटोटाइप विजेट में मौजूद हैं, इसलिए उन्हें केवल समझौते से निजी माना जाता है। जब .data() माध्यम से बुलाया जाता है .data() तो आप इनमें से किसी भी तरीके को सीधे कॉल कर सकते हैं:

 $( "#something" ).data( "multi" )._create()

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

गुण

this.element

प्लगइन उदाहरण द्वारा उपयोग किया जाने वाला तत्व। उदाहरण के लिए:

 $( "#foo" ).myWidget()

इस स्थिति में, यह। आईडी आईडी आईडी से युक्त एक jQuery ऑब्जेक्ट होगा। कई तत्वों के लिए जिनके लिए .myWidget() कहा जाता है, प्रत्येक तत्व के लिए प्लगइन का एक अलग उदाहरण कहा जाएगा। दूसरे शब्दों में, इस। में हमेशा केवल एक तत्व होगा।

this.options

प्लगइन को कॉन्फ़िगर करने के लिए उपयोग किए जाने वाले विकल्प। एक उदाहरण बनाते समय, उपयोगकर्ता द्वारा पास किए गए कोई भी विकल्प स्वचालित रूप से $.demo.multi.prototype.options में निर्दिष्ट लोगों के साथ जोड़ $.demo.multi.prototype.options । कस्टम विकल्प डिफ़ॉल्ट विकल्पों को अधिलेखित करते हैं।

this.namespace

प्लगइन का नाम स्थान, हमारे मामले में, "डेमो"। आमतौर पर प्लगइन्स में उपयोग नहीं किया जाता है।

this.name

प्लगइन का नाम, हमारे मामले में "बहु"। इस से थोड़ा अधिक उपयोगी है। this.namespace , लेकिन ज्यादातर मामलों में भी इसका उपयोग नहीं किया जाता है।

this.widgetEventPrefix

प्रॉपर्टी को प्लगइन इवेंट्स का नाम दिया गया है। उदाहरण के लिए, dialog में एक close कॉलबैक होता है; जब इसे निष्पादित किया जाता है, तो dialogclose घटना पॉप dialogclose । ईवेंट नाम में ईवेंट प्रीफ़िक्स और कॉलबैक नाम होते हैं। डिफ़ॉल्ट रूप से, widgetEventPrefix का मान विजेट के नाम के समान है, लेकिन इसे ओवरराइट किया जा सकता है। उदाहरण के लिए, यदि कोई उपयोगकर्ता किसी तत्व को खींचना शुरू कर देता है, तो हम नहीं चाहते कि draggablestart इवेंट पॉप अप हो, हम चाहते हैं कि इसे dragstart कहा जाए, इसके लिए हम इवेंट को "ड्रैग" के बराबर उपसर्ग बनाते हैं। यदि कॉलबैक का नाम घटना के उपसर्ग से मेल खाता है, तो घटना बिना उपसर्ग के होगी। इससे dragdrag जैसी घटनाओं से बचा जा dragdrag ।

this.widgetBaseClass

विजेट तत्व वर्ग नाम बनाने के लिए उपयोगी है। उदाहरण के लिए, यदि आप किसी तत्व को सक्रिय के रूप में चिह्नित करना चाहते हैं

 element.addClass( this.widgetBaseClass + "-active" )

अधिकांश प्लगइन्स के लिए, यह आवश्यक नहीं है क्योंकि कुछ लिखना आसान है। .addClass( "demo-multi-active" ) । उपरोक्त उदाहरण कारखाने के लिए अधिक प्रासंगिक है और अमूर्त प्लगइन्स जैसे $.ui.mouse ।

तरीकों

(अनुवादक का नोट - यह सबसे अच्छा है, निश्चित रूप से, सीधे दस्तावेज को पढ़ने के लिए)

_create

एक विधि जिसमें आपके विजेट से संबंधित सब कुछ कॉन्फ़िगर किया गया है - तत्वों का निर्माण, फांसी की घटनाओं आदि। उदाहरण बनाने के तुरंत बाद विधि को एक बार कहा जाता है।

_init

विधि जिसे हर बार विजेट कहा जाता है, तर्क की संख्या की परवाह किए बिना पारित किया जाता है। पहली कॉल के दौरान _init को _create बाद कहा जाता है। विजेट बनने के बाद इसे किसी भी समय कॉल किया जा सकता है, इस मामले में _init का उपयोग विनाश और फिर से निर्माण के बिना, पुनः आरंभ करने के लिए किया जा सकता है।

destroy

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

option

उदाहरण बनाने के बाद विकल्प सेट करने के लिए उपयोग किया जाता है। विधि हस्ताक्षर .css() और .attr() विधियों के समान है। आप मान प्राप्त करने के लिए केवल एक नाम निर्दिष्ट कर सकते हैं, या इसे सेट करने के लिए एक मान के साथ एक नाम, या कई मान सेट करने के लिए ऑब्जेक्ट पास कर सकते हैं। विधि _setOptions कॉल _setOptions , इसलिए इसे तृतीय-पक्ष प्लगइन्स द्वारा नहीं बदला जाना चाहिए।

_setOptions

निजी विधि, का उपयोग तात्कालिकता के बाद प्राथमिकताएं निर्धारित करने के लिए किया जाता है। विधि _setOption को कॉल करती है, इसलिए इसे तृतीय-पक्ष प्लगइन्स द्वारा नहीं बदला जाना चाहिए।

_setOption

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

 _setOption: function(key, value) { if (key === 'title') { this.titleElement.text(value); } $.Widget.prototype._setOption.apply(this, arguments); }

मूल विधि _setOption कॉल करके, हम एक नया विकल्प मान सेट करते हैं। यह _setOption द्वारा नहीं किया जाना चाहिए। कभी-कभी सही व्यवहार निर्धारित करने के लिए पुराने और नए मूल्यों की तुलना करना आवश्यक होता है। आप इस मूल्य को this.options[key] तुलना कर सकते हैं, क्योंकि मूल विधि _setOption को बहुत अंत में _setOption । यदि आपको किसी चीज की तुलना करने की आवश्यकता नहीं है, तो आप विधि के आरंभ में ही माता-पिता को _setOption कर सकते हैं।

enable

हेल्पर कॉलिंग option('disabled', false) । आप इस हेल्पर कॉल को चेक करके भी पकड़ सकते हैं:

 if (key === "disabled")

आपके _setOption ।

disable

हेल्पर कॉलिंग option('disabled', true) । आप इस हेल्पर कॉल को चेक करके भी पकड़ सकते हैं:

 if (key === "disabled")

आपके _setOption में।

_trigger

इस पद्धति का उपयोग सभी कॉलबैक के लिए किया जाना चाहिए। कॉलबैक निष्पादित होने का नाम केवल आवश्यक पैरामीटर है। सभी कॉलबैक भी एक घटना को ट्रिगर करते हैं (ऊपर इस का वर्णन देखें। आप उस ईवेंट का ऑब्जेक्ट भी पास कर सकते हैं जिसने कॉलबैक को ट्रिगर किया था। उदाहरण के लिए, drag इवेंट को _trigger इवेंट द्वारा ट्रिगर किया जाता है, और इसे _trigger को पास करना _trigger । तीसरा पैरामीटर, डेटा के साथ एक ऑब्जेक्ट जो कॉलबैक और ईवेंट हैंडलर को दिया जाता है। इस ऑब्जेक्ट में प्रेषित डेटा केवल वर्तमान घटना से संबंधित होना चाहिए, और प्लगइन के अन्य तरीकों से नहीं दिया जाना चाहिए।

JQuery यूआई विजेट फैक्टरी