JQuery on a Diet O introducere în biblioteca JavaScript Zepto
În afară de dezbaterile despre jQuery și JavaScript, care sunt extrem de amuzante pentru informaticienii clasici, trebuie remarcat faptul că jQuery este orice, în afară de mic. În perioadele de rețele de livrare a conținutului, este posibil să nu fie de o relevanță deosebită: dacă includeți o bibliotecă pe scară largă dintr-un CDN popular, vă puteți baza pe un alt site web pentru a vă asigura că fișierul este deja în memoria cache a browserului utilizatorului. Cu toate acestea, în practică, există întotdeauna situații în care performanța maximă este importantă. Un exemplu în acest sens ar fi computerele de proces bazate pe JavaScript, unde memoria de cod disponibilă nu este nelimitată și dacă CPU slab depinde de fiecare kilobyte de cod (ora de pornire a cuvintelor cheie). În plus, există întotdeauna scenarii în care rețelele de livrare a conținutului nu sunt permise sau în care tu, ca dezvoltator, trebuie să sprijini browserele care nu mai sunt acoperite de jQuery în timp.
În acest moment, ora unei biblioteci numită Zepto lovește (caseta: „Scumpul programatorului de calculator portabil”). Proiectul, conceput de Thomas Fuchs în 2010, este veșnic verde în lumea JavaScript și este - în general - compatibil cu jQuery. Mai presus de toate, însă, produsul gestionează cu 5 sau 10 KB de cod compilat, în funcție de configurație.
Acest articol oferă o scurtă introducere în bibliotecă. Și datorită designului foarte compact, avem chiar aici o opțiune realistă pentru a acoperi produsul în ansamblu.
Preferatul programatorului de calculator portabil
Thomas Fuchs a intenționat inițial Zepto ca o alternativă dezactivată pentru lucrul cu PhoneGap. Din acest fapt rezultă o listă de compatibilitate foarte interesantă. În plus față de clasic, biblioteca în general acceptă și unele sisteme de operare mai puțin frecvente. Unii candidați deosebit de interesanți includ Palms WebOS, versiuni mai vechi de Android, BlackBerry 10 și chiar versiuni vechi de Safari pentru iOS.
Modulul de bază Zepto are o dimensiune miniaturizată de doar cinci kilobyți. Există întotdeauna scenarii în care nu aveți nevoie de modulele de extindere discutate în articolul de mai jos și vă puteți descurca cu o dimensiune a fișierului de cinci kilobyți.
O chestiune de modularizare
Când autorul acestor linii a trebuit să demonteze un computer analogic realizat de Telefunken la o universitate tehnică austriacă de clasa a treia în urmă cu mulți ani, a admirat structura extrem de modulară a fiarei aritmetice care era în curs de a fi distrusă. Era un sistem care putea fi într-adevăr împărțit în părțile sale individuale. Ajutor atât pentru reparații, cât și pentru vânzări, Telefunken a reușit să lase în afara pieselor inutile pentru a putea oferi întregul sistem mai ieftin.
Un concept similar este utilizat la Zepto. Biblioteca este formată dintr-o duzină bună de module, care sunt rezumate pe scurt în Tabelul 1.
| zepto | Modulul de bază | da |
| eveniment | Extensii pentru programarea bazată pe evenimente | da |
| ajax | XMLHttpRequest | da |
| formă | Metode pentru serializarea formularelor | da |
| adică | Suport Internet Explorer 10 | da |
| detecta | Detectarea browserului și a sistemului de operare gazdă | Nu |
| fx | Metoda „Animate ()” | Nu |
| fx_methods | Exemple de animații predefinite pentru Animate | Nu |
| active | Gestionare mai bună a memoriei pentru iOS; experimental | Nu |
| date | Metoda „Data ()” | Nu |
| amânat | Abilitatea de a folosi promisiunile | Nu |
| apeluri de apel | Extinde „$ .Callbacks” prin posibilitatea de a lucra în modul amânat | Nu |
| selector | Emulează un subset de selectoare CSS ale jQuery | Nu |
| atingere | Bibliotecă de bază cu ecran tactil | Nu |
| gest | Recunoașterea gesturilor pentru apropierea pentru zoom | Nu |
| grămadă | Înlănțuirea metodei | Nu |
| ios3 | Funcțiile de asistență nu sunt implementate în iOS 3 | Nu |
Tabelul 1: Modulele de la Zepto
Dezvoltatorii interesați de propria lor versiune de Zepto ating acest obiectiv înalt în două moduri: În primul rând, întregul cod sursă poate fi descărcat pentru a compila apoi propria versiune folosind instrumente bazate pe noduri. Alternativ, poate fi folosit constructorul zepto, care după deschiderea în orice browser web intră ilustrația 1 interfața cu utilizatorul afișată pe ecran.
Fig. 1. Datorită constructorului zepto, dezvoltatorii nu trebuie să se lupte cu linia de comandă Node
Din motive de simplitate, dorim în continuare să lucrăm cu distribuția standard în acest moment, care este furnizată cu setările implicite de către constructor sau, alternativ, poate fi descărcată direct de pe site-ul web al proiectului.
Pentru următorii pași dorim să folosim versiunea minimizată. La momentul apăsării, fișierul este zepto.min.js și așteaptă noi proprietari. Descărcați-l într-o locație accesibilă convenabil din sistemul de fișiere și, în pasul următor, creați un ham de testare cu codul prezentat în Listarea 1.
Acest exemplu - foarte simplu - ilustrează câteva elemente interesante ale bibliotecii. În primul rând, produsul stabilește întotdeauna o variabilă globală numită Zepto, care face referire la codul bibliotecii în ansamblu. În al doilea rând, transferul funcțiilor către Zepto are ca rezultat stocarea referințelor într-o memorie internă procesată după ce a avut loc evenimentul DomContentLoaded.
Funcțiile scrise după ce a avut loc acest eveniment sunt între timp executate imediat de cadru. Dacă ar fi să plasați o altă casetă de mesaje în Zepto (funcția ($), care ar fi, de asemenea, într-un ham Zepto (funcția ($)), veți primi două mesaje pe ecran:
Acest comportament, ciudat la prima vedere, se datorează faptului că cadrul este deja complet inițializat după procesarea F1 și, prin urmare, execută imediat sarcina utilă specificată. Destul de amuzant, căsuța de mesaje „interioară” apare chiar aici în fața colegului dvs. care este mai departe afară.
Zepto diferă de jQuery prin faptul că populează semnul dolar cu propriul cod numai dacă variabila este liberă în momentul încărcării bibliotecii. Acest lucru duce la probleme, mai ales atunci când interacționați cu bibliotecile, deoarece acestea sunt, de asemenea, utilizate în spațiul de nume cu dolari puternic contestat. Dacă doriți mai multe informații despre acest lucru, fiți z. De exemplu, consultați pagina GitHub a lui Peter Kinmond.
Sarcina principală și de stat a Zepto este cu siguranță manipularea obiectelor DOM. Pentru a încerca această caracteristică, trebuie să adăugăm câteva elemente de testare în corpul elementului nostru. Ca prim exemplu, să ne uităm la un grup de
Dezvoltatorii obișnuiți cu jQuery observă câteva lucruri în acest moment cu care ar trebui să fie familiarizați: semnul dolar acceptă, de asemenea, parametrii șirului care sunt cunoscuți ca selectori și permit interacțiunea compactă cu arborele DOM.
Trecem șirul div aici pentru a instrui cadrul să furnizeze o serie de toate
Diversitatea contează - marketing online 2020
cu Astrid Kramer (Astrid Kramer Consulting)
Dreptul la confidențialitate - o oportunitate pentru UX
cu Lutz Schmitt (Lutz Schmitt Design & Consulting)
Răzbunarea datelor structurate
cu Stephan Cifka (Performics Germany GmbH)
Este de interes aici că cadrul oferă trei parametri. În plus față de elementul curent actual și de o variabilă continuă de index, Zepto oferă, de asemenea, o referință la câmpul principal din motive de confort pentru a facilita implementarea logicii.
Sarcina utilă reală poate fi găsită în corpus. Cu toate acestea, Zepto plasează aici o mică capcană care frustrează dezvoltatorii fără experiență. Cadrul returnează elemente JavaScript normale în iteratoare, care în mod firesc nu expun diferitele funcții și metode declarate de Zepto. Din acest motiv, trebuie să folosim sintaxa $ (item) în primul pas pentru a crea un obiect Zepto din elementul DOM trimis. Acesta este apoi html () -compatibil cu funcția proprie a lui Zepto. Oricum: Încărcați programul terminat într-un browser la alegere pentru a vă bucura de o secvență de numere diferite.
Diversi mici ajutoare
Vă rugăm să rețineți, în acest context, că analizorul DOM livrat de Zepto conține doar un subset de funcții și parametri implementați în jQuery. O restricție deosebit de enervantă pentru dezvoltatorii dependenți de CSS este lipsa extensiilor de selecție bazate pe foi de stil cunoscute de la jQuery. Dacă trebuie absolut să utilizați caracteristicile descrise în detaliu în programul dvs., puteți recurge la un modul numit selector. Vă rugăm să rețineți, totuși, că această parte a produsului este denumită experimental și funcționează în mod tradițional destul de slab decât bine în sectorul mobil.
În plus față de parserul DOM, modulul de bază de la Zepto oferă și alte funcții auxiliare. De exemplu, metodele isX sunt întotdeauna populare, cu care puteți verifica dacă un anumit element este de un anumit tip:
Datorită simplității acestor funcții, nu dorim să implementăm un exemplu aici. Este mult mai interesant să analizăm în continuare funcțiile de manipulare DOM conținute în modulul de bază. Cu scrollLeft și scrollTop există un grup de metode care permit determinarea și manipularea programatică a poziției scroll pe ecran.
Un alt ajutor amuzant se numește Grep: $ .grep (items, function (item)< … >) ⇒ matrice. Dezvoltatorii cu experiență Unix pot ghici ce urmează aici: În plus față de un câmp, metoda primește o funcție de apel invers care este apelată pentru fiecare element al matricei. Matricea rezultată este apoi un câmp al acelor elemente pentru care callback-ul a revenit adevărat - un instrument frumos pentru decimarea câmpurilor bazate pe criterii complexe.
Ted își trimite salutările
Observațiile lui Ted Faison asupra programării orientate spre evenimente ar trebui să fie un clasic până acum. Chiar și la zece ani buni după ce a fost publicată pentru prima dată, cartea corespunzătoare este încă în vânzare. Distribuția standard Zepto este, de asemenea, livrată cu un sistem de gestionare a evenimentelor, care salvează dezvoltatorii nevoia de a integra alte cadre precum Radio.js și Co.
De asemenea, dorim să implementăm un mic program orientat spre evenimente aici. Pentru a face acest lucru, creați o nouă versiune a hamului de testare tipărit mai sus, care trebuie acum să fie echipat cu un buton. Deoarece declarația butoanelor nu este unul dintre marile mistere ale tehnologiei sistemului, nu imprimăm aici codul necesar.
În schimb, să aruncăm o privire asupra surselor de evenimente. Zepto acceptă evenimente situate în DOM, precum și evenimente create chiar de dezvoltator. Vrem să începem aici cu un eveniment de casă. Este înregistrat cu cadrul folosind metoda $ .Event:
Primul parametru transmis metodei este un șir care specifică numele evenimentului. Comparația dintre sursele de eveniment și chiuvete de evenimente are loc exclusiv printr-o comparație șir. Al doilea câmp determină modul în care ar trebui distribuit evenimentul. În acest moment, dezactivăm funcția de barbotare, care aparent a funcționat doar parțial la momentul apăsării.
La următorul punct există o mică caracteristică specială. În principiu, evenimentele pot fi mapate numai folosind Modelul de obiect document. Aceasta înseamnă că atât sursele de eveniment, cât și chiuvetele de evenimente trebuie, în principiu, să fie conectate la un element DOM.
Pentru a ocoli această problemă, este recomandabil să stocați evenimente interne într-un „obiect de colecție”. Corpul documentului este potrivit pentru acest lucru, motiv pentru care îl folosim pentru a ne conecta la un manager de evenimente folosind metoda on prevăzută în acest scop:
În pasul următor vom folosi pentru a înregistra evenimentul de clic al butonului aparținând DOM și pentru a-l conecta la un alt gestionar de evenimente:
Singurul lucru interesant în acest context este că evenimentul trebuie declanșat și cu ajutorul unui obiect DOM. Apoi deschideți fișierul într-un browser la alegere și faceți clic pe buton. Fereastra casetei de mesaj apare pe ecran așa cum era de așteptat.
Una dintre cele mai interesante caracteristici ale sistemelor bazate pe evenimente este capacitatea de a transmite evenimente în anumite „canale”. Pentru a face acest lucru, dorim să adăugăm un alt gestionar de evenimente la micul nostru ham de testare:
Din punct de vedere tehnic, există doar câteva diferențe. Acum vom scrie un eveniment de gestionare a evenimentului atât la nivelul butonului, cât și la nivelul corpului documentului. Ambele afișează fiecare o cutie de mesaje, motiv pentru care numărarea ferestrelor afișate oferă informații despre execuția programului. Când este declanșat cu gestionarul de evenimente tipărit mai sus, două casete de mesaje apar pe ecran. Amuzant, acest comportament este independent de valoarea variabilei bubble. Un comportament interesant este afișat atunci când personalizați gestionarul de clicuri:
Dacă declanșați evenimentul direct în Document.Body, veți observa că numai un mesaj apare pe ecran. Acest lucru se datorează faptului că Zepto transmite practic doar evenimentele în sus, dacă este deloc. O soluție atractivă pentru această problemă este utilizarea metodei triggerHandler:
Un eveniment declanșat cu triggerHandler este limitat de Zepto la elementul DOM în care a fost apelată metoda. În cazul nostru, acest lucru înseamnă că sunt utilizate doar acele gestionare de evenimente care au fost create la nivelul butonului.
Și acum mobil!
Ca următoare sarcină, vrem să ne îndreptăm spre gestionarea evenimentelor cu ecran tactil. Chiar dacă Zepto a fost inițial conceput ca un cadru mobil, acest modul nu este livrat împreună cu cadrul general și trebuie integrat înainte de a putea fi utilizat pentru prima dată.
Dacă doriți să vă salvați lucrările de personalizare discutate mai sus, puteți descărca fișierul touch.js disponibil și îl puteți integra în rutina de testare conform următoarei scheme „în plus” în cadrul normal:
Pentru a testa diferitele elemente, trebuie să creăm o structură în corp din câteva elemente: din motive de comoditate, ne limităm la două etichete LI:
Chiar dacă acest articol nu poate face față utilizabilității ecranului tactil în ansamblu, ar trebui subliniat în mod explicit că elementele de control din aplicațiile de calculator portabile ar trebui create cât mai mari posibil. Cel mai simplu mod de a face acest lucru este să folosiți unele CSS:
Un server HTTP local poate fi creat pentru a furniza conținutul smartphone-ului. Dezvoltatorii care lucrează sub Unix pot folosi un mic program Python conform schemei din Listarea 2 - în Python 3 trebuie să încarce un alt exemplu în loc de SimpleHTTPServer.
Apoi încărcați programul pe un smartphone la alegere și atingeți lung. Culoarea de fundal a elementelor se schimbă ca în Figura 2 afișate.
Fig. 2: De la deschis la albastru închis, aici sub Chrome pentru Android
În plus față de evenimentul longTap, dezvoltatorii pot prelua și atingeri individuale. Există trei evenimente pentru acest lucru: atingeți acceptă toate evenimentele de atingere, în timp ce singleTap și doubleTap vizează anumite tipuri de atingere. Glisările pot fi tratate folosind metodele swipe, swipeLeft, swipeRight, swipeUp și swipeDown. Cu toate acestea, testarea este necesară aici, deoarece acestea nu funcționează în mod egal în toate browserele.
Formați rapid
Zepto vine cu o implementare completă Ajax. Deoarece manipularea AccessControl and Co. este în lucru, vrem să prezentăm serializarea doar aici. În acest scop, se folosește modulul Form, care este inclus în distribuția standard conform Tabelului 1. Următoarea structură DOM ar trebui să servească drept ham de testare:
Rezultatele unui formular pot fi colectate sub formă de matrice, precum și într-un șir direct transferabil. Zepto oferă propria metodă care permite gestionarea evenimentelor să fie scrise în evenimentul de trimitere. Din motive de spațiu, nu producem o ieșire completă aici. Figura 3 arată cum arată cele două elemente în depanator.
Fig. 3: Zepto serializează automat datele din formular
Concluzie
În toate considerațiile, nu trebuie ignorat faptul că dezvoltarea Zepto a încetinit masiv în ultimele luni. În timp ce jQuery continuă să se actualizeze câteva în fiecare zi, acum există o liniște aproape completă la Zepto.
Acest lucru nu este neapărat un dezavantaj pentru dezvoltatori, totuși, întrucât biblioteca, în general, face ceea ce ar trebui. Faptul că trebuie să dai o mână de ajutor în cazul unei erori este un dezavantaj notabil. În plus, compatibilitatea cu bibliotecile terțe este întotdeauna o „Poate”. Dacă o actualizare distruge aplicația, furnizorul unei biblioteci bazate pe jQuery nu este de obicei foarte interesat de raportul dvs. de eroare.
Revista PHP
Acest articol a fost publicat în revista PHP. Revista PHP acoperă o gamă largă de subiecte care sunt esențiale pentru dezvoltarea web de succes.