Share
În acest articol vom construi propriul nostru plug-in jQuery pas-cu-pas de la zero; jQuery face această sarcină excepțional de ușoară pentru noi, oferindu-ne o metodă simplă de ambalare a scripturilor noastre și expunerea funcționalității acestora și încurajând utilizarea unor tehnici scalabile și reutilizabile orientate spre obiecte.
Comutarea codului pe care ne găsim din nou mereu într-un plugin jQuery are sens; înseamnă că putem să scapăm scripturile în site-uri și să le facem să lucreze imediat cu personalizare puțin sau deloc și înseamnă că ne putem împărtăși codul cu alți dezvoltatori. Din cauza sintaxei obișnuite la utilizarea pluginurilor jQuery, majoritatea dezvoltatorilor ar trebui să le poată prelua și să le folosească intuitiv, dat fiind o documentație simplă care enumeră proprietățile configurabile.
Pluginul nostru va fi un simplu încărcător de imagini; o dată ce o pagină a fost încărcată, care ar putea fi pagina de pornire sau o altă pagină de destinație obișnuită în site-ul nostru, încărcăm o serie de imagini. Aceste imagini sunt salvate în memoria cache a browserului și sunt, prin urmare, utilizabile pe tot restul site-ului. Acestea se vor încărca mult mai repede decât în mod normal, astfel că este o modalitate bună de preîncărcare a imaginilor mari, astfel încât vizitatorul să nu trebuiască să aștepte ca aceștia să le facă când se deschide pagina care le conține.
Vom crea un director nou pentru a păstra toate fișierele necesare în.
Acum, că avem totul în loc, putem începe scriptul; într-un fișier nou din editorul de text începeți cu următorul cod:
(funcția ($) // codul pluginului va merge aici ...) (jQuery);
Salvați noul fișier în folderul de scripturi ca jquery.jloader.js. Începem prin crearea unei funcții anonime de împachetare, care este auto-executantă. Funcția acceptă un singur argument, care este simbolul dolarului. Funcția este urmată de un al doilea set de paranteze; le folosim pentru a trece biblioteca jQuery în plugin-ul nostru. Aceasta înseamnă că putem folosi orice funcționalitate standard jQuery folosind semnul $ ca un pseudonim. Acest al doilea set de paranteze este, de asemenea, ceea ce face ca funcția noastră să se execute singură.
În cadrul funcției noastre anonime, adăugați următorul cod:
$ .jLoader = implicit: imgDir: "loaderImages /", imgContainer: "", imgTotal: 9, imgFormat: ".jpg", simpleFileNames: true;
Cu acest cod creăm un obiect nou care este adăugat ca proprietate obiectului jQuery. Încărcat în acest obiect este un al doilea obiect numit implicit; acest al doilea obiect este folosit pentru a stoca setările de configurare diferite pentru plugin-ul nostru. Aceste setări sunt proprietățile pluginului nostru și formează API-ul principal cu ajutorul căruia poate fi folosit programabil. Odată ce pluginul a fost codificat, acesta va apărea în fila DOM a Firebug ca proprietate a obiectelor $ sau jQuery:
Apoi trebuie să adăugăm metoda constructorului nostru la jQuery astfel încât să putem direcționa anumite elemente sau grupuri de elemente și să le aplicăm plugin-ul acestora. Imediat după proprietățile configurabile, adăugați următorul cod:
$ .fn.extend (jLoader: functie (config, fileNames) var config = $ .extend (, $ .jLoader.defaults, config); config.imgContainer = this.attr .simpleFileNames == true)? simpleLoad (config): complexLoad (config, fileNames); retur acest lucru;);
Metoda extensiei jQuery ia un obiect și aplică proprietățile sale unui alt obiect. Când facem pluginuri, aplicăm obiectul reprezentând plugin-ul nostru la obiectul fn, care este o construcție specială jQuery făcută pentru pluginurile de creație.
Proprietatea jLoader în obiectul pe care îl aplicăm pentru fn are valoarea anonimă; în cadrul acestei funcții, adăugăm mai întâi proprietățile configurabile. Facem acest lucru folosind metoda extensie a jQuery încă o dată. Funcția constructor acceptă două argumente opționale, un obiect de configurare creat de dezvoltator și o serie de nume de fișiere.
Acest lucru ne permite să folosim proprietățile implicite, dar să acceptăm și un obiect de configurare atunci când apelăm metoda constructorului din codul extern. Toate proprietățile furnizate în obiectul de configurare al constructorului vor suprascrie valorile oricăror proprietăți de potrivire din obiectul de configurare implicit.
Este util pentru alți dezvoltatori să furnizeze cât mai multe proprietăți configurabile pentru a face ca pluginurile noastre să fie mai robuste și personalizabile. Setul de proprietăți rezultat este stocat în variabila config, astfel încât să îl putem transmite cu ușurință altor funcții.
Obținem ID-ul elementului selectat, pe care îl putem obține prin interogarea atributului id al obiectului jQuery curent, care va indica elementul (elementele) pe care funcția constructorului este atașată.
Apoi, determinați dacă folosim nume de fișiere simple (numerice) sau complexe (alfanumerice); putem afla din proprietatea simpleFileNames a obiectului config. În mod implicit, acest lucru este setat la adevărat, pentru a verifica dacă valoarea sa este încă adevărată și apelați funcția corespunzătoare utilizând instrucțiunea condițională ternară standard JavaScript. Fiecare funcție este trecută de obiectul config, astfel încât să putem folosi proprietățile sale în interiorul funcției, dacă nu am face acest lucru, nu am putea să accesăm niciuna dintre proprietățile de configurare din cadrul metodelor noastre.
În cele din urmă, vom folosi instruciunea return pentru a returna obiectul plugin-ului nostru; acesta este un factor important în codul de plugin și înseamnă că putem lega metode jQuery suplimentare la sfârșitul apelului la metoda constructorului nostru, făcându-l să se comporte exact ca alte metode interne ale jQuery.
Pluginul nostru are două metode suplimentare în urma metodei constructorului; aceste două metode sunt utilizate intern de plugin și nu trebuie să fie apelate din codul extern, gândiți-vă la acestea ca metode protejate. Prima dintre acestea este metoda simpleLoad și constă din următorul cod:
Accentsconagua
funcția simpleLoad (config) pentru (var x = 1; x < config.imgTotal + 1; x++) $("![]()
") .attr (id:" imagine "+ x, src: config.imgDir + x + config.imgFormat, titlu:" Imagine "+ x) appendTo (" # "+ config.imgContainer) afișare: "none");; Folosind un JavaScript standard pentru buclă, putem crea numărul necesar de elemente img în funcție de proprietatea imgTotal, pe care am setat la 9 în obiectul implicit. Poate părea greu de înțeles că trebuie să spui plugin-ului câte imagini vrem să încărcăm, dar, din nefericire, nu există nicio modalitate de interogare a dosarului pentru conținutul său folosind JavaScript. Această proprietate ajută la menținerea pluginului de la necesitatea suportului pentru server.
Creați fiecare imagine utilizând facilitatea excelentă de creare a nodului jQuery și setați atributele de bază pe care orice imagine trebuie să le aibă; un id, un src și un titlu. Pentru a face id-ul fiecărui element unic, putem folosi variabila de numărare pentru buclă. Scurtul fiecărui element img nou este cel mai complex; pentru acest atribut pumnul adăugăm calea către imagine folosind proprietatea imgDir. Cu nume de fișiere simple, putem folosi și variabila de numărare pentru a adăuga fiecare imagine specificată. În final, adăugăm extensia de fișier utilizând proprietatea imgFormat. Atributul de titlu se potrivește pur și simplu cu id-ul.
Odată ce fiecare imagine a fost creată și a dat atributele corespunzătoare, vom adăuga apoi la elementul container specificat în proprietatea imgContainer. Imaginile pre-încărcate nu sunt menite a fi văzute în această etapă, astfel încât să putem folosi metoda css jQuery pentru a seta proprietatea de afișare la nici una. Funcția finală, complexLoad, utilizează atât obiectul de configurare opțional, cât și matricea fileNames; codul trebuie să apară după cum urmează:
funcția complexLoad (config, fileNames) pentru (var x = 0; x < fileNames.length; x++) $("![]()
") .attr (id: fileNames [x], src: config.imgDir + fileNames [x] + config.imgFormat, titlu:" + + config.imgContainer) .css (display: "none");; Încă mai folosim o buclă pentru această metodă, deși numărul de rulaje pe care se execută se bazează pe numărul de elemente din matricea fileNames în locul proprietății imgTotal. Încă mai creăm o serie de elemente img și am setat aceleași atribute pe aceste elemente pe care le-am făcut înainte, deși folosim diferite valori pentru atributele de această dată.
Id-ul fiecărei imagini noi este setat pur și simplu la conținutul elementului curent al matricei. Imaginea este încărcată prin concatenarea din nou a căii, a fișierului și a extensiei de fișier, deși de această dată folosim conținutul elementului curent al matricei ca nume de fișier în loc de un întreg. Atributul titlu are o valoare ceva mai detaliată decât înainte și din nou utilizează elementul matricei în locul unei proprietăți de configurare.
Am adăugat acum tot codul care face pluginul nostru. Este timpul să facem testul. Creați un fișier HTML gol, cum ar fi:
jLoader Demo Page
Salvați această pagină în folderul principal al proiectului (jLoader) ca ceva de genul jLoader.demo.html. În corpul paginii avem două elemente de container pe care le vom popula cu imaginile preîncărcate. Ne conectăm la jQuery și la fișierul sursă pentru widget-ul nostru și apoi urmăm acest lucru avem două metode de constructor pentru plugin-ul nostru.
Primul primi este simpluImageContainer folosind metoda standard de recuperare DOM jQuery și sună plugin-ul nostru fără configurație suplimentară. Aceasta invocă implementarea implicită și ar trebui să umple containerul cu imaginile numite numeric. Nu veți vedea acest lucru pe pagină deoarece le-am setat pe toate să afișeze: nici unul, dar ar trebui să le puteți vedea în Firebug:
A doua metodă a constructorului utilizează atât un obiect de configurare, cât și matricea fileNames. Am stabilit aici două proprietăți; mai întâi am setat proprietatea simpleFileNames la falsă, astfel că este utilizată cea de-a doua metodă protejată în plugin-ul nostru, în al doilea rând am setat proprietatea imgContainer la id-ul elementului pe care vom adăuga imaginile. Apoi furnizăm o gamă de nume de fișiere imagine pe care dorim să le preloadem în format de șir. Din nou, nu veți vedea imaginile; asta e totul, dar Firebug își va dovedi existența:
În acest tutorial am analizat pașii individuali necesari pentru a face un simplu plugin jQuery; ne-am uitat cum să adăugăm proprietăți în API-ul plugin-ului nostru și cum să adăugăm metode care comportă diferite comportamente. De asemenea, am văzut metodele pe care jQuery le oferă să faciliteze crearea plugin-urilor de creație și tehnicile pe care le putem folosi pentru a face creațiile noastre mai robuste.
Asigurați-vă că vizitați site-ul jQuery pentru a examina pluginurile disponibile. Nu mai este nevoie să reinventați roata decât dacă învățați!
Vizitați articolul
"Uneori ne dăm în capul nostru că o sarcină este prea complexă pe care doar ignorăm să o facem. Asta a fost modul meu de gândire atunci când m-am gândit la dezvoltarea unui plug-in pentru jQuery ... Întotdeauna am crezut că o parte din codul pe care l-am dezvoltat ar face mai mult sens ca un plugin, dar nu am avut timp să-mi dau seama. "
Vizitați articolul
"Deci, ați fost în căutarea de a găsi răspunsul la viață, la univers și la orice, când ați blamat, ați găsit jQuery. Da, știu că vă așteptați la 42 de ani, dar tot surpriza noastră a fost jQuery. ce urmează? Construiește propriul plugin! "
Vizitați articolul
