Share
Când scrieți un plugin jQuery, ar trebui implementată aceeași rutină de prevenire a conflictelor utilizată cu codul vechi jQuery obișnuit. Având în vedere acest lucru, toate pluginurile ar trebui să fie conținute într - un domeniu de aplicare privat în cazul în care $ alias poate fi folosit fara teama de conflicte sau rezultate surprinzatoare.
Structura de codare de mai jos ar trebui să pară cunoscută, deoarece este utilizată în aproape toate exemplele de cod din această sesiune.
Pluginurile noi sunt atașate la jQuery.fn obiect, deoarece aceasta este o comandă rapidă sau un alias pentru jQuery.prototype. În exemplul nostru de codare de mai jos, adăugăm pluginul de numărare la jQuery.fn obiect. Procedând astfel, noi creăm propria noastră metodă jQuery personalizată care poate fi folosită pe un set înfășurat de elemente DOM.
Practic, un plugin atașat la jQuery.fn ne permite să ne creăm propriile metode personalizate similare cu cele găsite în API. Acest lucru se datorează faptului că atunci când atașăm funcția noastră de plugin jQuery.fn, funcția noastră este inclusă în lanțul prototip-$ .fn.count = funcția () -pentru obiectele jQuery create folosind funcția jQuery. Dacă vă suflă mintea, amintiți-vă că adăugați o funcție jQuery.fn înseamnă că cuvântul cheie acest în interiorul funcției plugin se va referi la obiectul jQuery în sine.
Note: Prin adăugarea unui plugin la jQuery.fn obiect, în esență, spunem că pluginul nostru ar dori să utilizeze funcția jQuery pentru a selecta un context (elemente DOM). Dacă pluginul dvs. nu necesită un context specific (cu alte cuvinte, un set de elemente DOM) în care trebuie să funcționeze, este posibil să nu fie nevoie să atașați acest plugin la $ .fn. Ar putea fi mai logic să-l adăugați ca o funcție de utilitate în spațiul de nume jQuery.
Accentsconagua
acest Este o referință la Obiectul jQuery curentCând atașați un plugin la jQuery.fn obiect, cuvântul cheie acest folosită în interiorul funcției plugin atașată se va referi la obiectul jQuery curent.
Este esențial să groconezi exact ce înseamnă cuvântul cheie acest se referă la funcția pluginului.
acest cuvinte cheieUtilizarea fiecare(), putem crea o iterație implicită pentru plugin-ul nostru. Aceasta înseamnă că, dacă setul de învelitori conține mai mult de un element, metoda pluginului nostru va fi aplicată fiecărui element din setul de învelitori.
Pentru a face acest lucru, vom folosi utilitarul jQuery fiecare() funcția, care este un iterator generic pentru ambele obiecte și matrice, practic simplificând looping-ul. În exemplul de cod de mai jos, folosim funcția pentru a itera peste obiectul jQuery. În interiorul funcției care este trecută fiecare(), cuvântul cheie acest se va referi la elementele din setul de wrapper jQuery.
Utilizarea fiecare() funcția este critică dacă doriți ca un plugin să utilizeze iterația implicită.
În mod obișnuit, majoritatea pluginurilor returnează obiectul jQuery însuși, astfel încât pluginul să nu spargă lanțul. Cu alte cuvinte, dacă un plugin nu are nevoie în mod specific să returneze o valoare, ar trebui să continue lanțul, astfel încât să se poată aplica metode suplimentare setului de învelitori. În codul de mai jos, returăm obiectul jQuery cu returnați acest lucru; astfel încât legarea să nu fie întreruptă. Observați că sunt înlănțuit pe mamă() și adăuga() după ce am sunat numara() conecteaza.
Note: Este posibil ca plugin-ul să fie o metodă distructivă, pur și simplu, să nu returneze obiectul jQuery.
Pluginurile conțin în mod obișnuit opțiuni care vor acționa ca configurație implicită de bază pentru logica pluginurilor. Aceste opțiuni sunt utilizate atunci când plugin-ul este invocat. În codul de mai jos creez a defaultOptions obiect care conține o singură proprietate (startCount) și valoarea (0). Acest obiect este stocat pe funcția de numărare $ .fn.count.defaultOptions. Facem acest lucru astfel încât opțiunile să fie configurabile din afara pluginului.
În mod obișnuit, opțiunile pluginului implicit pot fi suprascrise cu opțiuni personalizate. În codul de mai jos, trec în a customOptions Obiect ca parametru pentru funcția plugin. Acest obiect este combinat cu defaultOptions obiect pentru a crea un singur Opțiuni obiect. Utilizăm metoda utilitară jQuery extinde() pentru a combina mai multe obiecte într-un singur obiect. extinde() metoda oferă utilitatea perfectă pentru suprascrierea unui obiect cu proprietăți noi. Cu acest cod în loc, plugin-ul poate fi personalizat atunci când este invocat. În exemplu, trecem numara adăugați un număr personalizat (500) pentru a fi folosit ca punct de pornire pentru contor. Această opțiune personalizată înlocuiește opțiunea implicită (0).
Deoarece opțiunile implicite sunt accesibile din afara unui plugin, este posibil să resetați opțiunile implicite înainte de a invoca pluginul. Acest lucru poate fi util atunci când doriți să definiți propriile opțiuni fără a modifica codul pluginului în sine. Acest lucru poate simplifica invocarea plugin-urilor pentru că puteți, într-un anumit sens, să configurați pluginul în funcție de preferințele dvs., fără a lovi codul original al plugin-ului.
În funcție de natura pluginului, poate fi esențial ca un plugin să fie apelat atât normal (prin elemente și evenimente DOM), cât și programat. Luați în considerare un plugin de dialog. Vor exista momente în care modalitatea / dialogul se va deschide pe baza evenimentelor utilizatorilor. În alte cazuri, trebuie să deschideți un dialog bazat pe evenimente legate de mediu sau de sistem. În aceste situații, puteți invoca plugin-ul dvs. fără elemente din DOM, creând un element în zbor pentru a invoca pluginul. În codul de mai jos, invoc dialog () plugin la încărcarea paginii creând mai întâi un element pentru a invoca pluginul meu.
dialog, spuneți dialogul de bine, spuneți pa
Evident, ar putea exista o mulțime de variații ale acestui model în funcție de opțiunile, complexitatea și funcționalitatea pluginului. Punctul aici este că pluginurile pot fi apelate prin intermediul elementelor DOM existente, precum și cele create în zbor.
Atunci când creați pluginuri jQuery, este o idee bună să oferiți funcții de apel invers ca opțiune și să transmiteți aceste funcții contextul acest când apelul inversat este invocat. Aceasta oferă un vehicul pentru tratarea suplimentară a elementelor dintr-un set de învelitori. În codul de mai jos, trecem la o opțiune personalizată outAndInFade () plugin metoda care este o funcție și ar trebui să fie numit odată ce animația este completă. Funcția de apel inversă este trecută cu valoarea acest când este invocată. Acest lucru ne permite să folosim ulterior acest valoare în interiorul funcției pe care am definit-o. Când se invocă funcția de apel invers, cuvântul cheie se va referi la unul dintre elementele DOM conținute în setul de învelitori.
Afară și în decolorareAfară și în decolorare
