Share
Moderne JavaScript-biblioteker er ganske behemoths - bare ta en titt på jQuery. Når du lager en mobil-app, eller til og med bare målretter mot moderne nettlesere, blir et bibliotek som er mye mer svelte og nimble et bedre forslag.
I dag skal vi se på et slikt bibliotek, kalt Zepto.
En ting som har snuck forbi de fleste radarer har vært økningen av mobile enheter.
Se, internett og teknologien som driver det, har vokst i sprang i løpet av de siste årene. Vi flyttet fra statiske nettsteder til webapplikasjoner til dynamiske webapplikasjoner og deretter til realtid, hyper-responsive, thingamabob apps i dag. En ting som har snuck forbi de fleste radarer har vært økningen av mobile enheter.
Tenk på det: mange bruker smarte telefoner og bruker den til å surfe på en konstant basis. Selv hjemme har en ikke-triviell del av kretsen min vedtatt en tavle-enhet for uformell surfing og e-post. Mens denne tilstrømningen av enheter er god fra et eksponeringsperspektiv, er det ikke uten forbehold.
I stedet for å tenke på disse enhetene som visning begrenset som forbrukere, må vi som utviklere tenke på dem når det gjelder ressurser og båndbredde. Ikke alle dem har en hyper quad gajillion Ghz CPU eller kommer med minnepinner. Og la oss ikke engang komme i gang med båndbredden. En stor del av surfingpopulasjonen er fortsatt fast på disse infernalske unnskyldningene for en mobil internettforbindelse.
Jeg tror du ser hvor jeg går med dette. Store monolittiske biblioteker som jQuery eller Prototype har definitivt sin plass, men for denne mobile æra tror jeg det er et sted for noe som er mye mer skummelt. Og mange utviklere synes å være enige med meg.
Et annet stort problem som jeg ikke klarte å nevne er at moderne biblioteker gjør en mye av kryss leser ting. Faktisk var en stor tegning av jQuery, i utgangspunktet, hvordan det abstrakte bort mye av kryssbrowser quirkiness som frontend utviklere måtte jobbe rundt. Selv nå, gjør jQuery mye tung løft under hetten for å sørge for at ingenting bryter i forskjellige nettlesere.
Men hvis du er en utvikler som ser ut til å imøtekomme bare moderne enheter, trenger du virkelig alt dette, tør jeg si, cruft? Det korte svaret er nei. Ved å kutte ut unødvendig kode, både du:
Tenk at dette problemet er overblown? Her er en tilfeldig blokkering av kode fra jQuery's kilde:
isPlainObject: funksjon (obj) // Må være et objekt. // På grunn av IE må vi også sjekke tilstedeværelsen av byggherren. // Pass på at DOM noder og vindu objekter ikke passerer, så vel som (! Obj || jQuery.type (obj)! == "objekt" || obj.nodeType || jQuery.isWindow (obj)) return false; ...
Eller noe litt mer esoterisk:
// Utfør en enkel sjekk for å avgjøre om nettleseren kan // konvertere en NodeList til en matrise ved hjelp av innebygde metoder. // Verifiserer også at den returnerte gruppen inneholder DOM noder // (som ikke er tilfelle i Blackberry-nettleseren) prøv Array.prototype.slice.call (document.documentElement.childNodes, 0) [0] .nodeType; // Gi en tilbakebetaling metode hvis den ikke fungerer fange (e) // Den tiltenkte tilbakebetaling ...
Dette kan se ganske trivielt ut, men husk dette legger til. Hvis du bare skal målrette mot moderne nettlesere, enten på skrivebord eller mobiltelefoner, så er det ikke noe reelt behov for alle disse ekstrakontrollene og hackene. Ved å kutte ned dine tiltenkte nettlesere, vinner du på både båndbredde og ytelse!
Jeg hører dere sier "Nok buildup! Fortell oss om darn-biblioteket allerede!". Så la oss komme til det.
Zepto, som tittelen bortskjemt det for deg, er en mobil JavaScript-rammeverk som korrigerer begge problemene nevnt ovenfor. Den har en veldig liten kodebase og er fjærvekt på rundt 8kb.
Den klarer å være så svelte ved for det meste å kutte ut kors nettleseren ting. Da det ble opprettet, var hovedfokuset bare å støtte Webkit. Den mobile versjonen av Webkit for å være nøyaktig. Nå har den blitt utvidet til å fungere med desktop-nettlesere - men bare moderne. Ikke mer klutzing rundt for å få ting til å fungere dette IE6!
Zepto API er jQuery-kompatibel. Hvis du bruker jQuery, vet du allerede hvordan du bruker Zepto.
Et annet område der Zepto klarer å være liten, er hvordan den klarer å unngå funksjonsoppblåsthet. Kjernebiblioteket ser ikke ut til å inneholde noen ytre funksjonalitet. Selv AJAX- og animasjonsfunksjonaliteten er tilgjengelig som separate moduler, hvis behovet oppstår. For brukere som primært bruker biblioteker til DOM-traversal og manipulasjon, er dette en fullstendig gud send.
Og, å nevnte jeg Zeptos hovedparti? Zepto API er jQuery-kompatibel. Hvis du bruker jQuery, vet du allerede hvordan du bruker Zepto.
Ja og nei. Avhenger er et mer passende svar.
Ja, fordi Zepto kjernep API ligner jQuery i stor grad. For å gjøre det enkelt å bruke og dramatisk redusere læringskurven, emulerer Zepto jQuery's API. De fleste av de brukte metodene, som DOM-manipulering, heter ganske mye det samme og har samme parametre i samme rekkefølge. Metodens signaturer er de samme, for ingeniører der ute.
La oss se på et lite eksempel:
Accentsconagua
$ ('# element'). html ("Hei! Er du på GW2 beta?"); Ser kjent ut? Det burde. Dette er nøyaktig samme kode som du vil bruke med jQuery for å endre HTML til et element. Som nevnt, er dette ikke begrenset til bare denne metoden. De fleste DOM-operasjoner er bygget på samme måte sammen med verktøyene dine, som AJAX.
På forsiden er API ikke en 100% kamp. Zepto avviser noen metoder som er tilstede i jQuery, som kan ødelegge koden din. Og like viktig, siden Zepto er en delmengde av jQuery, vil du sannsynligvis gå glipp av bestemte funksjoner som er bygd inn -- Utsatt er et fint eksempel. Du kan ikke bytte ut jQuery med Zepto og forventer at alt skal fungere.
Og for meg er den største hindringen metodene som har blitt kopiert fra jQuery, men har en annen signatur og funksjonssett. Det blir litt frustrerende når du tror du bruker en metode, men du er ikke. Klonemetodenes evne til å kopiere hendelseshåndterere er et godt eksempel. Uten å se på kilden, ville jeg egentlig ikke ha funnet dette ut.
Hvis du har jobbet med jQuery før, bør alt under være en snooze fest.
Nok chit chat, la oss dykke inn i noen kode nå. Som med mange moderne biblioteker er DOM-traversering og manipulering en kjernefunksjon som alle ønsker å perfeksjonere. Siden API og generell funksjonalitet er veldig lik jQuery, tror jeg at du sikkert kan anta at alt er topp hakk.
La oss ta en titt på noen vanlige DOM-relaterte funksjoner.
Dette er brød og smør av DOM-operasjoner: lesing eller endring av HTML-innholdet i et element. Med Zepto er det like enkelt som å ringe html metode på beholderen, og passerer i den nye HTML, hvis nødvendig.
Dette får for eksempel HTML til et element og lagrer det i en variabel.
var containerText = $ ('# element'). html (); Eller hvis du vil bytte den til noe annet:
$ ('# element'). html ("Hola there!"); Ganske enkelt, rett?
Som med jQuery bruker Zepto bruk av føyer og foranstilt metoder. Og invokasjonen forblir den samme også.
$ ( '# Element'). Append ("Dette er det vedlagte elementet.
"); // eller $ ('# element'). prepend ("Dette er det vedlagte elementet.
"); Hendelser er ryggraden i ethvert moderne program, og Zepto gir deg en mengde enkle å bruke metoder for å få jobben din ferdig. Hoveddelen av arbeidet gjøres gjennom på metode.
$ ('# element'). på ('klikk', funksjon (e) // Din kode her); Lett å lese og lett å analysere. Hvis du føler deg gammel skole og har lyst til å bruke bind, delegere eller bo fremgangsmåter, ikke. Akkurat som med jQuery, blir de avskrevet her.
Ethvert moderne lavnivå bibliotek trenger å gi en enkel å bruke wrapper rundt AJAX og Zepto lar deg ikke her nede. Her er et eksempel på en super enkel AJAX-forespørsel.
$ .ajax (type: 'POST', url: '/ prosjekt', data: navn: 'Super Volcano Lair', dataType: 'json', suksess: funksjon (data) // Gjør noen fine ting her , feil: funksjon (xhr, type) alarm ('YU NO WORK?')); Ting kan se litt komplisert ut, men det vi gjør kan kokes ned til:
Som med jQuery, er det en egen metode for en GET- eller POST-forespørsel, eller at de bare skal laste opp noe webinnhold.
Hva kommer verden til å komme uten noen animasjoner? Zepto avslører den allmektige animere metode som skal håndtere mest av dine animasjonsbehov.
$ ('# element'). animate (opacity: 0.50, top: '30px', farge: '# 656565', 0,5) Vi velger i utgangspunktet elementet som skal animeres, påberåbe seg animere metode og spesifiser egenskapene som skal animeres, samt tiden det skal ta for å fullføre animasjonen. Zepto gjør resten.
Eller hvis du bare trenger å vise og skjule et element, bør byttet fungere helt fint.
Jeg tror du får poenget her - Zepto er DOM, animasjon og hendelser API emulerer jQuery i stor grad. Og som vi alle vet, er jQuery darn bra med disse tingene. Hvis du har jobbet med jQuery før, bør du ikke stå overfor for mye problemer her.
Zepto gir deg noen få berøringsspesifikke hendelser som du kan utnytte i appene dine. Disse inkluderer:
Her er et raskt eksempel, glatt av Zeptos dokumentasjon.
Når et listeelement blir feid, er hvert annet listelements sletteknapp skjult, og bare nåværende er vist. Ved å trykke på en sletteknapp fjerner du den overordnede li-delen for den knappen som skal fjernes fra DOM.
Dette bør være ganske lik det hvordan du vanligvis håndterer hendelser, med unntak av at du har bindende håndterer til forskjellige hendelser, det er alt.
Med tanke på hva og hvem jeg utvikler for, er dette perfekt for meg; men som det alltid er, kan kjørelengde varierer.
Vel, det handler om nesten alt det er til Zepto. På den kjernen var det ment å være en mager, fri versjon av jQuery som kunne brukes på mobile enheter. Over tid har det slått seg inn i et magert bibliotek som gjør unna med å støtte arkaiske nettlesere.
Med tanke på hva og hvem jeg utvikler for, er dette perfekt for meg; men som det alltid er, kan kjørelengde varierer. Du kan være låst inn ved hjelp av jQuery-plugins som krever ikke-trivielle modifikasjoner for å få det til å fungere under Zepto eller bare ha mer tro på jQuery.
Uansett må du virkelig gi Zepto et forsøk på å se hvordan det passer inn i arbeidsflyten din før du skriver den av. Jeg gjorde det, og jeg elsker det!
Vel, det er alt fra meg i dag. Gi meg beskjed om hva du synes i kommentarene nedenfor, og takk så mye for å lese!
