एक jQuery प्लगइन लेखन

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

शुरुआत हो रही है

सबसे पहले, jQuery ऑब्जेक्ट के लिए एक नया प्रॉपर्टी-फंक्शन बनाएं, जहां नई प्रॉपर्टी का नाम हमारे प्लगइन का नाम होगा:

jQuery.fn.myPlugin = function() { //      }; 

लेकिन रुकिए, परिचित डॉलर आइकन कहां है जिसे हम सभी अच्छी तरह से जानते हैं? यह अभी भी यहां है, और इसलिए यह अन्य पुस्तकालयों के साथ संघर्ष नहीं करता है जो डॉलर के प्रतीक का उपयोग भी कर सकते हैं, यह अनुशंसा की जाती है कि आप jQuery ऑब्जेक्ट को तुरंत निष्पादन योग्य अभिव्यक्ति फ़ंक्शन (IIFE, तत्काल इनवॉल्ड फंक्शन एक्सप्रेशन) में लपेटें, जो jQuery ऑब्जेक्ट को "$" के साथ जोड़ता है। "ताकि रनटाइम में यह किसी अन्य लाइब्रेरी द्वारा ओवरराइड नहीं हो।

 (function( $ ) { $.fn.myPlugin = function() { //      }; })(jQuery); 

यह बेहतर है। अब, इस बंद के अंदर, हम जैसा चाहें, डॉलर के चिह्न का उपयोग कर सकते हैं।

प्रसंग

अब हमारे पास एक शेल है जिसके अंदर हम प्लगइन कोड लिखना शुरू कर सकते हैं। लेकिन इससे पहले कि हम शुरू करें, मैं संदर्भ के बारे में कुछ शब्द कहना चाहूंगा। हमारे प्लगइन के कार्य के तत्काल दायरे में, कीवर्ड "यह" उस jQuery ऑब्जेक्ट को संदर्भित करता है जिसके लिए यह प्लगइन कहा जाता था।

और यहाँ वे अक्सर गलती करते हैं, यह विश्वास करते हुए कि अन्य कॉल में जहां jQuery कॉलबैक फ़ंक्शन को स्वीकार करता है, "यह" डोम ट्री तत्व को इंगित करता है। बदले में, डेवलपर्स को इसके अलावा jQuery फ़ंक्शन में लपेटता है।

 (function( $ ){ $.fn.myPlugin = function() { //    $(this),   "this" -    jQuery //  $(this)   $($('#element')); this.fadeIn('normal', function(){ //  "this" -    DOM }); }; })( jQuery ); 

  $('#element').myPlugin(); 

मूल बातें

अब जब हम समझते हैं कि कैसे संदर्भ के साथ काम करना है, तो हम एक jQuery प्लगइन लिखेंगे जो उपयोगी काम करता है।

 (function( $ ){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max( max, $(this).height() ); }); return max; }; })( jQuery ); 

 var tallest = $('div').maxHeight(); //     div- 

यह एक साधारण प्लगइन है, जो .height () का उपयोग करते हुए, हमें पृष्ठ पर उच्चतम div की ऊंचाई देता है।

हम कॉल चेन की संभावना का समर्थन करते हैं

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

 (function( $ ){ $.fn.lockDimensions = function( type ) { return this.each(function() { var $this = $(this); if ( !type || type == 'width' ) { $this.width( $this.width() ); } if ( !type || type == 'height' ) { $this.height( $this.height() ); } }); }; })( jQuery ); 

 $('div').lockDimensions('width').css('color', 'red'); 

चूंकि प्लगइन इसे अपने तत्काल दायरे में लौटाता है, इसलिए यह कॉल श्रंखलाओं का समर्थन करता है, और jQuery संग्रह को ascss जैसे j विधियों द्वारा संसाधित किया जा सकता है।
और, यदि आपका प्लगइन किसी भी परिकलित मान को वापस नहीं करना चाहिए, तो आपको इसे हमेशा प्लगइन फ़ंक्शन के तत्काल दायरे में वापस करना चाहिए। प्लगइन को पास किए जाने वाले तर्क प्लगइन फ़ंक्शन के तत्काल दायरे में पारित किए जाते हैं। तो, पिछले उदाहरण में, स्ट्रिंग 'चौड़ाई' प्लगइन फ़ंक्शन के लिए "टाइप" पैरामीटर का मान है।

सेटिंग्स और चूक

अधिक जटिल और अनुकूलन योग्य प्लगइन्स के लिए जो बड़ी संख्या में अनुकूलन विकल्प प्रदान करते हैं, डिफ़ॉल्ट सेटिंग्स होना बेहतर होता है जो प्लगइन कहा जाता है ( $ .extend का उपयोग करके) विस्तार करते हैं।

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

 (function( $ ){ $.fn.tooltip = function( options ) { //   -,     ,    var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { //     tooltip }); }; })( jQuery ); 

 $('div').tooltip({ 'location' : 'left' }); 

इस उदाहरण में, निर्दिष्ट मापदंडों के साथ टूलटिप प्लगइन को कॉल करने के बाद, स्थान पैरामीटर ('स्थान') का मान
'वाम' के मान से अधिभूत है, जबकि पैरामीटर 'पृष्ठभूमि-रंग' का मान 'नीला' के बराबर है। और अंत में, सेटिंग्स ऑब्जेक्ट में निम्नलिखित मान शामिल हैं:

 { 'location' : 'left', 'background-color' : 'blue' } 

यह उपलब्ध सेटिंग्स में से प्रत्येक को परिभाषित किए बिना अनुकूलन करने योग्य प्लगइन्स बनाने का एक अच्छा तरीका है।

Namespace परिभाषा;

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

प्लगइन के तरीके

किसी भी परिस्थिति में, एक प्लगइन को jQuery.fn ऑब्जेक्ट के लिए एक से अधिक नामस्थान को परिभाषित नहीं करना चाहिए।

 (function( $ ){ $.fn.tooltip = function( options ) { //   }; $.fn.tooltipShow = function( ) { //  }; $.fn.tooltipHide = function( ) { //  }; $.fn.tooltipUpdate = function( content ) { // !!! }; })( jQuery ); 

इस अभ्यास को प्रोत्साहित नहीं किया जाता है, क्योंकि यह $ .fn नामस्थान को प्रदूषित करता है
इससे बचने के लिए, अपने प्लगइन के सभी तरीकों को एक ही ऑब्जेक्ट शाब्दिक में संयोजित करें और उन्हें एक स्ट्रिंग के रूप में विधि नाम से गुजारें।

 (function( $ ){ var methods = { init : function( options ) { //    }, show : function( ) { //  }, hide : function( ) { //  }, update : function( content ) { // !!! } }; $.fn.tooltip = function( method ) { //    if ( methods[method] ) { return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( '   ' + method + '    jQuery.tooltip' ); } }; })( jQuery ); //   init $('div').tooltip(); //   init $('div').tooltip({ foo : 'bar' }); 

 //   hide $('div').tooltip('hide'); 

 //   update $('div').tooltip('update', '   '); 

इस प्रकार का प्लगइन आर्किटेक्चर आपको पेरेंट क्लोजर के संबंध में पैरेंट में आपके सभी तरीकों को इनकैप्सुलेट करने की अनुमति देता है, और उन्हें पहले एक स्ट्रिंग के रूप में विधि का नाम देकर, और फिर इस विधि के लिए कोई अतिरिक्त पैरामीटर पास करके कॉल करें। एन्कैप्सुलेटिंग विधियों का यह तरीका jQuery प्लगइन समुदाय में मानक है और इसका उपयोग अनगिनत प्लगइन्स और विजेट्स में jQueryUI में किया जाता है।

घटनाओं

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

आप जिस प्रकार के ईवेंट के साथ संवाद कर रहे हैं, उसके नाम के साथ बस एक बिंदु और एक नामस्थान नाम जोड़कर अपनी घटनाओं के लिए एक नाम स्थान परिभाषित कर सकते हैं।

 (function( $ ){ var methods = { init : function( options ) { return this.each(function(){ $(window).bind('resize.tooltip', methods.reposition); }); }, destroy : function( ) { return this.each(function(){ $(window).unbind('.tooltip'); }) }, reposition : function( ) { // ... }, show : function( ) { // ... }, hide : function( ) { // ... }, update : function( content ) { // ... } }; $.fn.tooltip = function( method ) { if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( '   ' + method + '    jQuery.tooltip' ); } }; })( jQuery ); 

 $('#fun').tooltip(); //   ... $('#fun').tooltip('destroy'); 

इस उदाहरण में, जब टूलटिप प्लग इनिट विधि का उपयोग करके आरंभीकृत किया गया था, तो यह रिप्लेसमेंट विधि को विंडो के आकार बदलने वाली घटना के साथ जोड़ देता है, नामस्थान 'टूलटिप' को निर्दिष्ट करता है। बाद में, जब डेवलपर टूलटिप ऑब्जेक्ट को नष्ट करने का इरादा रखता है, तो वह उपयुक्त नेमस्पेस निर्दिष्ट करके प्लगइन से जुड़े सभी हैंडलर को खोल सकता है। इस स्थिति में, unbind विधि के लिए 'टूलटिप'। यह आपको गलती से इस प्लगइन के बाहर एक हैंडलर के साथ जुड़े घटना को एकजुट करने के जोखिम के बिना घटनाओं से हैंडलर को सुरक्षित रखने की अनुमति देता है।

डेटा

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

 (function( $ ){ var methods = { init : function( options ) { return this.each(function(){ var $this = $(this), data = $this.data('tooltip'), tooltip = $('<div />', { text : $this.attr('title') }); //      if ( ! data ) { /* *    */ $(this).data('tooltip', { target : $this, tooltip : tooltip }); } }); }, destroy : function( ) { return this.each(function(){ var $this = $(this), data = $this.data('tooltip'); //   !!11 $(window).unbind('.tooltip'); data.tooltip.remove(); $this.removeData('tooltip'); }) }, reposition : function( ) { // ... }, show : function( ) { // ... }, hide : function( ) { // ... }, update : function( content ) { // ...} }; $.fn.tooltip = function( method ) { if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( '   ' + method + '    jQuery.tooltip' ); } }; })( jQuery ); 

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

निष्कर्ष और सुझाव

JQuery के लिए प्लगइन्स बनाना आपको इस लाइब्रेरी से सबसे बाहर निकलने की अनुमति देता है और आपके सबसे सफल समाधानों को अमूर्त करता है और अक्सर उपयोग किए जाने वाले कार्यों को पुन: प्रयोज्य कोड में शामिल करता है जो आपको समय बचा सकते हैं और विकास प्रक्रिया को और अधिक कुशल बना सकते हैं। निम्नलिखित आपके jQuery प्लगइन को विकसित करते समय आपको जो कुछ भी याद रखना चाहिए उसका एक संक्षिप्त अंश है:

• हमेशा एक निर्माण में अपने प्लगइन लपेटो:
  
  

    (function( $ ){ /*     */ })( jQuery ); 

  
  अनुवादक का नोट: मूल लेख में, इस वाक्यविन्यास को एक बंद कहा जाता है, लेकिन यह एक बंद नहीं है, लेकिन एक फ़ंक्शन जिसे सीधे (IIFE) कहा जाता है।
  
  
• अपने प्लगइन के फ़ंक्शन के तत्काल दायरे में, इसे अनावश्यक सिंटैक्स कंस्ट्रक्शन में न लपेटें।
• जब तक आप प्लगइन फ़ंक्शन से एक विशिष्ट मूल्य नहीं लौटाते हैं, हमेशा कॉल चेन का समर्थन करने के लिए इस पर एक लिंक लौटाएं।
• यदि आपको मापदंडों की एक लंबी सूची को स्थानांतरित करने की आवश्यकता है, तो अपने प्लगइन की सेटिंग्स को ऑब्जेक्ट शाब्दिक के रूप में पास करें, जिनमें से मान आपके प्लगइन के मापदंडों के लिए डिफ़ॉल्ट मानों तक बढ़ाए जाएंगे।
• एक एकल प्लगइन के लिए एक से अधिक jQuery.fn नामस्थान को परिभाषित न करें।
• हमेशा अपने तरीकों, घटनाओं और डेटा के लिए एक नाम स्थान निर्धारित करें।