Crearea plugin-urilor jQuery (partea 1)

Scurtă introducere

Dacă te întrebi la ce or fi bune plugin-urile astea jQuery, îți voi spune eu: îți permite extinderea întregii librării jQuery prin adăugarea de noi metode și funcții la aceasta. De exemplu, ai putea crea un plugin care, printr-un singur apel, va parcurge toate link-urile unei pagini, și la fiecare link către un fișier PDF va adăuga o iconiță descriptivă. Apelul va arăta ceva în genul:

$("a").adaugaIconitaPDF();

Idei pentru plugin-uri sunt multe, prea multe chiar, și ca să te convingi poți intra pe pagina de plugin-uri jQuery unde le vei găsi ordonate după categorie. La momentul actual, acolo sunt 3684 de plugin-uri! Deci idei sunt cu tonele, și tot apar plugin-uri zi de zi. Așa că, ori poți sta să cauți plugin-ul care-ți trebuie, ori poți învăța să creezi propriile plugin-uri, lucru despre care voi discuta în următoarele câteva articole.

Să intrăm în pâine!

Pentru început, e nevoie de puțină teorie interesantă. În caz că nu știai deja, jQuery e renumit pentru faptul că poate fi folosit cu ajutorul unui singur caracter: simbolul dolar ($). De puține ori, însă, vei da peste probleme folosind simbolul $, fiindcă nu este singurul framework care face uz de acest simbol. Așa că, pentru a evita conflicte, când este cazul, se poate folosi cuvântul “jQuery“. De exemplu:

jQuery("a").fadeIn();
jQuery.variabila = 2;

Acum să îți spun și care sunt acele puține cazuri când pot apărea conflicte cu simbolul $: când creezi plugin-uri, și când folosești încă un framework împreună cu jQuery, de exemplu ExtJS + jQuery. Știind acum aceste lucruri, să începem cu plugin-urile! Pentru a putea crea plugin-uri, e nevoie să știi jQuery, evident, și care sunt obiectele extensibile din jQuery:

1. jQuery
   • se ocupă cu procesarea internă
   • extinde metode (în alte limbaje de programare sunt cunoscute ca metode statice, sau metode de clasă)
2. jQuery.fn
   • se ocupă de elemente HTML și interacțiunile dintre ele
   • extinde funcții (în alte limbaje de programare sunt cunoscute ca metode de instanță)

Ca să fiu sigur că nu mă vei pierde, îți voi explica ce reprezintă metodele și funcțiile. Dacă ai deja experiență în programarea orientată pe obiecte, poți sări peste paragraful acesta. Deci, metodele pot fi apelate direct, fără a instanția o clasă. Funcțiile, pe de altă parte, pot fi apelate doar asupra unui obiect ce reprezintă o instanță a unei clase. Dacă nu știi nici ce reprezintă instanțierea, e cazul să te oprești aici și să iei un tutorial de POO în C++ sau orice alt limbaj vrei.

Știind acum ce obiecte jQuery pot fi extinse, voi crea un simplu plugin care afișează un mesaj la încărcarea unor elemente HTML. Apelul va fi simplu:

$.mesaj("mesaj la comanda");     //metodă
$("div").mesaj("m-am incarcat"); //funcție

Și acum iată codul, trivial de altfel:

//codul pentru metodă
jQuery.mesaj = function(msg) {
   alert(msg);
};

//codul pentru funcție
jQuery.fn.mesaj = function(msg) {
   alert(msg);
}

Ți se pare complicat ? Dacă da, e grav, fiindcă în următoarele articole se mai complică, fiindcă voi discuta despre:

• variabile locale și globale
• ascunderea variabilelor
• orientarea pe obiecte
• setările plugin-urilor
• funcții cu opțiuni și parametri
• template-urile cele mai utilizate pentru plugin-uri
• și în final, o listă de guidelines, adică un mic ghid

Impresii despre jQuery

“At first I was afraid, I was petrified…” – cam așa s-ar descrie starea mea înainte de a începe să învăț jQuery. Când aud deobicei termenul framework, mă gândesc că e ceva mare, mult de învățat înainte să poți începe să-l folosești. Așa am reacționat și cu jQuery. Iar acum după ce l-am învățat, îmi spun: da’ ce prost am fost că nu l-am învățat mai demult!. Mi se pare incredibil, fenomenal, e tot ce-ți poți dori ca web designer. Ce m-a uimit este faptul că poți face cu el lucruri asemănătoare cu ce poți face în Flash!

Așadar, jQuery este cred că cel mai puternic framework posibil relativ la performanță, ușurința utilizării (chiar și a învățării), dar cel mai puternic atu pe care-l are este extensibilitatea! Este fenomenal din punctul ăsta de vedere.. poți face ce vrei cu el, din el.. simți că poți reface universul doar cu jQuery! Iar multitudinea de plugin-uri existente pentru el este de-a dreptul copleșitoare, ca să nu mai spun cât de trivial e să creezi un plugin. Ah, da, am uitat să precizez că dacă lucrurile de bază le făceai în JavaScript scriind zeci de linii, chiar sute, doar pentru o singură funcție, cu jQuery scrii cel mult 10-20 Și să nu uit că simplifică atât de mult lucrul cu Ajax!

Dacă te uiți prin API-ul său, nu vei găsi mii de funcții așa cum te-ai aștepta probabil de la un framework. Cred că nici sute de funcții nu vei găsi! Dar puterea acelor funcții la care mai adaugi și puterea cu care pot fi extinse, pur și simplu îți dă impresia că ar fi un framework gigant! Anyways.. am terminat de învățat cam tot ce ține de jQuery, și acum să te uimesc cu durata necesară învățării lui (de fapt, cât mi-a luat mie să-l învăț):

• bazele jQuery – 1 zi
• creare plugin-uri – o jumătate de zi, cel mult!
• elemente avansate de extindere a frameworkului – 2 zile (opțional pt cei care n-au ce face sau se gândesc să extindă la greu jQuery)

Observație: se presupune că ai deja ceva cunoștințe de JavaScript, fiindcă altfel nu vei pricepe nimic din jQuery!

Încă odată, facilitățile și avantajele oferite de jQuery, sau mai bine spus motivele să înveți jQuery:

1. scrii extrem de puțin cod să obții funcționalitatea pe care o implementai în sute de linii de cod JavaScript;
2. extraordinar de extensibil, și atât de ușor de extins;
3. îți oferă un mod de lucru Obiect-Orientat, făcându-ți codul să arate mult mai clar;
4. un framework foarte mic ca mărime în ciuda puterii sale;
5. face ca lucrul cu Ajax să pară joacă de copii;
6. există tone de plugin-uri pentru el;
7. poți crea efecte asemănătoare (dacă nu chiar identice) cu cele obținute în Flash!
8. are componente superbe și skinuri pentru ele;
9. durează foarte puțin să-l înveți dacă ai deja cunoștințe de JavaScript;
10. este cross-browser, așadar va funcționa la fel pe majoritatea browserelor fără ca tu să faci vreun efort!
11. îți deschide noi orizonturi și o nouă gândire în programare, la propriu!