jQuery története és öröksége

jQuery története és öröksége
jQuery - ez a legnépszerűbb a világon egy JavaScript-könyvtár. A webfejlesztő közösség a 2000-es évek végén hozta létre, így a jQueryt használó webhelyek, bővítmények és keretrendszerek gazdag ökoszisztémáját eredményezte.

Az utóbbi években azonban a webfejlesztés első számú eszközeként való státusza megromlott. Nézzük meg, miért lett népszerű és miért ment ki a divatból a jQuery, illetve azt is, hogy milyen esetekben célszerű még felhasználni modern weboldalak készítéséhez.

A jQuery rövid története

John Resig (Resig János) létrehozta a könyvtár első verzióját 2005-ben, és 2006-ban jelent meg-m, a BarCampNYC nevű rendezvényen. Tovább jQuery hivatalos weboldala a szerző ezt írta:

A jQuery egy Javascript-könyvtár, amelynek mottója: A Javascript kódolása szórakoztató legyen. A jQuery elvégzi a gyakori, ismétlődő feladatokat, eltávolítja az összes felesleges jelölést, és rövidebbé, elegánssá és letisztulttá teszi őket.

A jQuerynek két fő előnye van. Az első egy kényelmes API a weboldalak manipulálására. Különösen hatékony módszereket kínál az elemek kiválasztásához. Nem csak azonosító vagy osztály alapján választhat, a jQuery lehetővé teszi összetett kifejezések írását, például elemek kiválasztását a többi elemmel való kapcsolatuk alapján:

// Select every item within the list of people within the contacts element
$('#contacts ul.people li');

Idővel a kiválasztási mechanizmus külön könyvtár lett Sistereg.

A könyvtár második előnye az volt, hogy absztrahálta a böngészők közötti különbségeket. Azokban az években nehéz volt olyan kódot írni, amely minden böngészőben megbízhatóan működött.

A szabványosítás hiánya miatt a fejlesztőknek figyelembe kellett venniük a böngészők és az éles esetek közötti számos különbséget. Vessünk egy pillantást ez a korai jQuery forráskód és keresse meg a jQuery.browser kifejezést. Íme egy példa:

// 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);
}

A jQuery-nek köszönhetően a fejlesztők mindezen buktatókkal kapcsolatos aggodalmakat a könyvtárat fejlesztő csapat vállára háríthatják.

Később a jQuery megkönnyítette az összetettebb technológiák, például az animációk és az Ajax megvalósítását. A könyvtár gyakorlatilag a webhelyek szokásos függőségévé vált. Manapság pedig az internet hatalmas részét uralja. A W3Techs ezt hiszi Ma a webhelyek 74%-a használja a jQuery-t.

A jQuery fejlesztés irányítása is formalizáltabbá vált. 2011-ben a csapat létrehozta a jQuery Boardot. 2012-ben pedig a jQuery Board jQuery Foundation néven alakult át.

2015-ben a jQuery Alapítvány egyesült a Dojo Alapítvánnyal, a JS Foundation létrehozásához, amely aztán egyesült a Node.js alapítvánnyal 2019-m létrehozni OpenJS Alapítvány, amelyen belül a jQuery volt az egyik „áttörést jelentő projektek. »

Változó körülmények

Az utóbbi években azonban a jQuery elvesztette népszerűségét. GitHub eltávolította a könyvtárat a webhelyem előlapjáról. Bootstrap v5 megszabadulni a jQuery-tőlmert az övé"legnagyobb kliensfüggőség a normál JavaScripthez"(jelenleg 30 KB méretű, kicsinyítve és csomagolva). A webfejlesztés számos trendje gyengítette a jQuery alapvető eszközként való pozícióját.

Браузеры

A böngészők közötti különbségek és korlátozások számos okból kevésbé fontosak. Először is, a szabványosítás javult. A nagyobb böngészőfejlesztők (Apple, Google, Microsoft és Mozilla) együtt dolgoznak a fejlesztésen webes szabványok keretek között Webes hipertext alkalmazástechnológiai munkacsoport.
Bár a böngészők még mindig számos fontos szempontból különböznek egymástól, a szállítóknak legalább lehetőségük van keresésre és közös adatbázis létrehozására. állandó háború együtt. Ennek megfelelően a böngésző API-k új képességekre tettek szert. Például, Fetch API képes helyettesíteni az Ajax függvényeket a jQuery-ből:

// jQuery
$.getJSON('https://api.com/songs.json')
    .done(function (songs) {
        console.log(songs);
    })

// native
fetch('https://api.com/songs.json')
    .then(function (response) {
        return response.json();
    })
    .then(function (songs) {
        console.log(songs);
    });

mód querySelector и querySelectorAll duplikált jQuery választó:

// jQuery
const fooDivs = $('.foo div');

// native
const fooDivs = document.querySelectorAll('.foo div');

Most már manipulálhatja az elemosztályokat a használatával osztálylista:

// jQuery
$('#warning').toggleClass('visible');

// native
document.querySelector('#warning').classList.toggle('visible');

Az oldal Lehet, hogy nincs szüksége a jQuery-re Íme néhány további helyzet, amikor a jQuery kód natív kóddal helyettesíthető. Egyes fejlesztők mindig ragaszkodnak a jQuery-hez, mert egyszerűen nem tudnak az új API-król, de amikor ismerik, ritkábban kezdik használni a könyvtárat.

A natív funkciók használata javítja az oldal teljesítményét. Sok animációs effektusok a jQuery-től most már megvalósíthatja sokkal hatékonyabb CSS használatával.

A második ok az, hogy a böngészők sokkal gyorsabban frissülnek, mint korábban. A legtöbben használják „örökzöld” megújulási stratégia, az Apple Safari kivételével. Frissíthetők a háttérben a felhasználó közreműködése nélkül, és nincsenek az operációs rendszer frissítéseihez kötve.

Ez azt jelenti, hogy az új böngészőfunkciók és a hibajavítások sokkal gyorsabban terjesztésre kerülnek, és a fejlesztőknek nem kell várniuk, amíg a Használhatom elfogadható szintet fog elérni. Magabiztosan használhatják az új funkciókat és API-kat a jQuery vagy a polyfill letöltése nélkül.

A harmadik ok az, hogy az Internet Explorer a teljes irreleváns állapotához közeledik. Az IE régóta a webfejlesztés veszélye világszerte. A hibák széles körben elterjedtek, és mivel az IE uralta a 2000-es éveket, és nem használt örökzöld frissítési stratégiát, a régebbi verziók még mindig gyakoriak.

2016-ban a Microsoft felgyorsította az IE leszerelését, támogatásának megszűnése tizedik és korábbi verziók, az IE 11-re korlátozva a támogatást. A webfejlesztők pedig egyre gyakrabban élvezik azt a luxust, hogy figyelmen kívül hagyják az IE-kompatibilitást.

Még a jQuery is leállította az IE 8 és régebbi verziók támogatását 2.0. verzió, 2013-ban jelent meg. És bár bizonyos esetekben továbbra is szükség van az IE támogatására, például a régebbi webhelyeken, ezek a helyzetek egyre ritkábban fordulnak elő.

Új keretek

A jQuery megjelenése óta számos keretrendszert hoztak létre, beleértve a modern vezetőket is Reagál, szögletes и Vue. Két fontos előnyük van a jQuery-vel szemben.

Először is megkönnyítik a felhasználói felület komponensekre történő szétválasztását. A keretrendszereket úgy tervezték, hogy kezeljék az oldalak megjelenítését és frissítését. A jQuery-t pedig általában csak frissítésre használják, a kezdeti oldal biztosítását a szerverre bízva.

Másrészt a React, Angular és Vue összetevők lehetővé teszik a HTML, a kód és a CSS szoros összekapcsolását. Ahogyan a kódbázist számos önálló függvényre és osztályra osztjuk, az interfész újrafelhasználható komponensekre való felosztása megkönnyíti az összetett webhelyek felépítését és karbantartását.

A második előny az, hogy az újabb keretrendszerek egy deklaratív paradigmához ragaszkodnak, amelyben a fejlesztő leírja, hogyan nézzen ki az interfész, és a keretre bízza a kívánt változtatások elvégzését. Ez a megközelítés ellentétes a jQuery kódra jellemző kötelező megközelítéssel.

A jQuery alkalmazásban kifejezetten le kell írni a változtatások lépéseit. De deklaratív keretben azt mondod: "Ezek az adatok szerint a felületnek így kell kinéznie." Ez nagyban megkönnyítheti a hibamentes kód írását.

A fejlesztők új megközelítéseket alkalmaztak a webhelyfejlesztés terén, ezért csökkent a jQuery népszerűsége.

Mikor kell használni a jQuery-t?

Így amikor kell, hogy legyen jQuery-t használsz?

Ha a projekt összetettsége növekszik, akkor jobb egy másik könyvtárral vagy keretrendszerrel kezdeni, amely lehetővé teszi a komplexitás ésszerű kezelését. Például ossza fel az interfészt komponensekre. A jQuery használata ilyen webhelyeken elsőre jól néz ki, de gyorsan spagetti kódhoz vezet, ahol nem biztos benne, hogy melyik töredék befolyásolja az oldal melyik részét.

Voltam már ilyen helyzetben, amikor megpróbálok változtatni, nehéz feladatnak érzem. Nem lehet biztos benne, hogy nem tör el semmit, mert a jQuery szelektorok a szerver által generált HTML-struktúrától függenek.

A skála másik végén olyan egyszerű webhelyek állnak, amelyek csak egy kis interaktivitást vagy dinamikus tartalmat igényelnek. Én ezekben az esetekben sem használnám alapértelmezésben a jQuery-t, mert a natív API-kkal sokkal többet lehet csinálni.

Ha kell is valami erősebb, akkor is keresek szakkönyvtárat, pl. Axios az Ajaxnak ill Animate.css animációkhoz. Ez könnyebb lesz, mint az összes jQuery betöltése egy kis funkcióhoz.

Úgy gondolom, hogy a jQuery használatának legjobb indoka az, hogy átfogó funkcionalitást biztosít a webhelyek kezelőfelületéhez. Ahelyett, hogy különféle natív API-kat vagy speciális könyvtárakat tanulna meg, csak a jQuery dokumentációját olvashatja, és azonnal termelékeny lesz.

Az imperatív megközelítés nem skálázható jól, de könnyebben megtanulható, mint más könyvtárak deklaratív megközelítése. Egy egyértelműen korlátozott képességekkel rendelkező webhelyen jobb a jQuery használata és nyugodt munka: a könyvtár nem igényel bonyolult összeállítást vagy fordítást.

Ezenkívül a jQuery akkor is jó, ha biztos abban, hogy webhelye idővel nem válik bonyolulttá, és ha nem törődik a natív funkciókkal, amelyek minden bizonnyal több kódot igényelnek, mint a jQuery.

Ezt a könyvtárat akkor is használhatja, ha támogatnia kell az IE régebbi verzióit. Akkor a jQuery úgy fog szolgálni, mint annak idején, amikor az IE volt a legnépszerűbb böngésző.

kutatására

A jQuery nem tűnik el egyhamar. Ő aktívan fejlődik, és sok fejlesztő előszeretettel használja API-ját, még akkor is, ha natív módszerek állnak rendelkezésre. A könyvtár fejlesztők egész generációját segítette olyan webhelyek létrehozásában, amelyek bármilyen böngészőn működnek. Bár sok tekintetben új könyvtárak, keretrendszerek és paradigmák váltották fel, a jQuery rendkívül pozitív szerepet játszott a modern web létrehozásában.

Hacsak a jQuery funkcionalitása nem változik jelentősen, valószínű, hogy a könyvtár használata lassan, de folyamatosan csökkenni fog a következő néhány évben. Az új webhelyek kezdettől fogva modernebb keretrendszerek felhasználásával készülnek, és egyre ritkábbak a jQuery megfelelő felhasználási esetei.

Vannak, akik nem szeretik a webfejlesztő eszközök elavulásának ütemét, de számomra ez a gyors fejlődés bizonyítéka. A jQuery lehetővé tette számunkra, hogy sok mindent jobban csináljunk. Ugyanez igaz az utódaira is.

Forrás: will.com

Hozzászólás