अब जब हमने jQuery प्लगइन्स का उपयोग करने पर ध्यान दिया है, तो यह समझने योग्य है कि उन्हें कैसे बनाया जाए। हमने पहले से ही इस तथ्य को संक्षेप में छुआ है कि यदि आप चाहते हैं तो आप देशी jQuery ऑब्जेक्ट का विस्तार कर सकते हैं। बिलकुल इसके जैसा:
$.myFunction = function() ( console.log("I am a function on the jQuery object."); ); // call it $.myFunction();लेकिन यह अपने आप में विशेष रूप से उपयोगी नहीं है। JQuery के लिए एक नई विधि बनाने के लिए जिसे आप तत्वों के एक सेट पर कॉल कर सकते हैं, आपको इसे इस तरह करना होगा:
$.fn.myMethod = function() ( // I'm a new method ));यह बिलकुल वैसा ही है जैसे कि jQuery पर .prototype का उपयोग करना, और जिज्ञासु के लिए, आप यहाँ इसके बारे में अधिक पढ़ सकते हैं। इस तरह से करने का अर्थ है कि हम तत्वों के एक सेट पर उस नई पद्धति का उपयोग करने में सक्षम होंगे। पसंद:
$("li").myMethod();आप उस विधि के पक्ष में जो चाहें कर सकते हैं, लेकिन एक अच्छे jQuery प्लगइन बिल्डिंग नागरिक की तरह होने के लिए आपको प्लगइन से उसी तत्वों के सेट को वापस करना चाहिए।
$.fn.myMethod = function() ( // Do some stuff return this; ));इस तरह यह चैनिंग के साथ काम करेगा। यदि आप ऐसा नहीं करते हैं, और किसी ने ऐसा कुछ करने की कोशिश की है:
$ ("ली") .मेथेथोड ()। शो ();
यह विफल होगा, क्योंकि .show()अनिवार्य रूप से कुछ भी नहीं कहा जाएगा। अक्सर jQuery प्लगइन्स को प्रत्येक तत्व पर लूप करने के लिए फ़ैशन किया जाता है ताकि आपको सेट में प्रत्येक व्यक्तिगत तत्व तक सीधी पहुंच हो, जैसा कि आपको ज़रूरत है।
एक और अच्छी नागरिक बात यह है कि एक प्लगइन को तुरंत इन्वैस्टमैंट फंक्शन एक्सप्रेशन में लपेटें और इसे एक पैरामीटर के रूप में jQuery में पास करें। इस तरह आप अपने प्लगइन कोड के अंदर $ अधिक सुरक्षित रूप से उपयोग कर सकते हैं। ऐसा इसलिए है क्योंकि कुछ स्थितियों में jQuery के लिए $ शॉर्टहैंड अनुपलब्ध है (उदाहरण के लिए एक उपयोगकर्ता ने "संगतता मोड" में jQuery का उपयोग किया है)।
उन दोनों अंतिम दो चीजों के साथ एक प्लगइन संरचना बन जाती है:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)स्क्रैन्कास्ट में हमने किसी भी तत्व के अंत में एक तीर जोड़ने के लिए एक सरल प्लगइन का निर्माण किया।
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन rwasH देखें
बेशक, यह और अधिक जटिल हो सकता है क्योंकि आपकी महत्वाकांक्षा और अधिक बढ़ जाती है।