jQuery

Kategória: Web fejlesztés.

Table of Contents

Áttekintés

A jQuery elévülhetetlen érdemeket szerzett abban, hogy ma nem olyan weboldalak vannak, amit csak ezzel vagy csak azzal a böngészővel tudunk megnézni, hanem elvileg minden böngészővel bármelyik weblapot. A történelmi küldetését betöltötte, viszont nincs rá többé szükség.

Nagy szavak ezek; lássuk, miről van szó valójában! A JavaScript történetét a JavaScript oldalon olvashatjuk; érdemes azt elolvasni. Folytatva a történetet: 2006-ben ott tartott a piac, hogy volt egy, még mindig 80%-os piaci részesedésű, ám már egyértelműen hanyatló Internet Explorer, ami nem támogatta teljes egészében a JavaScript szabványt, az akkor útjukra induló többi böngésző pedig ilyen-olyan módon támogatta azt, de közöttük is voltak eltérések. Az olyan alapvető dolgok, hogy pl. ha a felhasználó az egérrel egy kép fölé megy, azt hogyan kell kicserélni, már ugyanúgy működtek, de a HTML oldal tartalmát általánosan módosító részek - melyre különösen nagy volt az igény - nem voltak szabványosítva. És miért volt erre nagy az igény? Azért, hogy ha felhasználó végrehajt valami műveletet, amitől azt várjuk, hogy valami megváltozzon, de ne az egész oldal, akkor azt csakis úgy lehet végrehajtani, hogy a JavaScript módosítja a tartalmat. (Ezt hívjuk AJAX technológiának.) A weboldalak készítőinek tehát dönteniük kellett, hogy mely böngészőt vagy böngészőket támogatják, és többes szám esetén exponenciálisan megnőtt a szükséges munka mennyisége.

Itt jött képbe a jQuery: ez egy olyan JavaScript könyvtár, ami egységes címzést tesz lehetővé, elrejtve a fejlesztő elől a különbözőségeket. Példa a jQuery egy kezdeti verziójának forráskódjából:

// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
        // Use the handy event callback
        jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );
 
// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {
 
        // Only works if you document.write() it
        document.write("<scr" + "ipt id=__ie_init defer=true " + 
                "src=javascript:void(0)><\/script>");
 
        // Use the defer script hack
        var script = document.getElementById("__ie_init");
        script.onreadystatechange = function() {
                if ( this.readyState == "complete" )
                        jQuery.ready();
        };
 
        // Clear from memory
        script = null;
 
// If Safari  is used
} else if ( jQuery.browser == "safari" ) {
        // Continually check to see if the document.readyState is valid
        jQuery.safariTimer = setInterval(function(){
                // loaded and complete are both valid states
                if ( document.readyState == "loaded" || 
                        document.readyState == "complete" ) {
 
                        // If either one are found, remove the timer
                        clearInterval( jQuery.safariTimer );
                        jQuery.safariTimer = null;
 
                        // and execute any waiting functions
                        jQuery.ready();
                }
        }, 10);
}

jQuery nélkül a webfejlesztőknek is ehhez hasonlót kellett írniuk. A jQuery viszont jelentősen leegyszerűsítette az egyes HTML elemek elérését: bevezették a $ jelölést, pl. a $("#myElementId") a paragrafusokat jelentette, és ez működött mindegyik akkori böngészővel.

De mit értünk az alatt, hogy betöltötte a történelmi küldetését? Nincs már rá szükség? Nincs, az alábbi okok miatt:

  • A JavaScript szabvány maga ad megoldást a HTML elemek elérésére: pl. a document.getElementById("myElementId") ugyanazt csinálja, immár szabványos módon, mint a fent említett jQuery megoldás.
  • Az Internet Explorer részesedése drasztikusan lecsökkent, és szinte csak amiatt nem nulla, mert a nagyobb cégeknél szabványként írják elő, hogy azt is kell támogatni.
  • A legújabb Internet Explorer böngészők már egész jól támogatják a szabványokat.

Egy dolgot még hozzáteszek: a JavaScript szabvány szerencsére a kód olvashatóságára is adott: a jQuery esetében szemmel láthatóan az volt a cél, hogy legyen egy mindenhol működő megoldás, és a kód legyen tömör, viszont mindez az olvashatóság kárára ment. Ha nem ismerném a jQuery-t, akkor fogalmam sem lenne arról, hogy a $("#myElementId") mit jelent, míg a document.getElementById("myElementId") jelentése a Napnál is világosabb.

Két okból viszont fontosnak tartottam ennek a leírásnak az elkészítését:

  • A történelmi hűség kedvéért; így teljes a kép.
  • A gyakorlatban is szükség lehet rá, pl. régi weboldalak karbantartása során.

TODO: kidolgozni

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License