JQuery diétával Bevezetés a Zepto JavaScript könyvtárba
A klasszikus informatikusok számára rendkívül vicces jQuery és JavaScript vitákon kívül meg kell jegyezni, hogy a jQuery nem más, mint kicsi. A tartalomszolgáltató hálózatok idején ez nem biztos, hogy különösebb jelentőségű: Ha egy népszerű CDN-ből széles körben használt könyvtárat vesz fel, akkor egy másik webhelyre támaszkodva biztosíthatja, hogy a fájl már a felhasználó böngészőjének gyorsítótárában legyen. A gyakorlatban azonban mindig vannak olyan helyzetek, amikor a maximális teljesítmény fontos. Erre példa lehet a JavaScript-alapú folyamatszámítógépek, ahol a rendelkezésre álló kódmemória nem korlátlan, és hogy a gyenge CPU minden kilobájt kódtól (kulcsszó kezdési idejétől) függ-e. Ezenkívül mindig vannak olyan forgatókönyvek, amelyekben a tartalomszolgáltató hálózatok nem engedélyezettek, vagy amelyekben a fejlesztőnek támogatnia kell azokat a böngészőket, amelyekre a jQuery már nem terjed ki idővel.
Ebben a pillanatban a Zepto nevű könyvtár órája sztrájkol (rovat: „A kézi számítógépes programozó kedvese”). A Thomas Fuchs által 2010-ben tervezett projekt örökzöld a JavaScript-világban, és nagyjából kompatibilis a jQuery-vel. Mindenekelőtt azonban a termék 5 vagy 10 KB fordított kóddal kezel, a konfigurációtól függően.
Ez a cikk rövid bemutatást nyújt a könyvtárról. És a nagyon kompakt felépítésnek köszönhetően itt még reális lehetőségünk is van a termék egészének lefedésére.
Kézi számítógépes programozók kedvence
Thomas Fuchs eredetileg a Zepto-t egy lecsupaszított alternatívának szánta a PhoneGap-tal való együttműködéshez. Nagyon érdekes kompatibilitási lista következik ebből a tényből. A klasszikusok mellett a könyvtár nagyrészt néhány ritkább operációs rendszert is támogat. Néhány különösen érdekes jelölt a Palms WebOS, az Android régebbi verziói, a BlackBerry 10, sőt a Safari régi verziói az iOS-hez.
A Zepto magmodul miniatürizált mérete mindössze öt kilobájt. Mindig vannak olyan esetek, amikor az alábbi cikkben tárgyalt bővítő modulokra nincs szükség, és ezért öt kilobájtos fájlmérettel valóban meg tudnak jönni.
A moduláció kérdése
Amikor e sorok írójának sok évvel ezelőtt le kellett szerelnie egy analóg számítógépet, amelyet Telefunken készített egy harmadik osztályú osztrák műszaki egyetemen, csodálta a pusztítás alatt álló számtani fenevad rendkívül moduláris felépítését. Ez egy olyan rendszer volt, amelyet valóban fel lehetett bontani az egyes részekre. A javításhoz és az értékesítéshez egyaránt hasznos Telefunken képes volt kihagyni a szükségtelen alkatrészeket, hogy olcsóbban tudja ajánlani a teljes rendszert.
A Zepto-nál hasonló koncepcióra támaszkodnak. A könyvtár jó tucat modulból áll, amelyeket röviden összefoglal az 1. táblázat.
| zepto | Core modul | Igen |
| esemény | Bővítmények az eseményvezérelt programozáshoz | Igen |
| ajax | XMLHttpRequest | Igen |
| alak | Módszerek az űrlapok sorosításához | Igen |
| azaz | Internet Explorer 10 támogatás | Igen |
| érzékeli | A böngésző és a gazdagép operációs rendszerének észlelése | Nem |
| fx | "Animálás ()" módszer | Nem |
| fx_methods | Előre definiált animációs minták az Animációhoz | Nem |
| eszközök | Jobb memóriakezelés iOS-hez; kísérleti | Nem |
| adat | "Data ()" módszer | Nem |
| elhalasztották | Az ígéretek felhasználásának lehetősége | Nem |
| visszahívások | Kiterjeszti a "$ .Callbacks" lehetőséget a halasztott módban történő munkavégzés lehetőségével | Nem |
| választó | A jQuery CSS-választóinak egy részhalmazát emulálja | Nem |
| érintés | Alapvető érintőképernyős könyvtár | Nem |
| gesztus | Gesztusfelismerés a nagyítással | Nem |
| Kazal | Módszer láncolás | Nem |
| ios3 | A segítő funkciók nem valósultak meg az iOS 3 alatt | Nem |
1. táblázat: A Zepto moduljai
A saját Zepto verziójuk iránt érdeklődő fejlesztők kétféleképpen érik el ezt a magas célt: Először a teljes forráskód letölthető annak érdekében, hogy a csomópont alapú eszközök segítségével összeállítsák saját verziójukat. Alternatív megoldásként a zepto készítő is használható, amely bármely webböngészőben történő megnyitás után az in 1. ábra a képernyőn látható felhasználói felület.
1. ábra A zepto készítőnek köszönhetően a fejlesztőknek nem kell küzdeniük a csomópont parancssorával
Az egyszerűség kedvéért ezen a ponton továbbra is a szabványos terjesztéssel akarunk dolgozni, amelyet az építtető alapértelmezett beállításokkal szállít, vagy alternatívaként közvetlenül a projekt webhelyéről is letölthető.
A következő lépésekhez a tömörített verziót akarjuk használni. A megnyomásakor a fájl a zepto.min.js fájl, és új tulajdonosokra vár. Töltse le egy könnyen elérhető helyre a fájlrendszeren, és a következő lépésben hozzon létre egy tesztköteget az 1. listában látható kóddal.
Ez - nagyon egyszerű - példa a könyvtár néhány érdekes elemét szemlélteti. Először is, a termék mindig beállít egy Zepto nevű globális változót, amely a könyvtár kódjára mint egészre hivatkozik. Másodszor, a funkciók átvitele a Zepto-ba azt eredményezi, hogy a referenciák egy belső memóriában tárolódnak, amelyet a DomContentLoaded esemény bekövetkezése után dolgoznak fel.
Az esemény bekövetkezése után beírt funkciókat eközben a keretrendszer azonnal végrehajtja. Ha a Zepto (function ($), amely szintén egy Zepto (function ($) hevederben) egy másik üzenetdobozt helyez el, két üzenet jelenik meg a képernyőn:
Ez az első pillantásra furcsa viselkedés annak a ténynek köszönhető, hogy a keretrendszer az F1 feldolgozása után már teljesen inicializálódik, és ezért azonnal végrehajtja a megadott hasznos terhet. Szerencsésen a "belső" üzenetdoboz még itt is megjelenik a kint lévő kollégád előtt.
A Zepto abban különbözik a jQuery-től, hogy csak akkor tölti be a dollárjelet a saját kódjával, ha a változó szabad a könyvtár betöltésekor. Ez gondokhoz vezet, különösen a könyvtárakkal való interakcióban, mert ezek is bekerülnek a heves vitatott dollár névtérbe. Ha további információt szeretne erről, legyen z. Lásd például Peter Kinmond GitHub oldalát.
A Zepto fő és állami feladata biztosan a DOM-objektumok kezelése. Ennek a szolgáltatásnak a kipróbálásához hozzá kell adnunk néhány tesztelemet az elem törzséhez. Első példaként nézzük meg a csoportot
A jQueryhez szokott fejlesztők észrevesznek néhány dolgot, amelyeket ismerniük kell: A dollárjel elfogadja azokat a karakterlánc-paramétereket is, amelyek szelektorokként ismertek, és lehetővé teszik a DOM-fával való kompakt interakciót.
Itt adjuk át a div karakterláncot, hogy utasítsuk a keretrendszert, hogy nyújtson mindegyik tömböt
A sokszínűség számít - online marketing 2020
Astrid Kramerrel (Astrid Kramer Consulting)
A magánélethez való jog - lehetőség az UX számára
Lutz Schmitt-szel (Lutz Schmitt Design & Consulting)
A strukturált adatok bosszúja
Stephan Cifkával (Performics Germany GmbH)
Itt érdekes, hogy a keretrendszer három paramétert ad meg. A tényleges aktuális elem és egy folyamatos indexváltozó mellett a Zepto kényelmi okokból hivatkozást is ad a fő mezőre a logika megvalósításának megkönnyítése érdekében.
A tényleges hasznos teher megtalálható a korpuszban. A Zepto azonban itt egy kis csapdát helyez el, amely meghiúsítja a tapasztalatlan fejlesztőket. A keretrendszer normál JavaScript elemeket ad vissza az iterátorokban, amelyek természetesen nem teszik közzé a Zepto által deklarált különféle funkciókat és módszereket. Ezért az első lépésben a $ (item) szintaxist kell használnunk, hogy Zepto objektumot hozzunk létre a beküldött DOM elemből. Ezután a html () kompatibilis a Zepto saját funkciójával. Egyébként: Töltse be a kész programot egy általa választott böngészőbe, hogy élvezhesse a különböző számok sorozatát.
Különböző kis segítők
Ebben az összefüggésben vegye figyelembe, hogy a Zepto által szállított DOM-elemző csak a jQuery-ben megvalósított funkciók és paraméterek egy részhalmazát tartalmazza. A CSS-függő fejlesztők számára különösen idegesítő korlátozás a jQuery-ből ismert stíluslapokon alapuló választó kiterjesztések hiánya. Ha feltétlenül a programban részletesen leírt funkciókat kell használnia, akkor visszatérhet a választónak nevezett modulhoz. Kérjük, vegye figyelembe, hogy a termék ezen részét kísérleti jelleggel emlegetik, és a mobil szektorban hagyományosan meglehetősen gyengén és jobban működik.
A DOM elemző mellett a Zepto központi modulja számos egyéb kiegészítő funkciót is kínál. Például az isX módszerek mindig népszerűek, amelyekkel ellenőrizheti, hogy egy bizonyos elem bizonyos típusú-e:
Ezen funkciók egyszerűsége miatt nem kívánunk itt példát megvalósítani. Sokkal érdekesebb tovább elemezni a magmodulban található DOM manipulációs funkciókat. A scrollLeft és a scrollTop használatával olyan módszerek csoportja létezik, amelyek lehetővé teszik a görgetés pozíciójának meghatározását és programozott befolyásolását a képernyőn.
Egy másik vicces segítő neve Grep: $ .grep (items, function (item)< … >) ⇒ tömb. A Unix-ban tapasztalt fejlesztők kitalálhatják, mi következik itt: A mező mellett a metódus visszahívási függvényt kap, amelyet a tömb minden eleméhez meghívnak. A kapott tömb ekkor azoknak az elemeknek a mezője, amelyekre a visszahívás igaz lett - ez egy jó eszköz a mezők bonyolításához bonyolult kritériumok alapján.
Ted üdvözletét küldi
Ted Faison eseményközpontú programozással kapcsolatos észrevételeinek mára már klasszikusnak kell lenniük. A megfelelő könyv még jó tíz évvel az első megjelenése után is eladó. A Zepto szabványos disztribúciót egy eseménykezelő rendszerrel is szállítják, amely megmenti a fejlesztőket más keretrendszerek, például a Radio.js és Co.
Itt egy kis eseményorientált programot is szeretnénk megvalósítani. Ehhez hozzon létre egy új verziót a fent kinyomtatott tesztkötegből, amelyet most el kell látni egy gombbal. Mivel a gombok deklarálása nem tartozik a rendszer technológia nagy rejtelmeibe, itt nem nyomtatjuk ki a szükséges kódot.
Ehelyett vessünk egy pillantást az eseményforrásokra. A Zepto támogatja a DOM-ban található eseményeket, valamint a fejlesztő által létrehozott eseményeket. Itt egy házi készítésű rendezvénnyel szeretnénk kezdeni. A keretrendszer a $ .Event metódussal van regisztrálva:
Az első paraméter, amelyet a metódusnak átadunk, egy karakterlánc, amely meghatározza az esemény nevét. Az eseményforrások és az eseménysüllyedések összehasonlítása kizárólag karakterlánc-összehasonlítással történik. A második mező meghatározza az esemény elosztási módját. Ezen a ponton deaktiváljuk a pezsgő funkciót, amely nyilvánvalóan csak részben működött a sajtónyomás idején.
A következő pontban van egy kis különlegesség. Elvileg az eseményeket csak a dokumentumobjektum-modell segítségével lehet feltérképezni. Ez azt jelenti, hogy az eseményforrásoknak és az eseményelnyelőknek elvileg kapcsolódniuk kell egy DOM elemhez.
A probléma kiküszöbölése érdekében célszerű a házon belüli eseményeket "gyűjtési objektumban" tárolni. A dokumentum törzs erre alkalmas, ezért használjuk az eseménykezelő bejelentkezéséhez az erre a célra biztosított on módszer segítségével:
A következő lépésben regisztráljuk a gomb kattintási eseményét, amely a DOM-hoz tartozik, és összekapcsoljuk egy másik eseménykezelővel:
Az egyetlen érdekes dolog ebben az összefüggésben az, hogy az eseményt egy DOM objektum segítségével is be kell váltani. Ezután nyissa meg a fájlt a kívánt böngészőben, és kattintson a gombra. Az üzenetmező ablak a várakozásoknak megfelelően jelenik meg a képernyőn.
Az eseményvezérelt rendszerek egyik legérdekesebb tulajdonsága az események továbbításának képessége bizonyos "csatornákon". Ehhez egy másik eseménykezelővel szeretnénk kibővíteni a kis tesztkötegünket:
Technikai szempontból itt csak néhány különbség van. Most írunk egy eseménykezelőt az eseményhez, mind a gomb, mind a dokumentum törzsszintjén. Mindkettő egy-egy üzenetmezőt mutat, ezért a megjelenített ablakok számlálása információt nyújt a program végrehajtásáról. Amikor a fent kinyomtatott eseménykezelővel aktiválódik, két üzenetmező jelenik meg a képernyőn. Mulatságosan ez a viselkedés független a buborék változó értékétől. Érdekes viselkedés mutatkozik a kattintáskezelő testreszabásakor:
Ha az eseményt közvetlenül a Document.Body-ban indítja el, akkor észreveszi, hogy csak egy üzenet jelenik meg a képernyőn. A Zepto ugyanis alapvetően csak felfelé továbbítja az eseményeket, ha egyáltalán. A probléma vonzó megoldása a triggerHandler módszer használata:
A triggerHandler által kiváltott eseményt a Zepto korlátozza arra a DOM elemre, amelyben a módszert meghívták. Esetünkben ez azt jelenti, hogy csak azokat az eseménykezelőket használják, amelyeket a gombok szintjén hoztak létre.
És most mobil!
Következő feladatként át szeretnénk térni az érintőképernyős események kezelésére. Még akkor is, ha a Zepto-t eredetileg mobil keretrendszerként szánták, ezt a modult nem a teljes keretrendszerrel együtt szállították, és az első használat előtt integrálni kell.
Ha meg akarja menteni a fent tárgyalt testreszabási munkát, letöltheti a mellékelt touch.js fájlt is, és integrálhatja a teszt rutinba a következő séma szerint a normál keretrendszeren kívül:
A különféle elemek teszteléséhez létre kell hoznunk egy struktúrát, amely a test néhány eleméből áll: kényelmi okokból két LI tagre korlátozódunk:
Még akkor is, ha ez a cikk nem foglalkozik az érintőképernyős használhatóság egészével, kifejezetten ki kell emelni, hogy a kézi számítógépes alkalmazásokban a lehető legnagyobb méretű vezérlőelemeket kell létrehozni. Ennek legegyszerűbb módja néhány CSS használata:
Helyi HTTP szerver hozható létre az okostelefon tartalmának biztosítására. A Unix alatt dolgozó fejlesztők egy kis Python programot használhatnak a 2. listában szereplő séma szerint - a Python 3 alatt egy másik példát kell betölteniük a SimpleHTTPServer helyett.
Ezután töltse be a programot egy választott okostelefonra, és hosszan koppintson rá. Az elemek háttérszíne az alábbiak szerint változik 2. ábra Látható.
2. ábra: Világostól sötétkékig, itt a Chrome for Android alatt
A longTap esemény mellett a fejlesztők letölthetik az egyes csapokat is. Három esemény van erre: a csap minden csap eseményt elfogad, míg a singleTap és a doubleTap bizonyos típusú csapokat céloz meg. A swipeket a swipe, swipeLeft, swipeRight, swipeUp és swipeDown módszerekkel lehet kezelni. Itt azonban tesztelni kell, mert nem minden böngészőben működnek egyformán.
Formában gyorsan
A Zepto teljes Ajax implementációval érkezik. Mivel az AccessControl and Co. kezelése folyamatban van, csak itt szeretnénk bemutatni a sorosítást. Erre a célra a Form modult használják, amelyet az 1. táblázat szerinti standard elosztás tartalmaz. A következő DOM struktúrának kell tesztkötegként szolgálnia:
Az űrlap eredményei összegyűjthetők tömb formájában, valamint közvetlenül átvihető stringben. A Zepto saját módszert kínál, amely lehetővé teszi az eseménykezelők beírását a beküldött eseménybe. Helyi okokból itt nem hozunk létre teljes kimenetet. 3. ábra megmutatja, hogy néz ki a két elem a hibakeresőben.
3. ábra: A Zepto automatikusan sorosítja az űrlapadatokat
Következtetés
Minden szempontból nem szabad figyelmen kívül hagyni, hogy a Zepto fejlődése jelentősen lelassult az elmúlt hónapokban. Míg a jQuery továbbra is naponta frissít néhányat, a Zepto-ban most már szinte teljes a csend.
Ez nem feltétlenül jelent hátrányt a fejlesztők számára, mivel a könyvtár nagyjából azt teszi, amit kell. Figyelemre méltó hátrány, hogy hiba esetén kezet kell nyújtania. Ezenkívül a külső könyvtárakkal való kompatibilitás mindig "talán". Ha egy frissítés megsemmisíti az alkalmazást, a jQuery-alapú könyvtár szolgáltatóját általában csak kissé érdekli a hibajelentése.
PHP magazin
Ez a cikk a PHP magazinban jelent meg. A PHP Magazin témák széles skáláját fedi le, amelyek elengedhetetlenek a sikeres webfejlesztéshez.