Share
Moderna JavaScript-bibliotek är ganska behemoths - bara ta en titt på jQuery. När du skapar en mobilapp, eller ens riktar in mot moderna webbläsare, blir ett bibliotek som är mycket mer svelte och nimble ett smakligare förslag.
Idag ska vi titta på ett sådant bibliotek med namnet Zepto.
En sak som har snuck förbi de flesta radorer har varit uppkomsten av mobila enheter.
Se, internet och den teknik som driver den, har vuxit i språng under de senaste åren. Vi flyttade från statiska webbplatser till webbapplikationer till dynamiska webbapplikationer och sedan till realtid, hyperlarmande, sakjobb-apps idag. En sak som har snuck förbi de flesta radorer har varit uppkomsten av mobila enheter.
Tänk på det: många av oss använder smarta telefoner och använder den för att bläddra på en konstant basis. Även hemma har en icke-trivial del av min cirkel antagit en tablettanordning för avslappnad surfning och e-post. Medan denna tillströmning av enheter är bra ur en exponeringssynpunkt, är det inte utan dess tillvägagångssätt.
I stället för att tänka på dessa apparater som visning begränsad som konsumenter gör, måste vi som utvecklare tänka på dem när det gäller resurser och bandbredd. Inte alla sportar en hyper quad gajillion Ghz CPU eller kommer med minne av minne. Och låt oss inte ens komma igång med bandbredd. En stor del av den surfa befolkningen är fortfarande fast vid dessa infernaliska ursäkter för en mobil internetanslutning.
Jag tror att du ser var jag går med det här. Stora, monolitiska bibliotek som jQuery eller Prototype har definitivt sin plats, men för den här mobila eran tror jag att det finns en plats för något som är mycket mer smidigt. Och många utvecklare verkar hålla med mig.
En annan stor fråga som jag misslyckades med att nämna är att samtida bibliotek gör en massa av kors webbläsare grejer. I själva verket var en stor rita av jQuery, i första hand, hur det abstraherade bort en hel del korsbläsarens quirkiness som frontend utvecklare var tvungna att arbeta runt. Även nu gör jQuery mycket tungt under huven för att se till att ingenting bryts i olika webbläsare.
Men om du är en utvecklare som vill tillgodose bara moderna enheter, behöver du verkligen allt detta, vågar jag säga, cruft? Det korta svaret är nej. Genom att skära ut onödig kod, både du:
Tänk på att problemet är överblåst? Här är en slumpmässig kodkod från jQuery: s källa:
isPlainObject: funktion (obj) // Måste vara ett objekt. // På grund av IE måste vi också kontrollera närvaron av konstruktorns egendom. // Se till att DOM-noder och fönsterobjekt inte går igenom, såväl (! Obj || jQuery.type (obj)! == "object" || obj.nodeType || jQuery.isWindow (obj)) return false; ...
Eller något lite mer esoteriskt:
// Utför en enkel check för att avgöra om webbläsaren kan // konvertera en NodeList till en array med inbyggda metoder. // Verifierar också att den returnerade gruppen innehåller DOM-noder // (vilket inte är fallet i Blackberry-webbläsaren) försök Array.prototype.slice.call (document.documentElement.childNodes, 0) [0] .nodeType; // Lämna en återgångsmetod om den inte fungerar fånga (e) // Den avsedda återgången ...
Det kan se ganska trivialt ut, men kom ihåg det här tenderar att lägga till. Om du bara ska rikta in moderna webbläsare, antingen på stationära eller mobila enheter, så finns det inget riktigt behov av alla dessa ytterligare kontroller och hackar. Genom att skära ner dina avsedda webbläsare, vinner du på både bandbredd och prestanda!
Jag hör att ni säger "Enough buildup! Berätta för oss om darn-biblioteket redan!". Så låt oss ta itu med det.
Zepto, som titeln bortskämde det för dig, är en mobil JavaScript-ram som korrigerar båda problemen ovan. Den har en mycket liten kodbas och är fjädervikt på ca 8kb.
Det klarar sig att vara så svelte genom att mestadels klippa ut webbläsaren. När den skapades var huvudfokusen att endast stödja Webkit. Den mobila versionen av Webkit är exakt. Nu har den blivit utökad för att fungera med skrivbords-webbläsare - men bara moderna. Inte mer klutzing runt för att få saker att fungera här IE6!
Zeptos API är jQuery-kompatibelt. Om du använder jQuery vet du redan hur du använder Zepto.
Ett annat område där Zepto lyckas vara liten är hur man klarar av att undvika funktionen uppblåst. Kärnbiblioteket verkar inte innehålla någon yttre funktionalitet. Även AJAX- och animationsfunktionen finns som separata moduler, om behovet skulle uppstå. För användare som främst använder bibliotek för DOM-traversering och manipulation är detta en fullständig gudsändning.
Och, åh nämnde jag Zeptos huvudparti? Zeptos API är jQuery-kompatibelt. Om du använder jQuery vet du redan hur du använder Zepto.
Ja och nej. Beror är ett mer lämpligt svar.
Ja, eftersom Zeptos kärna API liknar jQuery i stor utsträckning. För att göra det enkelt att använda och dramatiskt minska inlärningskurvan emulerar Zepto jQuery API. De flesta av de ofta använda metoderna, som DOM-manipulation, heter ganska mycket samma och har samma parametrar i samma ordning. Metodens signaturer är desamma, för ingenjörerna där ute.
Låt oss titta på ett litet exempel:
Accentsconagua
$ ('# element'). html ("Hej! Är du på GW2 beta?"); Ser bekant ut? Det borde. Det här är exakt samma kod som du skulle använda med jQuery för att ändra HTML för ett element. Som jag nämnde är detta inte begränsat till just denna metod. De flesta DOM-operationer byggs på samma sätt tillsammans med dina verktyg, som AJAX.
På flipsidan är API inte en 100% matchning. Zepto avvisar vissa metoder som finns i jQuery som kan bryta din kod. Och lika viktigt, eftersom Zepto är en delmängd av jQuery, kommer du förmodligen att sakna specifika funktioner som är inbyggda i -- uppskjuten är ett bra exempel. Du kan helt enkelt inte byta ut jQuery med Zepto och förvänta dig att allt ska fungera.
Och för mig är den största hindren metoderna som har kopierats från jQuery men har en annan signatur och funktionssats. Det blir lite frustrerande när du tror att du använder en metod rätt men du är inte. Klonmetodens förmåga att kopiera händelsehanterare är ett bra exempel. Utan att titta på källan hade jag verkligen inte hittat det här.
Om du har arbetat med jQuery innan, bör allt nedan vara en snooze fest.
Nog chitchatt, låt oss dyka in i någon kod nu. Som med många moderna bibliotek är DOM-traverse och manipulation en kärnfunktion som alla vill göra perfekt. Eftersom API och övergripande funktionalitet är mycket lik jQuery, tror jag att du säkert kan anta att allt är högst upp.
Låt oss ta en titt på några vanliga DOM-relaterade funktioner.
Detta är bröd och smör av DOM-operationer: läsning eller ändring av HTML-innehållet i ett element. Med Zepto är det lika enkelt som att ringa html metod på behållaren, och passerar i den nya HTML, om det behövs.
Detta får till exempel HTML-värdet av ett element och lagras i en variabel.
var containerText = $ ('# element'). html (); Eller om du vill byta till något annat:
$ ('# element'). html ("Hola there!"); Ganska enkelt, rätt?
Som med jQuery använder Zepto användningen av bifoga och prepend metoder. Och invokationen förblir densamma också.
$ (# Inslag). Bifoga ("Detta är det bifogade elementet.
"); // eller $ ('# element'). prepend ("Detta är det bifogade elementet.
"); Händelser är ryggraden i alla moderna applikationer och Zepto ger dig en massa lättanvända metoder för att få ditt jobb gjort. Huvuddelen av arbetet görs genom på metod.
$ ('# element'). på ('klick', funktion (e) // Din kod här); Lätt att läsa och lätt att analysera. Om du känner dig gammal och tycker om att använda binda, delegera eller leva metoder, inte. Precis som med jQuery, är de borttagna här.
Något modernt lågnivåbibliotek behöver tillhandahålla ett lättanvänt omslag runt AJAX och Zepto låter dig inte härifrån. Här är ett exempel på en super enkel AJAX-förfrågan.
$ .ajax (typ: 'POST', url: '/ project', data: namn: 'Super Volcano Lair', dataType: 'json', framgång: funktion (data) // Gör några fina saker här , fel: funktion (xhr, typ) alert ('YU NO WORK?')); Saker kan se lite komplicerat men det vi gör kan kokas ner till:
Precis som med jQuery finns det separat metod för en GET- eller POST-förfrågan eller att bara ladda upp något webinnehåll.
Vad kommer världen att komma till utan några animeringar? Zepto utsätter den allsmäktige animera metod som ska hantera mest av dina animerande behov.
$ '# element'). animera (opacitet: 0,50, topp: '30px', färg: '# 656565', 0,5)
Vi väljer i grunden elementet som ska animeras, påkallar animera metod och ange egenskaperna som ska animeras, liksom den tid det ska ta för att slutföra animering. Zepto gör resten.
Eller om du bara behöver visa och gömma ett element, ska växeln fungera bra.
Jag tror att du får poängen här - Zeptos DOM, animering och händelser API emulerar jQuery i stor utsträckning. Och som vi alla vet är jQuery bra med dessa saker. Om du har arbetat med jQuery innan ska du inte möta för mycket problem här.
Zepto ger dig några speciella händelser som du kan utnyttja i dina appar. Dessa inkluderar:
Här är ett snabbt exempel, glatt av Zeptos dokumentation.
När ett listobjekt raderas är alla andra listelementets raderingsknack gömda och endast strömmen visas. Om du trycker på en raderingsknapp tar du bort den knappens överordnade li-artikel som ska tas bort från DOM.
Detta borde vara ungefär som hur du hanterar händelser, förutom att du har bindande dina hanterare till olika händelser, det är allt.
Med tanke på vad och vem jag utvecklar för, är det perfekt för mig; men som alltid kan din körsträcka variera.
Tja, det handlar om nästan allt som finns till Zepto. I sin kärna var det tänkt att vara en mager, cruffri version av jQuery som kunde användas på mobila enheter. Med tiden har det förvandlats till ett magert bibliotek som gör bort med stödjande arkaiska webbläsare.
Med tanke på vad och vem jag utvecklar för, är det perfekt för mig; men som alltid kan din körsträcka variera. Du kan vara låst i att använda jQuery-plugins som kräver icke-triviala ändringar för att den ska fungera under Zepto eller bara ha mer tro på jQuery.
Hur som helst måste du verkligen ge Zepto ett försök att se hur det passar in i ditt arbetsflöde innan du skriver det av. Jag gjorde och jag älskar det!
Jo, det är allt från mig idag. Låt mig veta vad du tycker i kommentarerna nedan och tack så mycket för att läsa!
