Acum, că înțelegem noțiunile de bază ale dezvoltării pluginurilor, putem să aprofundăm puțin. Deoarece în cele din urmă un plugin este o funcție, acesta ne oferă domeniul de aplicare pe care trebuie să îl organizăm. Vă amintiți când ne-am făcut ordine în casă când învățam despre șablonare? Putem folosi unele dintre aceleași concepte într-un plugin.
Dar mai întâi, cred că arhitectura pluginului jQuery poate beneficia de un cod boilerplate. Poate că sunteți familiarizat cu Boilerplate HTML5, care oferă o grămadă de valori implicite inteligente. Un jQuery Plugin boilerplate este același lucru. Economisește unele tipuri și te face să mergi pe o cale de dezvoltare inteligentă.
Am dat peste un proiect numit literalmente jQuery Boilerplate, pe care aș presupune că este bun. Dar nu m-am săpat prea mult în asta. În schimb, îmi place foarte mult Starter de Doug Neiner. Furnizați un nume, unele valori implicite și câteva opțiuni și acesta va genera acea structură de tip boilerplate.
Decidem să facem un glisor numit lodgeSlider cu un parametru de viteză simplu și să terminăm cu acest cod:
(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);Multe dintre acestea ar trebui să pară familiare. Există un IIFE care împachetează pluginul pentru siguranță. Există o funcție creată de pe obiectul jQuery. Există o funcție inițială numită imediat. Există o metodă creată de pe obiectul jQuery care returnează un obiect jQuery. Există variabile create referințe de stocare în cache pe care este probabil să le folosim din nou. Mai ales lucruri pe care le-am văzut înainte.
Poate două lucruri noi. Una este obiectul opțiunilor de acolo. Puteți vedea valoarea 300 codificată. Dar vezi și linia cu $.extend(). Aceasta este o funcție jQuery pentru a combina două obiecte într-unul, unul având prioritate față de celălalt. Când apelăm pluginul, poate așa:
$("#slider-1").lodgeslider();Nu trecem nicio opțiune, iar acel obiect gol se combină cu obiectul nostru codificat, iar valorile implicite sunt disponibile în interiorul pluginului. Dar am putea să-l numim și așa:
$("#slider-1").lodgeslider(( speed: 500 ));Trecem un obiect ca parametru acolo. Obiectul respectiv se combină cu obiectul nostru codificat, are prioritate, iar valoarea pe care am trecut-o devine valoarea disponibilă în plugin. Destul de la moda.
Celălalt lucru nou este acel pic ciudat cu .data(). Am creat variabila de bază pentru a face referire la funcția în sine, care este creată din nou pentru fiecare element la care este apelat pluginul. De exemplu, să presupunem că am activat pluginul $(".slider")- ar putea exista două elemente pe pagină cu un nume de clasă de slider. Fiecare buclă rulează și sunt create două instanțe ale funcției lodgeSlider. În fiecare dintre ele, atașăm o referință la elementul în sine. În acest fel putem apela metode de plugin interne din orice referință pe care o avem despre acel element.
Ca poate:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Doar ne oferă un mod frumos de a folosi metode de plugin, dacă este nevoie.
Nu am ajuns extrem de departe în această aventură de construire a pluginurilor:
Vedeți Pen-ul Building a Slider de la Scratch de Chris Coyier (@chriscoyier) pe CodePen
Sincer, lumea probabil că nu are nevoie de un alt plugin glisant. Dar, puteți vedea cât de complexe ar putea deveni. Iată doar câteva idei:
- Ar putea exista funcții de apel invers (sau evenimente personalizate) pentru înainte și după modificarea diapozitivului, după ce glisorul este configurat, după ce este demolat etc.
- Lățimile pot fi bazate pe procente și se recalculează atunci când se schimbă fereastra browserului.
- Navigarea ar putea fi construită dinamic în loc să fie necesară în markup.
- ID-urile și #hash hrefs ar putea fi create, de asemenea, dinamic.
- Evenimente tactile, cum ar fi glisări, ar putea fi adăugate pentru a face glisorul mai ușor de atins (punctele mici nu sunt tactile prietenoase).
Cu cât faceți mai multe lucruri, cu atât este mai mare dimensiunea pluginului. De aceea, atingerea echilibrului dintre caracteristici, caracter practic, performanță și dimensiune este atât de dificilă și acolo unde există atât de multe pluginuri diferite care fac în cele din urmă același lucru.