अब जब हम प्लगइन विकास की मूल बातें समझ गए हैं, तो हम थोड़ा गहरा खुदाई कर सकते हैं। क्योंकि अंततः एक प्लगइन एक फ़ंक्शन है, यह हमें वह गुंजाइश प्रदान करता है जिसे हमें व्यवस्थित करने की आवश्यकता है। याद रखें जब हमें अपना घर मिला था जब हम टेम्पलेटिंग के बारे में सीख रहे थे? हम एक प्लगइन में उन कुछ अवधारणाओं का उपयोग कर सकते हैं।
लेकिन पहले, मुझे लगता है कि jQuery प्लगइन आर्किटेक्चर कुछ बॉयलरप्लेट कोड से लाभ उठा सकता है। शायद आप एचटीएमएल 5 बॉयलरप्लेट से परिचित हैं जो स्मार्ट चूक का एक गुच्छा प्रदान करता है। एक jQuery प्लगइन बॉयलरप्लेट एक ही तरह की चीज है। कुछ टाइपिंग बचाता है और आपको स्मार्ट डेवलपमेंट का रास्ता दिखाता है।
मैं वास्तव में jQuery बॉयलरप्लेट नामक एक परियोजना के पार आया था जो मुझे लगता है कि अच्छा होगा। लेकिन मैं उस एक में ज्यादा नहीं डूबा। इसके बजाय, मैं डौग Neiner द्वारा स्टार्टर को काफी पसंद करता हूं। आप एक नाम, कुछ चूक और कुछ विकल्प प्रदान करते हैं और यह आपके लिए उस बॉयलरप्लेट संरचना को उत्पन्न करेगा।
हम लॉजस्लाइडर नामक स्लाइडर को एक साधारण गति पैरामीटर के साथ बनाने और इस कोड के साथ समाप्त करने का निर्णय लेते हैं:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);बहुत कुछ परिचित होना चाहिए। सुरक्षा के लिए प्लगइन को लपेटने वाला एक IIFE है। JQuery ऑब्जेक्ट से बना एक फ़ंक्शन है। एक अंतःक्रियात्मक कार्य है जिसे तुरंत कहा जाता है। JQuery ऑब्जेक्ट से बना एक तरीका है जो एक jQuery ऑब्जेक्ट देता है। ऐसे कैशिंग रेफरेंस बनाए गए हैं जिनका हम फिर से उपयोग करने की संभावना रखते हैं। ज्यादातर सामान हमने पहले देखा है।
शायद दो नई बातें। एक विकल्प वस्तु है। आप हार्ड-कोडित 300 मान देख सकते हैं। लेकिन साथ लाइन भी देखें $.extend()। यह एक jQuery फ़ंक्शन दो वस्तुओं को एक में एक दूसरे के साथ पूर्ववर्तीता लेने के साथ संयोजित करने के लिए है। जब हम प्लगइन कहते हैं, शायद इस तरह:
$("#slider-1").lodgeslider();हम बिना किसी विकल्प के पास हो रहे हैं, और वह खाली वस्तु हमारी हार्ड-कोडेड ऑब्जेक्ट के साथ संयुक्त हो जाती है, और डिफ़ॉल्ट मान प्लगइन के अंदर उपलब्ध हैं। लेकिन हम इसे इस तरह भी कह सकते हैं:
$("#slider-1").lodgeslider(( speed: 500 ));हम वहां एक पैरामीटर के रूप में एक वस्तु पारित कर रहे हैं। वह ऑब्जेक्ट हमारी हार्ड-कोडेड ऑब्जेक्ट के साथ संयुक्त हो जाता है, पूर्वता लेता है, और हमने जो मूल्य पारित किया है वह प्लगइन में उपलब्ध मूल्य बन जाता है। बहुत अच्छा।
दूसरी नई बात यह है कि अजीब सा है .data()। हमने फ़ंक्शन को संदर्भित करने के लिए बेस वैरिएबल बनाया, जो कि प्रत्येक तत्व के लिए नए सिरे से बनाया जाता है जिसे प्लगइन कहा जाता है। उदाहरण के लिए, मान लें कि हमने प्लगइन को कॉल किया है $(".slider")- पृष्ठ पर दो तत्व हो सकते हैं जिनके वर्ग नाम के साथ slider। प्रत्येक लूप चलता है, और लॉजस्लाइडर फ़ंक्शन के दो उदाहरण बनाए जाते हैं। प्रत्येक में, हम इसे स्वयं तत्व के लिए एक संदर्भ देते हैं। इस तरह से हम आंतरिक प्लगइन तरीकों को उस तत्व के किसी भी संदर्भ से कॉल कर सकते हैं।
जैसे शायद:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);अगर हमें ज़रूरत है तो थोड़े हमें प्लगइन तरीकों का उपयोग करने का एक अच्छा तरीका देता है।
हम इस प्लगइन निर्माण साहसिक कार्य में बहुत दूर नहीं गए:
कोडपीन पर क्रिस कॉयर (@chriscoyier) द्वारा स्क्रैच से पेन बिल्डिंग एक स्लाइडर देखें
ईमानदारी से दुनिया को शायद एक और स्लाइडर प्लगइन की आवश्यकता नहीं है। लेकिन, आप देख सकते हैं कि वे कितने जटिल हो सकते हैं। यहाँ कुछ विचार हैं:
- स्लाइड बदलने से पहले और बाद में स्लाइडर के सेट होने के बाद कॉलबैक फ़ंक्शंस (या कस्टम इवेंट) हो सकते हैं, इसके बाद इसे फाड़ा जाता है, आदि।
- ब्राउज़र विंडो में परिवर्तन होने पर चौड़ाई प्रतिशत आधारित और पुनर्गणना हो सकती है।
- मार्कअप में आवश्यक होने के बजाय नेविगेशन गतिशील रूप से निर्मित किया जा सकता है।
- ID और #hash hrefs को गतिशील रूप से भी बनाया जा सकता है।
- स्लाइडर को अधिक स्पर्श के अनुकूल बनाने के लिए स्वाइप जैसी स्पर्श घटनाओं को जोड़ा जा सकता है (छोटे डॉट्स स्पर्श के अनुकूल नहीं हैं)।
उन चीजों का जितना अधिक आप करते हैं, प्लगइन का आकार उतना ही बड़ा होता है। यही कारण है कि सुविधाओं, व्यावहारिकता, प्रदर्शन और आकार के बीच का संतुलन इतना मुश्किल है और जहां इतने सारे अलग-अलग प्लगइन्स हैं जो अंततः एक ही काम करते हैं।