Tase.ro

Proiectul meu actual de la noul loc de munca este sa fac site-urile companiei sa mearga cross-browser. O ocazie perfecta de a testa cateva frameworkuri de Javascript de care am tot auzit (in mare pe Ajaxian), dar pe care nu am avut ocazia sa le folosesc.

Primele doua pe care le-am incercat au fost Prototype si Dojo Toolkit, fiind cele mai complete solutii la ora actuala. Contrar asteptarilor,  nu am incercat partea de Ajax, pentru ca nu am nici un proiect in lucru care sa beneficieze de asa ceva. Ma intereseaza mai mult partea de evenimente si manipulare a DOM-ului, pentru a decupla cat mai mult JS-ul de restul continutului si a lucra cat mai neinvaziv cu putinta.

Intr-un final am ales Dojo pentru ca este in general mult mai completa si are functii avansate despre care puteti afla cel mai bine ascultand interviul cu Alex Russel din podcasturile Ajaxian.

Selectarea elementelor din DOM

Indiferent de libraria pe care as fi ales-o, nici una nu beneficiaza de suport intern pentru selectarea elementelor din DOM folosind selectori CSS. Cele mai cunoscute metode sunt Behaviour si cssQuery (independente de framework), degrader (permite folosirea de expresii regulate), event:Selectors (integrat cu Prototype) si jQuery.

Acestea permit, de la caz la caz, gasirea elementelor pe baza selectorilor CSS (cssQuery) aplicarea de metode pe toate aceste elemente, sau atasarea directa de evenimente (Behaviour, event:Selectors).

jQuery

Cea mai placuta surpriza am avut-o experimentand un pic cu jQuery. Ceea ce parea la inceput o alta metoda de a cauta elementele din pagina, este de fapt o mini-librarie cu functii foarte utile care permite obtinerea majoritatii efectelor din framework-urile in toata regula cu un minim de cod. De fapt, asta e punctul forte al jQuery.

Exemplul pe care il voi da (inspirat de Suckerfish dropdowns) este un caz clasic pentru ceea ce inseamna progressive enhancement cu ajutorul javascript. Dupa cum stim, Internet Explorer nu suporta pseudo-clasa :hover decat pentru elementul a (linkuri), insa pentru CSS-uri avansate am avea nevoie de el pentru mult mai multe elemente. Solutia cea mai buna este de a defini in CSS o clasa "virtuala" pentru IE, care este aplicata elementelor vizate in mod dinamic, prin intermediul evenimentelor onMouseOver si onMouseOut. Pentru un buton CSS-ul ar arata cam asa:

input.button {
    border: 1px solid green;
    background-color: lightgreen;
    color: green;
}
input.button:hover, input.button.sfhover {
    background-color: green;
    color: lightgreen;
    cursor: pointer;
}

Iata cum ar arata codul Javascript in varianta folosirii Dojo+Behaviour (de notat ca nu putem folosi selectori multipli):

var myrules = {
    'input.button': function(el) {
        dojo.event.connect(el, 'onmouseover', function(evt){
            dojo.html.addClass(el, 'sfhover');
        });
        dojo.event.connect(el, 'onmouseout', function(evt){
            dojo.html.removeClass(el, 'sfhover');
        });
    }
}
Behaviour.register(myrules);

Si iata cum se face acelasi lucru cu jQuery:

$('input.button').hover(function(){
    $(this).addClass('sfhover');
}, function() {
    $(this).removeClass('sfhover');
});

In afara de avantajele unei solutii integrate (o librarie de 10K in loc de 2 insumand cateva sute de K) si de faptul ca scriem cod mult mai putin, jQuery este chiar mai avansat, pentru ca functia $() prin care se selecteaza elementele din pagina suporta cautarea de elemente multiple — $('input.button, #nav li') — sau chiar fragmente de cod XPath, lucru nesuportat de Behaviour.

Un mare avantaj este ca daca dorim sa folosim toate functiile oferite de un framework complex, cum este Dojo, putem folosi jQuery doar pentru functiile avansate de selectare, acesta conlucrand foarte bine cu Dojo. Iata o combinatie intre cele de mai sus, in care jQuery a luat locul Behaviour (sa presupunem ca jQuery nu ofera functiile add si remove class):

$('input.button, #nav li').hover(function(){
    dojo.html.addClass(this, 'sfhover');
}, function() {
    dojo.html.removeClass(this, 'sfhover');
});