Share
Bibliotecile moderne JavaScript sunt destul de monstruoase - doar aruncați o privire la jQuery. Când creați o aplicație mobilă sau chiar vizați doar browserele moderne, o bibliotecă mult mai slabă și mai agilă devine o propunere mai gustoasă.
Astăzi, ne vom uita la o astfel de bibliotecă, numită Zepto.
Un lucru care a trecut prin majoritatea radarelor a fost creșterea dispozitivelor mobile.
A se vedea, internetul și tehnologia care o conduce, au crescut în salturi și limite în ultimii ani. Ne-am mutat de la site-uri statice la aplicații web la aplicații web dinamice și apoi la aplicații real-time, hiper-responsive, thingamabob de astăzi. Un lucru care a trecut prin majoritatea radarelor a fost creșterea dispozitivelor mobile.
Gândiți-vă la asta: mulți dintre noi folosim telefoane inteligente și le folosim pentru navigare pe o bază constantă. Chiar și acasă, o porțiune non-trivială a cercului meu a adoptat un dispozitiv de tabletare pentru navigarea casual și e-mail. În timp ce acest flux de dispozitive este bun din punct de vedere al expunerii, acesta nu este lipsit de pretențiile sale.
În loc să ne gândim la aceste dispozitive ca pe o constrângere similară consumatorilor, noi, ca dezvoltatori, trebuie să ne gândim la ele în ceea ce privește resursele și lărgimea de bandă. Nu toate acestea au un CPU hiper quad gajillion Ghz sau vin cu oudele memoriei. Și să nu începem nici măcar cu lățimea de bandă. O mare parte din populația de navigare este încă blocată pe aceste scuză infernală pentru o conexiune la internet mobilă.
Cred că vedeți unde merg cu asta. Bibliotecile mari, monolitice, cum ar fi jQuery sau Prototype, au locul lor, dar pentru această eră mobilă, cred că există un loc pentru ceva mult mai agil. Și mulți dezvoltatori par să fie de acord cu mine.
O altă chestiune importantă pe care nu am menționat-o este faptul că bibliotecile contemporane o fac mult de chestii de browser încrucișat. De fapt, o mare remiză de jQuery, inițial, a fost modul în care a reușit să absoarbă o mulțime de quirkiness cruce browser-ul pe care dezvoltatorii de front-end a trebuit să lucreze în jurul valorii. Chiar și acum, jQuery face o mulțime de ridicare grele sub capota pentru a vă asigura că nimic nu se rupe în diferite browsere.
Dar dacă sunteți un dezvoltator care caută să satisfacă doar dispozitivele contemporane, aveți nevoie de toate acestea, îndrăznesc să spun, cruft? Răspunsul scurt este nu. Prin tăierea codului inutil, ambele:
Gândiți-vă că această problemă este exagerată? Iată o bucată aleatoare de cod din sursa jQuery:
isPlainObject: funcția (obj) // Trebuie să fie un obiect. // Din cauza IE, trebuie să verificăm și prezența proprietății constructorului. // Asigurați-vă că nodurile DOM și obiectele ferestrei nu trec, precum și dacă (! Obj || jQuery.type (obj)! == "obiect" || obj.nodeType || jQuery.isWindow (obj)) return false; ...
Sau ceva mai ezoteric:
// Efectuați o verificare simplă pentru a determina dacă browserul este capabil să convertească un NodeList într-un matrice utilizând metode încorporate. // Verifică, de asemenea, că matricea returnată conține nodurile DOM // (care nu este cazul în browserul Blackberry) încercați Array.prototype.slice.call (document.documentElement.childNodes, 0) [0] .nodeType; // Oferiți o metodă de rezervă dacă nu funcționează captura (e) // Rezolvarea dorită ...
Acest lucru poate părea destul de banal, dar țineți minte acest lucru tinde să se adune. Dacă doriți doar să vizați browserele moderne, fie pe desktop-uri, fie pe telefoane mobile, atunci nu este nevoie de toate aceste verificări și hack-uri suplimentare. Prin tăierea browserelor intenționate, câștigi atât pe lățime de bandă, cât și pe performanță!
Am auzit că voi spuneți: "Ajungeți acum, spuneți-ne deja despre biblioteca darn!". Deci, să ajungem la asta.
Zepto, așa cum ți-a stricat titlul, este a mobil Cadrul JavaScript care rectifică ambele probleme menționate mai sus. Are o bază de cod foarte mică și are greutatea penei la aproximativ 8kb.
Reuseste sa fie atat de svelta, in principal prin eliminarea chestiunilor din browser. Când a fost creat, accentul principal a fost acela de a sprijini numai Webkit. Versiunea mobilă a Webkit este exactă. Acum, a fost extins pentru a lucra și cu browserele desktop, dar numai cu cele moderne. Nu mai stoarce în jur pentru a face lucrurile să funcționeze acest IE6!
API-ul lui Zepto este compatibil cu jQuery. Dacă utilizați jQuery, știți deja cum să utilizați Zepto.
O altă zonă în care Zepto reușește să fie mică este modul în care reușește să evite îmbolnăvirea. Biblioteca de bază nu pare să includă nici o funcționalitate exterioară. Chiar și funcționalitatea AJAX și animația sunt disponibile ca module separate, în caz de necesitate. Pentru utilizatorii care folosesc în primul rând bibliotecile pentru traversarea și manipularea DOM, acesta este un trimitere totală a lui Dumnezeu.
Și, oh, am menționat piesa principală de petrecere a lui Zepto? API-ul lui Zepto este compatibil cu jQuery. Dacă utilizați jQuery, știți deja cum să utilizați Zepto.
Da și nu. Depinde este un răspuns mai potrivit.
Da, deoarece API-ul principal al lui Zepto imită în mare măsură jQuery. Pentru a ușura utilizarea și a reduce dramatic curba de învățare, Zepto emula API-ul jQuery. Cele mai multe dintre metodele utilizate, cum ar fi manipularea DOM, sunt numite aproape la fel și au aceiași parametri în aceeași ordine. Semnăturile metodei sunt aceleași, pentru inginerii afară.
Să aruncăm o privire la un mic exemplu:
Accentsconagua
$ ('# element'). html ("Hei, ești pe GW2 beta?"); Arata familiar? Ar trebui. Acesta este exact același cod pe care îl utilizați cu jQuery pentru a modifica codul HTML al unui element. După cum am menționat, acest lucru nu se limitează doar la această metodă. Majoritatea operațiunilor DOM sunt construite în același mod împreună cu utilitățile dvs., cum ar fi AJAX.
Pe de altă parte, API nu este o potrivire de 100%. Zepto renunță la unele metode prezente în jQuery, care pot încălca codul. Și la fel de important, deoarece Zepto este un subset al jQuery, probabil că veți pierde anumite funcționalități care sunt construite în -- amânat este un exemplu bun. Pur și simplu nu puteți schimba jQuery cu Zepto și așteptați ca totul să funcționeze.
Și pentru mine, cel mai mare obstacol sunt metodele care au fost copiate de la jQuery, dar au o altă semnătură și set de caracteristici. Ea devine un pic frustrant când credeți că utilizați o metodă corectă, dar nu sunteți. Capacitatea metodei de clonare de a copia agenți de procesare a evenimentelor este un bun exemplu. Fără să mă uit la sursă, nu aș fi găsit asta.
Dacă ați lucrat deja cu jQuery, totul de mai jos ar trebui să fie un eveniment de amânare.
Destul de chit chat, hai să ne aruncăm într-un cod acum. Ca și în cazul multor biblioteci moderne, traversarea și manipularea DOM sunt o trăsătură principală pe care toată lumea dorește să o perfecționeze. Deoarece API-ul și funcționalitatea generală sunt foarte asemănătoare cu jQuery, cred că puteți presupune în siguranță că totul este de top.
Să aruncăm o privire la unele funcționalități comune legate de DOM.
Aceasta este pâinea și untul din operațiile DOM: citirea sau modificarea conținutului HTML al unui element. Cu Zepto, este la fel de simplu ca apelarea html metoda de pe container și trecerea în noul HTML, dacă este necesar.
De exemplu, acesta obține codul HTML al unui element și îl stochează într-o variabilă.
var containerText = $ ('# element'). html (); Sau dacă doriți să o schimbați cu altceva:
$ ('# element'). html ("Hola acolo!"); Destul de simplu, corect?
Ca și în cazul jQuery, Zepto folosește adăuga și Prepend metode. Iar invocarea rămâne aceeași.
$ ( '# Elementul'). Adăugați (“Acesta este elementul atașat.
"); // sau $ ('# element') prepend ("Acesta este elementul atașat.
„);
Evenimentele sunt coloana vertebrală a oricărei aplicații moderne, iar Zepto vă oferă o grămadă de metode ușor de folosit pentru a vă face treaba. Cea mai mare parte a lucrului se face prin pe metodă.
$ ('# element') la ("faceți clic", funcția (e) // codul dvs. aici); Ușor de citit și ușor de analizat. Dacă vă simțiți vechea școală și simțiți că ați folosit lega, delega sau Trăi metode, nu face. La fel ca la jQuery, sunt deprimați aici.
Orice bibliotecă modernă la nivel inferior trebuie să ofere un ambalaj ușor de folosit în jurul AJAX, iar Zepto nu vă lasă aici. Iată un exemplu de cerere foarte simplă AJAX.
$ .ajax (tip: 'POST', url: '/ project', data: nume: Super Volcano Lair, dataType: 'json', succes: , eroare: funcție (xhr, tip) alert ('YU NO WORK?')); Lucrurile ar putea părea puțin complicate, dar ceea ce facem poate fi arsă la:
Ca și în cazul jQuery, există o metodă separată pentru o solicitare GET sau POST sau pentru a încărca doar conținut web.
Cu ce va veni lumea fără câteva animații? Zepto expune atotputernicul anima metodă care ar trebui să se ocupe cel mai de nevoile dvs. de animație.
$ 'element') animate (opacitate: 0.50, top: '30px', culoare: '# 656565', 0.5)
În principiu, selectăm elementul care trebuie animat, invocând anima și specificați proprietățile care trebuie animate, precum și timpul necesar pentru a termina animația. Zepto face restul.
Sau dacă trebuie doar să arătați și să ascundeți un element, comutatorul ar trebui să funcționeze foarte bine.
Cred că aveți punctul aici - Zepto's DOM, animație și evenimente API emulează cea a jQuery în mare măsură. Și, după cum știm cu toții, jQuery este darnică bună cu aceste lucruri. Dacă ați lucrat deja cu jQuery, nu trebuie să vă confruntați cu prea multe probleme aici.
Zepto vă oferă câteva evenimente specifice atingerii pe care le puteți utiliza în aplicațiile dvs. Acestea includ:
Iată un exemplu rapid, încântat de documentația lui Zepto.
Atunci când un element de listă este curățat, butonul de ștergere al fiecărui element al listei este ascuns și este afișat numai cel curent. Atingerea unui buton de ștergere elimină elementul parental al butonului care urmează să fie eliminat din DOM.
Aceasta ar trebui să fie destul de asemănătoare cu modul în care gestionați în general evenimentele, cu excepția faptului că le obligați pe agenții dvs. de conducere la diferite evenimente, asta-i tot.
Având în vedere ceea ce și pentru care dezvoltăm, acest lucru este perfect pentru mine; dar așa cum este întotdeauna, kilometrajul dvs. poate varia.
Ei bine, este vorba despre aproape tot ce există pentru Zepto. La baza lui, aceasta a fost menită să fie o versiune fără jetoane, fără crustă, a jQuery care ar putea fi folosită pe dispozitivele mobile. De-a lungul timpului, s-a transformat într-o bibliotecă slabă care nu îndeplinește browserele arhaice de susținere.
Având în vedere ceea ce și pentru care dezvoltăm, acest lucru este perfect pentru mine; dar așa cum este întotdeauna, kilometrajul dvs. poate varia. S-ar putea să fiți blocat în folosirea pluginurilor jQuery care necesită modificări non-triviale pentru a o face să lucreze sub Zepto sau doar pentru a avea mai multă încredere în jQuery.
În orice caz, trebuie într-adevăr să îi dați lui Zepto o încercare de a vedea cum se potrivește cu fluxul de lucru înainte de al scrie. Am facut-o si imi place!
Asta e tot de la mine azi. Dați-mi voie să știu ce credeți în comentariile de mai jos și vă mulțumesc foarte mult pentru citire!
