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

Programare Orientata pe Obiecte folosind jQuery

Zilele trecute am dat fără să vreau peste un articol legat de MooTools, un alt framework JavaScript. În articolul respectiv erau lăudate capabilitățile OO ale acestui framework. Se pare ca MooTools este un framework foarte orientat pe obiecte, ba mai mult, se pare că încurajează la maxim folosirea programării orientate pe obiecte (POO), lucru care m-a fascinat pe loc! Așadar, am început să răscolesc prin acest framework și am realizat că nu era nici pe departe la fel de tare ca jQuery. E drept că tot ce face jQuery se poate face și cu MooTools, însă nu la fel de repede și de ușor. Și aici au început problemele!

Mie îmi place la nebunie POO, iar jQuery se știe deja că nu oferă mai deloc suport pentru POO. Singura legătură pe care o are cu POO este funcția extend care este folosită deobicei la crearea plugin-urilor. În rest, nimic! Nu clase, nu interfețe, nu moștenire… toate se pot obține doar prin folosirea unor principii JavaScript care îți dau impresia că ai programa pe obiecte. Chiar și în JavaScript, POO este mai mult o improvizație posibilă datorită facilităților extraordinare ale acestui limbaj extrem de extensibil.

Revenind la jQuery și POO.. mi-a plăcut atât de mult MooTools din cauza acestui fapt, și m-am gândit: oare nu e posibil să amestec MooTools cu jQuery ? După îndelungi căutări, aflu că pot fi oarecum amestecate, în sensul că ești nevoit să separi codul MooTools de codul jQuery, lucru care nu mă ajută absolut deloc. Eu vreau să pot folosi cod jQuery în cod MooTools, beneficiind astfel de facilitățile OO oferite de cel din urmă. Eh, am dat și peste plugin-uri jQuery care încearcă să ofere astfel de facilități, dar sunt cam varză.

Demoralizat după atâtea căutări zadarnice, când să renunț dau peste ceva numit DUI (Digg User Interface). Se pare că cei de la Digg s-au trezit în aceeași situație în care mă aflu eu acum, iar ca rezolvare au considerat că mai bine să implementeze ei un model OO pentru jQuery, sub numele DUI. Evident, au reușit, însă nu este ce-mi doream eu. De ce ? Fiindcă este o soluție destul de rudimentară, adică oferă suport doar pentru clase, singleton, și cam atât. Eu am nevoie de interfețe, moștenire, ș.a.m.d. Ce mă fac ? Digg a spus clar că framework-urile JS OO nu s-au dovedit a fi o soluție practică.

După mai multe căutări, am dat în cele din urmă peste o librărie JS care oferă facilități OO adevărate: JS.Class. Este exact ce aveam nevoie: are suport pentru clase, interfețe, moștenire, reflexii, și câte și mai câte. În sfârșit mi-am găsit pacea! Acum mai urmează să văd ce poate face și să-l scot la un test drive