🚣🏿 ⏳ ⛰️ JQuery प्लग इन में घटनाओं का उपयोग करना 😠 🤘🏼 👌🏼

इस लेख का मुख्य उद्देश्य है: jQuery प्लगइन के पारंपरिक कार्यान्वयन और घटनाओं का उपयोग करके कार्यान्वयन के बीच अंतर दिखाना। लेख होगा: jQuery प्लगइन के पारंपरिक कार्यान्वयन के बारे में, jQuery में घटनाओं के साथ काम करने के बारे में, और घटनाओं के साथ प्लगइन के तरीकों या कॉलबैक कार्यों को बदलने का प्रयास।

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

1. थ्योरी
1.A. पारंपरिक jQuery प्लगइन
1.B. चर स्कोप
1.B. JQuery में घटनाओं के साथ काम करना
1.d. प्लगइन्स में अनुप्रयोग घटनाओं
1.D. घटना दोष
2. प्लगइन्स में कुचलने के साथ एक साधारण अनुप्रयोग का एक उदाहरण
3. निष्कर्ष, निष्कर्ष
4. सन्दर्भ

1. थ्योरी

1.A. पारंपरिक jQuery प्लगइन

एक पारंपरिक jQuery प्लगइन बनाना एक काफी तुच्छ कार्य है। ऐसा करने के लिए, $ .fn स्थान पर एक नई विधि जोड़ें।

उदाहरण 1 (myPlugin प्लगइन बनाना):

(function( $ ) { $.fn.myPlugin = function(options) { //  options -   //  $(this) -    jQuery   ,     //      }; })( jQuery );

यह संरचना सरल प्लग-इन, जिसमें से आप डेटा प्राप्त करने की जरूरत नहीं है बनाने के लिए बहुत अच्छा है।

लेकिन अक्सर हमें डेटा या प्लगइन की स्थिति प्राप्त करने की आवश्यकता होती है। एक अच्छा उदाहरण DatePicker है।

मैं डेटा प्राप्त करने के लिए कई समाधान जानता हूं:

R.1.A. एक विधि (या फ़ंक्शन) को कॉल करना ।
उदाहरण 2: $('input.date').datePicker('getDate'); $('input.date').datePicker('isDisabled') ।
नुकसान: परिवर्तनों को ट्रैक करने का कोई तरीका नहीं है (उदाहरण के लिए, उपयोगकर्ता ने एक अलग मूल्य चुना);
R.1.B. कॉलबैक फ़ंक्शन पास करना ।
उदाहरण 3: $('input.date').datePicker({onChange: onChangeCallback}); $('input.date').datePicker({onDisable: onDisableCallback}) ।
नुकसान: प्लगइन के कार्यान्वयन की शिकायत करना: कॉलबैक फ़ंक्शन कॉल को लागू करना आवश्यक है, कई श्रोताओं के एक कार्यक्रम की सदस्यता;
R.1.V. घटनाएँ ।
उदाहरण 4: $('input.date').on('change', onChangeHandler); $('input.date').on('disable', onDisableHandler) ।
आगे पेशेवरों और विपक्ष के बारे में अधिक।

1.B. चर स्कोप

P.1.A और P.1.B विधियों के कार्यान्वयन के साथ समस्या यह है कि अगली बार जब आप $(element).datePicker(...) , तो प्लग-इन निर्माणकर्ता फिर से निष्पादित होता है। बेशक, यह आसानी से पारित मापदंडों की जांच करके मॉनिटर किया जाता है: यदि ऑब्जेक्ट (विकल्प) पारित हो गया है, तो यह प्रारंभिक है; यदि एक स्ट्रिंग पारित हो जाती है, तो एक विधि कॉल आवश्यक है। जैसा कि कहा जाता है, "यह एक बग या विशेषता है" - जबकि समझने के लिए पर्याप्त अनुभव नहीं है।

लेकिन मैं चर scopes की समस्या में भाग गया।

उदाहरण 5: गुंजाइश समस्या का प्रदर्शन

 (function( $ ) { //  var options = { date: '00-00-0000' }, //  methods = { getDate: function() { return options.date; } }; //  $.fn.myPlugin = function(o) { if (typeof o === 'string' && methods[o] !== null) { return methods[o].apply(); } options = o || options; $(this).text(options.date); }; //   $('[data-test]').myPlugin({ date: '10-10-2013' }); //   alert($('[data-test]').myPlugin('getDate')); })( jQuery );

इस स्तर पर, सब कुछ आसान है: विकल्पों में से जो दिनांक प्रदर्शित करता है प्लग-इन का पैदा करते हैं।

लेकिन समस्या तब उत्पन्न होती है जब किसी पृष्ठ पर दिए गए प्रकार के एक से अधिक प्लगइन रखना आवश्यक होता है।

उदाहरण 6: प्रति पृष्ठ एक से अधिक प्लगइन

जैसा कि आप उदाहरण 6 से देख सकते हैं, विकल्प चर, जिसे प्लगइन के बाहर ले जाया गया था, प्लगइन 2 के आरंभ के दौरान डेटा के साथ ओवरराइट किया गया था।

उदाहरण 6 के समाधान:

R.2.A. विकल्प सभी प्लग-इन (कोड के लिए) प्रारंभ करने में डाटा स्टोर करने की वस्तु;
R.2.B. एक डोम ऑब्जेक्ट के लिए आरंभीकरण डेटा संलग्न करें (मेरे दृष्टिकोण से: एक अच्छा समाधान);
R.2.V. घटनाओं का उपयोग। $(...).trigger(...) का उपयोग करके कॉलिंग विधियाँ $(...).trigger(...) । अंत में, मैं एक उदाहरण है, जो इस कमी से रहित है दे देंगे।

1.B. JQuery में घटनाओं के साथ काम करना

JQuery लाइब्रेरी का उपयोग करके, हम दोनों $('.link').on('click', onClickHandler) लिए "श्रोता" बना सकते हैं $('.link').on('click', onClickHandler) , और ट्रिगर (ट्रिगर) $('.link').trigger('click') घटनाओं। $('.link').trigger('click') ।

हम प्रलेखन की ओर मुड़ते हैं, दोनों कार्यों के मापदंडों को देखते हैं:

सामान्य तौर पर, फ़ंक्शन में पैरामीटर होते हैं:

घटनाओं - सुनी जाने वाली घटनाओं की एक सूची;
हैंडलर - एक इवेंट हैंडलर फ़ंक्शन जिसे इवेंट सूची के किसी भी ईवेंट के प्रतिबद्ध होने पर बुलाया जाएगा।

ट्रिगर फ़ंक्शन के पैरामीटर हैं:

EventType - घटना का नाम जिसे बुलाया जाना है;
extraParameters - एक सरणी या ऑब्जेक्ट जिसमें पैरामीटर होते हैं जिन्हें इवेंट हैंडलर को पास करना होगा।

उदाहरण 7: घटनाओं के संचालन का प्रदर्शन

 $(function() { $(document).on('myEvent', function(event, p) { alert('a: ' + pa + '; b: ' + pb); }); $(document).trigger('myEvent', { a: '1', b: '2' }); }); + ', बी:' + पंजाब); $(function() { $(document).on('myEvent', function(event, p) { alert('a: ' + pa + '; b: ' + pb); }); $(document).trigger('myEvent', { a: '1', b: '2' }); });

1.d. प्लगइन्स में अनुप्रयोग घटनाओं

चर (उदाहरण A.6 में वर्णित) और कई श्रोताओं को लटकाने की समस्या (समाधान P.1.B में वर्णित) की समस्या से छुटकारा पाने के लिए, मैंने jQuery (1.B) में लागू घटनाओं और आवरणों का उपयोग किया।

उदाहरण 7: एक प्लगइन में घटनाओं को लागू करना

 (function( $ ) { //   $.fn.datePicker = function(options) { var self = $(this), options = options || { year: 2012, month: 1, day: 1 }; var date = new Date(options.year, options.month, options.day), d = new Date(options.year, options.month, 1), table = $('<table />'), tr = $('<tr>'); tr.appendTo(table); //    for (i=0; i < d.getDay(); i++) { tr.append('<td />'); } //   while (d.getMonth() == date.getMonth()) { if (i % 7 == 0) { tr = $('<tr />'); tr.appendTo(table); i = 0; } var td = $('<td>' + d.getDate() + '</td>'); td.data('date', d.toString()); tr.append(td); d.setDate(d.getDate() + 1); i++; } //    for (i=0; i < 7 - d.getDay(); i++) { tr.append('<td />'); } table.appendTo(self); //        'change'   table.find('td').on('click', function() { //     self.trigger('change', $(this).data('date')); }); return self; }; //   $('[data-datePiceker]').datePicker(); //     $('[data-datePiceker]').on('change', function(event, date) { alert(date); }); })( jQuery ); , (function( $ ) { //   $.fn.datePicker = function(options) { var self = $(this), options = options || { year: 2012, month: 1, day: 1 }; var date = new Date(options.year, options.month, options.day), d = new Date(options.year, options.month, 1), table = $('<table />'), tr = $('<tr>'); tr.appendTo(table); //    for (i=0; i < d.getDay(); i++) { tr.append('<td />'); } //   while (d.getMonth() == date.getMonth()) { if (i % 7 == 0) { tr = $('<tr />'); tr.appendTo(table); i = 0; } var td = $('<td>' + d.getDate() + '</td>'); td.data('date', d.toString()); tr.append(td); d.setDate(d.getDate() + 1); i++; } //    for (i=0; i < 7 - d.getDay(); i++) { tr.append('<td />'); } table.appendTo(self); //        'change'   table.find('td').on('click', function() { //     self.trigger('change', $(this).data('date')); }); return self; }; //   $('[data-datePiceker]').datePicker(); //     $('[data-datePiceker]').on('change', function(event, date) { alert(date); }); })( jQuery ); )); (function( $ ) { //   $.fn.datePicker = function(options) { var self = $(this), options = options || { year: 2012, month: 1, day: 1 }; var date = new Date(options.year, options.month, options.day), d = new Date(options.year, options.month, 1), table = $('<table />'), tr = $('<tr>'); tr.appendTo(table); //    for (i=0; i < d.getDay(); i++) { tr.append('<td />'); } //   while (d.getMonth() == date.getMonth()) { if (i % 7 == 0) { tr = $('<tr />'); tr.appendTo(table); i = 0; } var td = $('<td>' + d.getDate() + '</td>'); td.data('date', d.toString()); tr.append(td); d.setDate(d.getDate() + 1); i++; } //    for (i=0; i < 7 - d.getDay(); i++) { tr.append('<td />'); } table.appendTo(self); //        'change'   table.find('td').on('click', function() { //     self.trigger('change', $(this).data('date')); }); return self; }; //   $('[data-datePiceker]').datePicker(); //     $('[data-datePiceker]').on('change', function(event, date) { alert(date); }); })( jQuery );

हमें क्या मिला:

"कंस्ट्रक्टर" केवल एक बार कहा जाता है;
हम बहुत से "श्रोताओं" को लटका सकते हैं जो प्लगइन की स्थिति के बारे में जानकारी प्राप्त करेंगे;
प्लगइन से संबंधित चर फ़ंक्शन के शरीर में स्थित हैं, और इस प्लगइन के अन्य इनिशियलाइज़ेशन पर निर्भर नहीं करते हैं।

उदाहरण 8 से पता चलता है कई initializations एक प्लग A.7 के आपरेशन

1.D. घटना दोष

बेशक, यह दृष्टिकोण प्लगइन के साथ काम करने के लिए सामान्य दृष्टिकोण को बदलता है, मेरा मतलब है कि डेटा प्राप्त करने के लिए पारंपरिक तरीकों की कमी, उदाहरण के लिए $(...).datePicker('getDate') , लेकिन फिर भी, मेरे व्यक्तिगत विकास के इस स्तर पर, एक प्रोग्रामर के रूप में, यह विधि मेरी कुछ समस्याओं को हल करती है। मैं व्यक्तिगत रूप से, मुझे लगता है कि यह दृष्टिकोण काफी सार्वभौमिक है, और अभी तक किसी भी दोष का सामना नहीं किया है - अगर पाठक उन लोगों के बारे में जानता है, तो कृपया चुप न रहें, और मैं आपसे यह भी पूछना चाहता हूं कि जितना संभव हो उतना सुलभ और पर्याप्त रूप से लिखना चाहिए।

2. प्लगइन्स में कुचलने के साथ एक साधारण अनुप्रयोग का एक उदाहरण

घटनाओं में प्रशिक्षण और चलाने के लिए, उन्होंने कई छोटे ग्राहक अनुप्रयोग लिखे:

परिशिष्ट 1 (ट्विटर फ़ीड ): jsbin.com/afupej/1/edit
परिशिष्ट 2 (TODO सूची): jsbin.com/urihar/16/edit

3. निष्कर्ष, निष्कर्ष

उदाहरणों का उपयोग करते हुए, मैंने दिखाया कि कैसे एक jQuery प्लग-इन बनाने के लिए, डेटा ट्रांसफर के मुद्दों की पहचान की और प्लग-इन से डेटा प्राप्त करना मेरे लिए प्रासंगिक है, दिखाया गया है कि jQuery इवेंट्स और रैपर का उपयोग कैसे किया जाता है, और एक एप्लिकेशन बनाने पर स्पर्श किया गया है जो सक्रिय रूप से JQuery प्लगइन्स और घटनाओं का उपयोग करता है।

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

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

आपका ध्यान के लिए धन्यवाद!

4. प्रयुक्त साहित्य

5. टीकाकारों से साहित्य

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

JQuery प्लग इन में घटनाओं का उपयोग करना