Share
Le moderne librerie JavaScript sono piuttosto dei colossi: basta dare un'occhiata a jQuery. Quando crei un'applicazione per dispositivi mobili, o anche solo per i browser moderni, una libreria molto più snella e agile diventa una proposta più gustosa.
Oggi esamineremo una di queste librerie, chiamata Zepto.
Una cosa che ha superato la maggior parte dei radar è stata l'ascesa dei dispositivi mobili.
Vedi, Internet e la tecnologia che lo alimenta sono cresciuti a dismisura negli anni passati. Siamo passati da siti statici a applicazioni Web a applicazioni web dinamiche e quindi a applicazioni in tempo reale, iper-reattivi e oggettuali di oggi. Una cosa che ha superato la maggior parte dei radar è stata l'ascesa dei dispositivi mobili.
Pensaci: molti di noi usano gli smartphone e li usano per navigare costantemente. Anche a casa, una parte non banale della mia cerchia ha adottato un dispositivo tablet per la navigazione occasionale e la posta elettronica. Mentre questo afflusso di dispositivi è buono dal punto di vista dell'esposizione, non è privo di avvertimenti.
Invece di pensare a questi dispositivi come display vincolati come fanno i consumatori, noi, in quanto sviluppatori, dobbiamo pensare a loro in termini di risorse e larghezza di banda. Non tutti presentano una CPU Ghz iper quad-gajillion o sono dotati di una gran quantità di memoria. E non iniziamo nemmeno con la larghezza di banda. Una gran parte della popolazione di navigazione è ancora bloccata su queste scuse infernali per una connessione internet mobile.
Penso che tu veda dove sto andando con questo. Grandi librerie monolitiche come jQuery o Prototype hanno sicuramente il loro posto, ma per questa era mobile, penso che ci sia un posto per qualcosa che è molto più agile. E molti sviluppatori sembrano essere d'accordo con me.
Un altro grosso problema che ho omesso di menzionare è che le librerie contemporanee fanno a lotto di cose cross browser. In effetti, una grande attrazione di jQuery, inizialmente, è stata la sua capacità di sottrarre un sacco di bizzarrie cross-browser che gli sviluppatori di front-end hanno dovuto risolvere. Anche ora, jQuery fa un sacco di sollevamento pesante sotto il cofano per assicurarsi che non si rompa nulla in browser diversi.
Ma se sei uno sviluppatore che cerca di soddisfare solo i dispositivi contemporanei, hai davvero bisogno di tutto questo, oserei dire, cruft? La risposta breve è no. Tagliando il codice non necessario, entrambi:
Pensi che questo problema sia esagerato? Ecco un blob casuale di codice proveniente dalla sorgente di jQuery:
isPlainObject: function (obj) // Deve essere un oggetto. // A causa di IE, dobbiamo anche verificare la presenza della proprietà del costruttore. // Assicurati che i nodi DOM e gli oggetti della finestra non passino, anche se (! Obj || jQuery.type (obj)! == "object" || obj.nodeType || jQuery.isWindow (obj)) return false; ...
O qualcosa di un po 'più esoterico:
// Esegui un semplice controllo per determinare se il browser è in grado di // convertire un NodeList in un array usando metodi built-in. // Verifica anche che l'array restituito abbia i nodi DOM // (che non è il caso nel browser Blackberry) prova Array.prototype.slice.call (document.documentElement.childNodes, 0) [0] .nodeType; // Fornire un metodo di fallback se non funziona catch (e) // Il fallback previsto ...
Questo può sembrare abbastanza banale, ma tieni presente che questo tende a sommarsi. Se sceglierai solo i browser moderni, su desktop o cellulari, non avrai più bisogno di tutti questi controlli aggiuntivi e hack. Riducendo i browser desiderati, vinci sia per larghezza di banda che per prestazioni!
Ti ho sentito dire "Basta accumulo! Parlaci già della libreria di Darn!". Quindi proviamoci.
Zepto, come il titolo lo ha rovinato per te, è un mobile Framework JavaScript che rettifica entrambi i problemi sopra menzionati. Ha una base di codice molto piccola ed ha un peso piuma di circa 8kb.
Riesce ad essere così snello soprattutto tagliando fuori le cose cross browser. Quando è stato creato, l'obiettivo principale era quello di supportare solo Webkit. La versione mobile di Webkit per essere esatta. Ora è stato ampliato per funzionare anche con i browser desktop, ma solo quelli moderni. Non più klutzing in giro per far funzionare le cose questo IE6!
L'API di Zepto è compatibile con jQuery. Se usi jQuery, sai già come usare Zepto.
Un'altra area in cui Zepto riesce a essere piccola è il modo in cui riesce a evitare il gonfiarsi delle funzionalità. La libreria principale non sembra includere alcuna funzionalità estranea. Anche le funzionalità AJAX e di animazione sono disponibili come moduli separati, in caso di necessità. Per gli utenti che utilizzano principalmente le librerie per la navigazione e la manipolazione del DOM, questo è un invio di dio assoluto.
E, oh, ho menzionato il pezzo principale di Zepto? L'API di Zepto è compatibile con jQuery. Se usi jQuery, sai già come usare Zepto.
Sì e no. Dipende è una risposta più adatta.
Sì, perché l'API core di Zepto imita jQuery in larga misura. Per semplificare l'uso e ridurre drasticamente la curva di apprendimento, Zepto emula l'API di jQuery. La maggior parte dei metodi spesso usati, come la manipolazione DOM, sono identificati in modo pressoché identico e hanno gli stessi parametri nello stesso ordine. Le firme del metodo sono le stesse, per gli ingegneri là fuori.
Diamo un'occhiata ad un piccolo esempio:
Accentsconagua
$ ('# elemento'). html ("Ehi, sei sulla versione beta di GW2?"); Sembra familiare? Dovrebbe. Questo è esattamente lo stesso codice che useresti con jQuery per modificare l'HTML di un elemento. Come ho già detto, questo non è limitato solo a questo metodo. La maggior parte delle operazioni DOM sono costruite allo stesso modo insieme alle tue utilità, come AJAX.
Il rovescio della medaglia, l'API non è una corrispondenza del 100%. Zepto rinuncia a alcuni metodi presenti in jQuery che è suscettibile di infrangere il tuo codice. E altrettanto importante, dal momento che Zepto è un sottoinsieme di jQuery, probabilmente ti mancheranno funzionalità specifiche che sono costruite in -- differite è un buon esempio. Non puoi semplicemente scambiare jQuery con Zepto e aspettarti che tutto funzioni.
E per me, il più grande ostacolo sono i metodi che sono stati copiati da jQuery ma hanno una firma e un set di funzionalità diversi. Diventa un po 'frustrante quando pensi di usare un metodo giusto ma non lo sei. L'abilità del metodo clone di copiare i gestori di eventi è un buon esempio. Senza guardare la fonte, davvero non l'avrei scoperto.
Se hai già lavorato con jQuery, tutto qui sotto dovrebbe essere un snooze fest.
Basta chiacchierare con la chiacchierata, passiamo ora al codice. Come con molte delle moderne librerie, DOM traversal e manipulation è una caratteristica fondamentale che tutti vogliono perfezionare. Dal momento che l'API e la funzionalità generale sono molto simili a jQuery, penso che si possa tranquillamente pensare che tutto sia di prim'ordine.
Diamo un'occhiata ad alcune comuni funzionalità correlate a DOM.
Questo è il pane e il burro delle operazioni DOM: leggere o modificare i contenuti HTML di un elemento. Con Zepto, è semplice come chiamare il html metodo sul contenitore e passando il nuovo codice HTML, se necessario.
Ad esempio, questo ottiene l'HTML di un elemento e lo memorizza in una variabile.
var containerText = $ ('# element'). html (); O se vuoi cambiarlo in qualcos'altro:
$ ('# elemento'). html ("Hola lì!"); Abbastanza semplice, giusto?
Come con jQuery, Zepto fa uso di aggiungere e anteporre metodi. E la convocazione rimane la stessa.
$ ( '# Elemento'). Append ("Questo è l'elemento aggiunto.
"); // or $ ('# elemento'). antefatto ("Questo è l'elemento aggiunto.
"); Gli eventi sono la spina dorsale di qualsiasi applicazione moderna e Zepto ti offre una serie di metodi facili da usare per portare a termine il tuo lavoro. La maggior parte del lavoro viene fatto attraverso il sopra metodo.
$ ('# elemento'). on ('click', function (e) // Il tuo codice qui); Facile da leggere e facile da analizzare. Se ti senti vecchia scuola e hai voglia di usare legare, delegare o vivere metodi, non. Proprio come con jQuery, sono deprecati qui.
Qualsiasi libreria moderna di basso livello deve fornire un wrapper facile da usare su AJAX e Zepto non ti deluderà qui. Ecco un esempio di una richiesta AJAX super semplice.
$ .ajax (tipo: 'POST', url: '/ project', data: nome: 'Super Volcano Lair', dataType: 'json', success: function (data) // Fai delle cose belle qui , errore: function (xhr, type) alert ('YU NO WORK?')); Le cose potrebbero sembrare un po 'complicate, ma quello che stiamo facendo può essere riassunto in:
Come con jQuery, esistono metodi separati per una richiesta GET o POST o semplicemente per caricare alcuni contenuti web.
A cosa arriverà il mondo senza alcune animazioni? Zepto espone l'onnipotente animare metodo che dovrebbe gestire maggior parte dei tuoi bisogni di animazione.
$ ('# elemento'). animate (opacità: 0.50, alto: '30px', colore: '# 656565', 0.5) Fondamentalmente stiamo selezionando l'elemento da animare, invocando il animare metodo e specificare le proprietà da animare e il tempo necessario per completare l'animazione. Zepto fa il resto.
O se hai solo bisogno di mostrare e nascondere un elemento, l'interruttore dovrebbe funzionare bene.
Penso che tu abbia capito il punto: il DOM di Zepto, l'API di animazione ed eventi emula in larga misura quella di jQuery. E come tutti sappiamo, jQuery è davvero buono con quelle cose. Se hai già lavorato con jQuery, non dovresti affrontare troppi problemi qui.
Zepto ti offre alcuni eventi specifici che puoi sfruttare nelle tue app. Questi includono:
Ecco un rapido esempio, deliziosamente cancellato dalla documentazione di Zepto.
Quando una voce di elenco viene trascinata, il pulsante di eliminazione di ogni altro elemento dell'elenco è nascosto e vengono visualizzate solo le voci correnti. Toccando un pulsante di cancellazione si rimuove l'elemento figlio gen del pulsante da rimuovere dal DOM.
Questo dovrebbe essere abbastanza simile a come generalmente gestisci gli eventi, tranne che hai legato i tuoi gestori a eventi diversi, tutto qui.
Considerando cosa e per chi sviluppo, questo è perfetto per me; ma come sempre, il tuo chilometraggio può variare.
Bene, questo riguarda quasi tutto quello che c'è da Zepto. Al suo centro, era pensato per essere una versione magra, libera di jQuery che potesse essere utilizzata su dispositivi mobili. Nel corso del tempo, si è trasformato in una libreria snella che elimina i browser arcaici di supporto.
Considerando cosa e per chi sviluppo, questo è perfetto per me; ma come sempre, il tuo chilometraggio può variare. Potresti essere bloccato a usare i plugin jQuery che richiedono modifiche non banali per farlo funzionare sotto Zepto o semplicemente avere più fiducia in jQuery.
In ogni caso, devi davvero provare Zepto per vedere come si adatta al tuo flusso di lavoro prima di scriverlo. L'ho fatto e lo adoro!
Bene, questo è tutto da me oggi. Fatemi sapere cosa ne pensate nei commenti qui sotto e vi ringrazio tanto per la lettura!
