Verifică dacă un element este disponibil

În unele situații vrei să execuți un script doar dacă un anumit element este diponibil. De exemplu, vrei să execuți o anumită bucată de cod în funcție de ce pagină este încărcată (presupunând că ai același fișier js peste tot, desigur).

De ce să execuți un script doar dacă un element este disponibil? Foarte simplu! Din motive de performanță. jQuery nu știe dacă un element este în DOM decât dacă traversează tot DOM-ul. Și dacă încerci să cauți mai multe elemente inexistente, poți avea probleme de performanță. Prin urmare am găsit următorul script:

jQuery.fn.rdy = function(func){
	this.length && func.apply(this);
	return this;
};

Și îl apelezi foarte simplu:

$('div#verifica').rdy(function(){
//do stuff;
});

Simplu și eficient! :D

4 Comentarii to “Verifică dacă un element este disponibil”

  1. Si eu sunt fan jQuery, insa daca dai pur si simplu

    $(‘#test”).animate(…);

    Si elementul nu e in pagina. Pur si simplu… trece peste (spre deosebire de MooTools).

  2. Staicu Ionuț-Bogdan

    Alex, mulțumesc pentru comentariu.

    Gândește-te la următoarea structură:

    #div1 {
     #div2 
      #div3
       #div4
    }
    

    #div1 le conține pe toate. Și tu ai pe fiecare element câte ceva de făcut. Dacă verifici așa $(‘#div1’).rdy() iar elementul nu e gata, nu va mai căuta în DOM, sărind restul elementelor.

    Dacă faci cum zici tu, de fiecare dată va căuta toate cele patru elemente. Poate nu e problemă la 2-3 elemente. La o structură ceva mai bogată însă, se va simți cu siguranță (mai ales pe browsere mai retardele :P )

  3. @Alex: Doar pentru ca jQuery e mai prietenos si trece peste, nu inseamna ca e bine sa faci asta.

  4. Ionuț Botizan

    @Alex
    Este util atunci când de existența unui element depinde manipularea altor elemente.

    $('div#verifica').rdy(function(){
       this.show();
       $('#altceva').hide();
    });
    

    Cât despre MooTools și jQuery, cele 2 framework-uri au filozofii complet diferite. jQuery nu se atinge de DOM în timp ce MooTools extinde direct elementele din DOM.

    Funcția $() în jQuery returnează un obiect jQuery, de aceea funcțiile din jQuery (animate(), hide(), css(), etc.) sunt disponibile indiferent de numărul elementelor găsite și nu va fi generată nici o eroare de JavaScript.

    Funcția $() în MooTools va returna direct elementul din DOM, extins cu funcțiile definite de MooTools. Dacă nu a fost găsit nici un element cu ID-ul precizat, atunci funcția va returna null și de aceea script-ul va crăpa dacă încerci să aplici (de exemplu) o animație unui obiect null.
    Dacă folosești însă funcția $$(), atunci va funcționa exact ca în jQuery și scriptul va rula normal, chiar dacă nu a fost găsit nici un element.

    jQuery:

    $('#există') //returnează un obiect jQuery populat
    $('#nuExistă') //returnează un obiect jQuery gol
    

    MooTools:

    $('există') //returnează elementul DOM cu ID-ul "există"
    $('nuExistă') //returnează null
    
    $$('#există') //returnează un array (extins de MooTools) populat cu elementul DOM cu ID-ul "există"
    $$('#nuExistă') //returnează un array (extins de MooTools) gol
    

    Celor 2 array-uri din ultimele exemple le poți apela funcția addClass() să zicem, indiferent de numărul obiectelor pe care le conțin, pentru că un array e tot un array, chiar dacă-i gol.

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter