jQuery – Best Practices #7

Înlănțuire clară

Probabil știi deja că unul din avantajele jQuery este înlănțuirea metodelor. Dacă nu știai, hai să-ți explic pe scurt cam ce e: odată ce ai folosit un selector, poți manipula acel selector într-o singură linie de cod, de exemplu:

 

 $("#container").find("#obj1").css({ opacity: 0 }).fadeTo(400, 1).end().find("#obj2") 

Așadar, toate metodele apelate mai sus vor afecta ultimul obiect HTML selectat cu jQuery. În cazul de mai sus, metoda find va acționa asupra obiectului container, apoi metodele css, fadeTo și end vor acționa toate, pe rând, asupra obiectului #obj1, ș.a.m.d. În alte limbaje de programare nu am văzut facilitatea asta, fiind nevoit să apelezi pe câte o nouă linie o altă metoda asupra aceluiași obiect.

În caz că ești curios, codul de mai sus caută obiectul HTML cu id-ul container, apoi caută printre descendenții (copii) acestuia elementul #obj1 pe care îl ascunde cu metoda css setându-i transparența maximă, apoi îl reafișează puțin câte puțin scăzând transparența într-un interval de 400ms, apoi metoda end se întoarce la ultimul obiect HTML găsit înaintea lui #obj1, și anume #container, după care caută printre descendenții săi obiectul #obj2.

Acum, revenind la oile noastre, o practică foarte bună a tuturor programatorilor este să scrie codul cât mai clar, citeț, ușor de urmărit. În cazul nostru, JavaScript ne permite scrierea codului de mai sus în felul următor:

$("#container").find(#"obj1")
                  .css({ opacity: 0 })
                  .fadeTo(400, 1)
               .end()
               .find("#obj2")

Crede-mă, te va ajuta enorm când vei umbla prin fișierele JavaScript pentru a depista erori, de exemplu, sau când vei încerca să-ți reamintești de ce ai făcut ce ai făcut.