JQuery on a Diet Úvod do knižnice Zepto JavaScript
Okrem debaty o jQuery a JavaScripte, ktoré sú pre klasických informatikov nesmierne zábavné, je potrebné poznamenať, že jQuery je všetko, len nie malý. V časoch sietí na doručovanie obsahu to nemusí mať zvláštny význam: Ak zahrniete široko používanú knižnicu z populárneho CDN, môžete sa spoľahnúť na inú webovú stránku, ktorá zabezpečí, že sa súbor už nachádza v pamäti cache prehliadača používateľa. V praxi však vždy existujú situácie, keď je dôležitý maximálny výkon. Príkladom toho môžu byť procesory založené na JavaScripte, kde dostupná pamäť kódu nie je neobmedzená a či slabá CPU závisí od každého kilobajtu kódu (čas začiatku kľúčového slova). Okrem toho vždy existujú scenáre, v ktorých nie sú povolené siete na doručovanie obsahu alebo v ktorých musí vývojár podporovať prehliadače, ktoré už jQuery časom nepokrýva.
V tejto chvíli udrie hodina knižnice s názvom Zepto (rámček: „Milý ručný počítačový programátor“). Projekt, ktorý v roku 2010 vytvoril Thomas Fuchs, je vo svete JavaScriptu vždyzelený a je - vo veľkom - kompatibilný s jQuery. Produkt však predovšetkým zvláda 5 alebo 10 KB skompilovaného kódu, v závislosti od konfigurácie.
Tento článok poskytuje základné informácie o knižnici. A vďaka veľmi kompaktnému dizajnu tu máme dokonca realistickú možnosť pokryť produkt ako celok.
Najobľúbenejší vreckový počítačový programátor
Thomas Fuchs pôvodne zamýšľal Zepto ako zbavenú alternatívu pre prácu s PhoneGap. Z tejto skutočnosti vyplýva veľmi zaujímavý zoznam kompatibility. Okrem klasiky podporuje knižnica vo veľkom aj niektoré vzácnejšie operačné systémy. Medzi obzvlášť zaujímavých kandidátov patria Palms WebOS, staršie verzie systému Android, BlackBerry 10 a dokonca aj staré verzie Safari pre iOS.
Jadro modulu Zepto má miniaturizovanú veľkosť iba päť kilobajtov. Vždy existujú scenáre, v ktorých nie sú potrebné rozširujúce moduly, o ktorých sa hovorí v článku nižšie, a preto si skutočne vystačia s veľkosťou súboru päť kilobajtov.
Otázka modularizácie
Keď autor týchto liniek musel pred mnohými rokmi demontovať analógový počítač vyrobený spoločnosťou Telefunken na rakúskej technickej univerzite tretej triedy, obdivoval vysoko modulárnu štruktúru aritmetického zvieraťa, ktoré bolo v procese ničenia. Bol to systém, ktorý sa dal skutočne rozdeliť na jednotlivé časti. Spoločnosť Telefunken, ktorá bola nápomocná pri opravách aj predaji, dokázala vynechať nepotrebné diely, aby mohla lacnejšie ponúknuť celý systém.
V Zepte stavia na podobnom koncepte. Knižnica pozostáva z dobrých desiatok modulov, ktoré sú stručne zhrnuté v tabuľke 1.
| zepto | Jadrový modul | Áno |
| udalosť | Rozšírenia pre programovanie založené na udalostiach | Áno |
| ajax | XMLHttpRequest | Áno |
| tvar | Metódy serializácie formulárov | Áno |
| tj | Podpora prehliadača Internet Explorer 10 | Áno |
| zistiť | Detekcia prehliadača a hostiteľského operačného systému | Nie |
| fx | Metóda „Animate ()“ | Nie |
| fx_methods | Preddefinované ukážkové animácie pre Animate | Nie |
| aktíva | Lepšia správa pamäte pre iOS; experimentálne | Nie |
| údaje | Metóda „Data ()“ | Nie |
| odložené | Možnosť použiť sľuby | Nie |
| spätné volania | Rozširuje „$ .Callbacks“ o možnosť pracovať v odloženom režime | Nie |
| selektor | Emuluje podmnožinu selektorov CSS jQuery | Nie |
| dotknúť sa | Základná knižnica dotykového displeja | Nie |
| gesto | Rozpoznávanie gest pre priblíženie prstom | Nie |
| stoh | Metóda reťazenia | Nie |
| ios3 | Pomocné funkcie, ktoré nie sú implementované v systéme iOS 3 | Nie |
Tabuľka 1: Moduly od spoločnosti Zepto
Vývojári, ktorí sa zaujímajú o svoju vlastnú verziu softvéru Zepto, dosiahnu tento vysoký cieľ dvoma spôsobmi: Najprv je možné stiahnuť celý zdrojový kód, aby bolo možné zostaviť ich vlastnú verziu pomocou nástrojov založených na uzloch. Prípadne je možné použiť nástroj na vytváranie zepto, ktorý po otvorení v ľubovoľnom webovom prehliadači otvorí ilustrácia 1 používateľské rozhranie zobrazené na obrazovke.
Obrázok 1. Vďaka vývojárovi zepto nemusia vývojári zápasiť s príkazovým riadkom Node
V záujme jednoduchosti v tomto okamihu stále chceme pracovať so štandardnou distribúciou, ktorú dodáva stavebník s predvoleným nastavením alebo ktorú je možné stiahnuť priamo z webovej stránky projektu.
Pre nasledujúce kroky chceme použiť minimalizovanú verziu. V čase tlače je súbor zepto.min.js a čaká na nových majiteľov. Stiahnite si ho na pohodlne prístupné miesto v súborovom systéme a v ďalšom kroku vytvorte testovací zväzok s kódom uvedeným v zozname 1.
Tento - veľmi jednoduchý - príklad ilustruje niektoré zaujímavé prvky knižnice. Najskôr produkt vždy nastaví globálnu premennú nazvanú Zepto, ktorá odkazuje na kód knižnice ako celok. Po druhé, prenos funkcií do Zepto vedie k tomu, že referencie sa ukladajú do internej pamäte, ktorá sa spracuje po udalosti DomContentLoaded.
Rámec medzitým okamžite vykoná funkcie zapísané po vzniku tejto udalosti. Ak by ste do Zepto (funkcia ($) umiestnili ďalšiu schránku so správami, ktorá by bola tiež v zväzku Zepto (funkcia ($)), na obrazovke by sa vám zobrazili dve správy:
Toto správanie, na prvý pohľad zvláštne, je spôsobené skutočnosťou, že rámec je už po spracovaní F1 úplne inicializovaný, a preto okamžite vykoná zadané užitočné zaťaženie. Je zaujímavé, že „vnútorné“ okno so správami sa tu dokonca objavuje pred vašim kolegom, ktorý je ďalej vonku.
Zepto sa líši od jQuery tým, že do dolára naplní svoj vlastný kód iba vtedy, ak je premenná v čase načítania knižnice voľná. To vedie k problémom, najmä pri interakcii s knižnicami, pretože tie sa používajú aj v mimoriadne spornom mennom priestore dolárov. Ak potrebujete ďalšie informácie, buďte z. Napríklad si pozrite stránku GitHub Petra Kinmonda.
Hlavnou a stavovou úlohou Zepta je určite manipulácia s objektmi DOM. Aby sme si mohli túto funkciu vyskúšať, musíme do tela nášho prvku pridať nejaké testovacie prvky. Ako prvý príklad sa pozrime na skupinu
Vývojári, ktorí sú zvyknutí na jQuery, si v tejto chvíli všimnú niekoľko vecí, s ktorými by mali byť oboznámení: Znak dolára akceptuje aj parametre reťazcov, ktoré sú známe ako selektory, a umožňujú kompaktnú interakciu so stromom DOM.
Tu odovzdáme reťazec div, aby sme rámcu dali pokyn, aby nám poskytol všetky
Na rozmanitosti záleží - online marketing 2020
s Astrid Kramer (Astrid Kramer Consulting)
Právo na súkromie - príležitosť pre UX
s Lutzom Schmittom (Lutz Schmitt Design & Consulting)
Pomsta štruktúrovaných dát
so Stephanom Cifkom (Performics Germany GmbH)
Je zaujímavé, že rámec poskytuje tri parametre. Okrem skutočného aktuálneho prvku a premennej spojitého indexu poskytuje Zepto z dôvodu pohodlia aj odkaz na hlavné pole, aby sa uľahčila implementácia logiky.
Skutočné užitočné zaťaženie nájdete v korpuse. Zepto sem však umiestňuje malú pascu, ktorá frustruje neskúsených vývojárov. Rámec vracia bežné prvky JavaScriptu v iterátoroch, ktoré prirodzene nevystavujú rôzne funkcie a metódy deklarované Zeptom. Z tohto dôvodu musíme v prvom kroku použiť syntax $ (item) na vytvorenie objektu Zepto z predloženého prvku DOM. To je potom kompatibilné s html () s vlastnou funkciou Zepto. Nech je to už akokoľvek: Hotový program načítajte do prehliadača podľa vášho výberu, aby ste si mohli vychutnať postupnosť rôznych čísel.
Rôzni malí pomocníci
V tejto súvislosti upozorňujeme, že syntaktický analyzátor DOM dodávaný spoločnosťou Zepto obsahuje iba podmnožinu funkcií a parametrov implementovaných v jQuery. Obzvlášť nepríjemným obmedzením pre vývojárov závislých od CSS je nedostatok rozšírení selektora na základe štýlov známych z jQuery. Ak nevyhnutne musíte vo svojom programe používať funkcie podrobne popísané, môžete sa vrátiť k modulu s názvom selektor. Upozorňujeme však, že táto časť produktu sa označuje ako experimentálna a v mobilnom sektore tradične funguje skôr zle alebo dobre.
Okrem analyzátora DOM ponúka jadrový modul od spoločnosti Zepto aj rôzne ďalšie pomocné funkcie. Napríklad metódy isX sú vždy populárne, pomocou ktorých môžete skontrolovať, či je určitý prvok určitého typu:
Kvôli jednoduchosti týchto funkcií tu nechceme implementovať príklad. Je oveľa zaujímavejšie ďalej analyzovať manipulačné funkcie DOM obsiahnuté v jadre modulu. S programami scrollLeft a scrollTop existuje skupina metód, ktoré umožňujú určovanie a programovú manipuláciu s polohou rolovania na obrazovke.
Ďalším vtipným pomocníkom sa volá Grep: $ .grep (items, function (item)< … >) ⇒ pole. Vývojári so skúsenosťami s Unixom tu môžu hádať, čo nasleduje: Okrem poľa prijíma metóda funkciu spätného volania, ktorá sa volá pre každý prvok poľa. Výsledné pole je potom poľom tých prvkov, pre ktoré bolo spätné volanie pravdivé - pekný nástroj na decimovanie polí na základe zložitých kritérií.
Ted mu posiela pozdrav
Poznámky Teda Faisona k programovaniu zameranému na udalosti by už mali byť klasikou. Aj dobrých desať rokov po prvom vydaní je príslušná kniha stále v predaji. Štandardná distribúcia Zepto je tiež dodávaná so systémom správy udalostí, čo vývojárom šetrí potrebu integrovať ďalšie rámce, ako napríklad Radio.js a Co.
Chceme tu tiež implementovať malý program zameraný na udalosti. Za týmto účelom vytvorte novú verziu testovacieho zväzku vytlačenú vyššie, ktorá musí byť teraz vybavená tlačidlom. Pretože vyhlásenie tlačidiel nepatrí medzi veľké záhady systémovej technológie, netlačíme tu potrebný kód.
Namiesto toho sa pozrime na zdroje udalostí. Zepto podporuje udalosti v DOM aj udalosti vytvorené samotným vývojárom. Chceme tu začať domácou udalosťou. Zaregistruje sa v rámci pomocou metódy $ .Event:
Prvý parameter odovzdaný metóde je reťazec, ktorý určuje názov udalosti. Porovnanie medzi zdrojmi udalostí a jímkami udalostí sa uskutočňuje výhradne pomocou reťazcového porovnania. Druhé pole určuje, ako by sa mala udalosť distribuovať. V tomto okamihu deaktivujeme funkciu prebublávania, ktorá v čase tlače zrejme fungovala iba čiastočne.
V ďalšom bode je tu trochu zvláštna vlastnosť. Udalosti je možné v zásade mapovať iba pomocou objektového modelu dokumentu. To znamená, že zdroje udalostí aj jímky udalostí musia byť v zásade pripojené k prvku DOM.
Na prekonanie tohto problému je vhodné ukladať interné udalosti do „zbierkového objektu“. Telo dokumentu je na tento účel vhodné, a preto ho používame na prihlásenie správcu udalostí pomocou metódy on poskytnutej na tento účel:
V ďalšom kroku použijeme on na registráciu udalosti kliknutia na tlačidlo patriacu k DOM a na jej pripojenie k inej obsluhe udalosti:
Jedinou zaujímavou vecou v tejto súvislosti je, že udalosť sa musí spustiť aj pomocou objektu DOM. Potom otvorte súbor v prehliadači podľa vášho výberu a kliknite na tlačidlo. Na obrazovke sa podľa očakávania zobrazí okno so správou.
Jednou z najzaujímavejších vlastností systémov riadených udalosťami je schopnosť posielať udalosti ďalej v určitých „kanáloch“. Aby sme to dosiahli, chceme rozšíriť náš malý testovací zväzok o ďalší obslužný program udalostí:
Z technického hľadiska je tu len niekoľko rozdielov. Teraz napíšeme k udalosti obslužný program udalosti na úrovni tlačidla aj tela dokumentu. Obidve zobrazujú okno so správou, a preto počítanie zobrazených okien poskytuje informácie o vykonaní programu. Po spustení pomocou obslužného programu udalosti vytlačeného vyššie sa na obrazovke zobrazia dve schránky správ. Je zábavné, že toto správanie je nezávislé od hodnoty bublinovej premennej. Pri prispôsobovaní obsluhy kliknutí sa zobrazí zaujímavé správanie:
Ak spustíte udalosť priamo v aplikácii Document.Body, všimnete si, že na obrazovke sa zobrazí iba správa. Je to tak preto, lebo Zepto v zásade prenáša udalosti iba nahor, ak vôbec. Atraktívnym riešením tohto problému je použitie metódy triggerHandler:
Udalosť spustená pomocou triggerHandler je Zeptom obmedzená na element DOM, v ktorom bola metóda volaná. V našom prípade to znamená, že sa používajú iba tie obslužné rutiny udalostí, ktoré boli vytvorené na úrovni tlačidiel.
A teraz mobilné!
Ako ďalšiu úlohu sa chceme venovať spracovaniu udalostí na dotykovej obrazovke. Aj keď bol Zepto pôvodne určený ako mobilný framework, tento modul sa nedodáva s celkovým frameworkom a musí byť integrovaný pred prvým použitím.
Ak si chcete ušetriť prácu na prispôsobení, o ktorej sme hovorili vyššie, môžete si tiež stiahnuť poskytnutý súbor touch.js a integrovať ho do testovacej rutiny podľa nasledujúcej schémy „navyše“ k normálnemu rámcu:
Aby sme mohli otestovať rôzne prvky, musíme vytvoriť štruktúru zloženú z niekoľkých prvkov v tele: z dôvodu pohodlia sa obmedzíme na dva štítky LI:
Aj keď sa tento článok nemôže zaoberať použiteľnosťou dotykovej obrazovky ako celkom, je potrebné výslovne zdôrazniť, že ovládacie prvky v vreckových počítačových aplikáciách by mali byť navrhnuté čo najväčšie. Najjednoduchší spôsob, ako to urobiť, je použiť niektoré CSS:
Na zabezpečenie obsahu pre smartphone je možné vytvoriť lokálny server HTTP. Vývojári pracujúci v systéme Unix môžu použiť malý program v jazyku Python podľa schémy v zozname 2 - v prostredí Python 3 musia namiesto SimpleHTTPServer načítať ďalší príklad.
Potom načítajte program do smartfónu podľa vášho výberu a dlho klepnite. Farba pozadia prvkov sa mení ako v Obrázok 2 zobrazené.
Obrázok 2: Od svetlej po tmavo modrú, tu pod prehliadačom Chrome pre Android
Okrem udalosti longTap môžu vývojári načítať aj jednotlivé klepnutia. Existujú tri udalosti: klepnutie prijíma všetky udalosti klepnutia, zatiaľ čo singleTap a doubleTap sú zacielené na určité typy klepnutia. S prstami je možné manipulovať pomocou metód swipe, swipeLeft, swipeRight, swipeUp a swipeDown. Tu je však potrebné testovanie, pretože nefungujú rovnako vo všetkých prehľadávačoch.
Vytvorte rýchlo
Zepto prichádza s plnou implementáciou Ajaxu. Pretože sa už pracuje na spoločnostiach AccessControl and Co., chceme tu iba predstaviť serializáciu. Na tento účel slúži modul Form, ktorý je zahrnutý v štandardnej distribúcii podľa tabuľky 1. Ako testovací zväzok by mala slúžiť táto štruktúra modelu DOM:
Výsledky formulára je možné zhromažďovať vo forme poľa aj v priamo prenosnom reťazci. Zepto ponúka vlastnú metódu, ktorá umožňuje zapisovať obslužné rutiny udalostí do udalosti odoslania. Z priestorových dôvodov tu neprodukujeme kompletný výstup. Obrázok 3 ukazuje, ako dva prvky vyzerajú v debuggeri.
Obrázok 3: Zepto automaticky serializuje údaje z formulárov
Záver
Vo všetkých ohľadoch by sa nemalo ignorovať, že sa vývoj Zepta za posledných pár mesiacov výrazne spomalil. Aj keď jQuery každý deň aktualizuje niekoľko, v Zepte je teraz takmer úplný pokoj.
To nemusí byť nevyhnutne nevýhoda pre vývojárov, pretože knižnica celkovo robí, čo má. Skutočnosť, že v prípade chyby musíte podať pomocnú ruku, je pozoruhodnou nevýhodou. Kompatibilita s knižnicami tretích strán je navyše vždy „možno“. Ak aktualizácia zničí aplikáciu, poskytovateľa knižnice založenej na jQuery zvyčajne zaujíma len mierne jeho chybové hlásenie.
Časopis PHP
Tento článok bol publikovaný v časopise PHP. Časopis PHP pokrýva široké spektrum tém, ktoré sú nevyhnutné pre úspešný vývoj webu.