Share
Moderne JavaScript-bibliotheken zijn nogal de giganten - kijk maar eens naar jQuery. Wanneer u een mobiele app maakt of zelfs alleen op moderne browsers target, wordt een bibliotheek die veel soberder en handiger is een smakelijker voorstel.
Vandaag gaan we naar zo'n bibliotheek gaan kijken, genaamd Zepto.
Een ding dat voorbij de meeste radars is geslopen, is de opkomst van mobiele apparaten.
Kijk, het internet en de technologie die het aandrijft, is de afgelopen jaren in sprongen gestegen. We zijn overgestapt van statische sites naar webapplicaties naar dynamische webapplicaties en vervolgens naar realtime, hyperreactieve, thingamabob-apps van vandaag. Een ding dat voorbij de meeste radars is geslopen, is de opkomst van mobiele apparaten.
Denk er eens over na: veel van ons gebruiken smartphones en gebruiken het om constant te browsen. Zelfs thuis, heeft een niet-triviaal deel van mijn cirkel een tablet gebruikt voor informeel surfen en e-mailen. Hoewel deze toestroom van apparaten goed is vanuit het oogpunt van blootstelling, is dit niet zonder voorbehoud.
In plaats van te denken aan deze apparaten zoals display-beperkingen zoals consumenten dat doen, moeten we als ontwikkelaars eraan denken in termen van bronnen en bandbreedte. Niet alle sporten hebben een hyper quad gajillion Ghz CPU of komen met een hoop geheugen. En laten we niet eens beginnen met de bandbreedte. Een groot deel van de browsebevolking zit nog steeds vast aan deze helse excuses voor een mobiele internetverbinding.
Ik denk dat je ziet waar ik heen ga. Grote, monolithische bibliotheken zoals jQuery of Prototype hebben zeker hun plaats, maar voor dit mobiele tijdperk denk ik dat er een plaats is voor iets dat veel wendbaarder is. En veel ontwikkelaars lijken het met mij eens te zijn.
Een ander groot probleem dat ik niet heb genoemd, is dat hedendaagse bibliotheken dat doen lot van cross-browser dingen. Een groot voordeel van jQuery was in eerste instantie dat het een groot deel van de cross-browser-eigenzinnigheid wegnam die front-endontwikkelaars moesten omzeilen. Zelfs nu doet jQuery veel zwaar tillen onder de motorkap om ervoor te zorgen dat niets in verschillende browsers breekt.
Maar als je een ontwikkelaar bent die op zoek is naar hedendaagse apparaten, heb je dit allemaal echt nodig, durf ik te zeggen, cruft? Het korte antwoord is nee. Door onnodige code te verwijderen, beiden:
Denk je dat dit probleem overdreven is? Hier is een willekeurige klodder code uit de bron van jQuery:
isPlainObject: function (obj) // moet een object zijn. // Vanwege IE moeten we ook de aanwezigheid van de constructoreigenschap controleren. // Zorg ervoor dat DOM-knooppunten en vensterobjecten niet passeren, evenals (! Obj || jQuery.type (obj)! == "object" || obj.nodeType || jQuery.isWindow (obj)) return false; ...
Of iets esoterischer:
// Voer een eenvoudige controle uit om te bepalen of de browser in staat is // een NodeList naar een array te converteren met behulp van ingebouwde methoden. // Controleert ook of de geretourneerde array DOM-knooppunten bevat // (wat niet het geval is in de Blackberry-browser) probeer Array.prototype.slice.call (document.documentElement.childNodes, 0) [0] .nodeType; // Geef een terugvalmethode als deze niet werkt catch (e) // De beoogde fallback ...
Dit ziet er misschien vrij triviaal uit maar houd er rekening mee dat dit vaak klopt. Als u alleen moderne browsers wilt targeten, op desktops of mobiele apparaten, dan is er geen echte behoefte aan al deze extra controles en hacks. Door uw beoogde browsers te beperken, wint u zowel bandbreedte als prestaties!
Ik hoor jullie zeggen "genoeg opbouw! Vertel ons eens over de verdomde bibliotheek!". Dus laten we er naar toe gaan.
Zepto, zoals de titel het voor jou verwende, is een mobiel JavaScript-framework dat beide hierboven genoemde problemen rechtzet. Het heeft een zeer kleine codebasis en heeft een gewicht van ongeveer 8 kb.
Het lukt om zo soepel te zijn door meestal cross-browser dingen uit te snijden. Toen het werd gemaakt, was de belangrijkste focus om alleen Webkit te ondersteunen. De mobiele versie van Webkit om precies te zijn. Het is nu ook uitgebreid met desktopbrowsers - maar alleen moderne browsers. Niet meer klutsen rond om dingen te laten werken deze IE6!
De API van Zepto is compatibel met jQuery. Als u jQuery gebruikt, weet u al hoe u Zepto moet gebruiken.
Een ander gebied waar Zepto klein is, is hoe het erin slaagt bloat te voorkomen. De kernbibliotheek lijkt geen externe functionaliteit te bevatten. Zelfs de AJAX- en animatiefunctionaliteit zijn beschikbaar als afzonderlijke modules, mocht dit nodig zijn. Voor gebruikers die voornamelijk bibliotheken gebruiken voor DOM-traversal en -manipulatie, is dit een ultieme godsverzending.
En, oh, heb ik het belangrijkste feeststuk van Zepto genoemd? De API van Zepto is compatibel met jQuery. Als u jQuery gebruikt, weet u al hoe u Zepto moet gebruiken.
Ja en nee. Afhankelijk is een meer geschikt antwoord.
Ja, omdat de kern-API van Zepto jQuery grotendeels nabootst. Om het gemakkelijk in gebruik te maken en de leercurve drastisch te verminderen, emuleert Zepto de API van jQuery. De meeste van de vaak gebruikte methoden, zoals DOM-manipulatie, worden vrijwel hetzelfde genoemd en hebben dezelfde parameters in dezelfde volgorde. De handtekeningen van de methoden zijn hetzelfde, voor de technici die er zijn.
Laten we een klein voorbeeld bekijken:
Accentsconagua
$ ('# element'). html ("Hé, bent u in de GW2-bèta?"); Komt me bekend voor? Het zou moeten. Dit is exact dezelfde code die u zou gebruiken bij jQuery om de HTML van een element te wijzigen. Zoals ik al zei, dit is niet beperkt tot alleen deze methode. De meeste DOM-bewerkingen worden op dezelfde manier samen met uw hulpprogramma's, zoals AJAX, gebouwd.
Aan de andere kant is de API geen 100% overeenkomst. Zepto gaat af op enkele methoden in jQuery die uw code kunnen breken. En net zo belangrijk, omdat Zepto een subset van jQuery is, mis je waarschijnlijk specifieke functionaliteiten die zijn ingebouwd in -- uitgestelde is een goed voorbeeld. Je kunt jQuery eenvoudigweg niet met Zepto uitwisselen en verwachten dat alles werkt.
En voor mij zijn de grootste hindernis de methoden die gekopieerd zijn vanuit jQuery, maar een andere handtekening en functies hebben. Het wordt een beetje frustrerend als je denkt dat je een methode goed gebruikt, maar dat is niet zo. De mogelijkheid van de kloonmethode om gebeurtenishandlers te kopiëren is een goed voorbeeld. Zonder naar de bron te kijken, zou ik dit echt niet hebben ontdekt.
Als je eerder met jQuery hebt gewerkt, moet alles hieronder een snooze fest zijn.
Genoeg chit-chat, laten we nu wat code in duiken. Zoals met veel moderne bibliotheken is DOM traversal en manipulatie een kernelement dat iedereen wil perfectioneren. Omdat de API en de algehele functionaliteit erg op jQuery lijken, denk ik dat je veilig kunt aannemen dat alles van topkwaliteit is.
Laten we eens kijken naar enkele algemene DOM-gerelateerde functies.
Dit is het brood en de boter van DOM-bewerkingen: het lezen of wijzigen van de HTML-inhoud van een element. Met Zepto is het net zo eenvoudig als de html methode op de container en, indien nodig, doorgeven in de nieuwe HTML.
Dit verkrijgt bijvoorbeeld de HTML van een element en slaat het op in een variabele.
var containerText = $ ('# element'). html (); Of als u het wilt wijzigen in iets anders:
$ ('# element'). html ("Hola there!"); Best simpel, toch?
Net als jQuery maakt Zepto gebruik van de toevoegen en prepend methoden. En de invokatie blijft ook hetzelfde.
$ ( '# Element'). Toevoegen ("Dit is het bijgevoegde element.
"); // of $ ('# element'). prepend ("Dit is het bijgevoegde element.
"); Evenementen vormen de ruggengraat van elke moderne toepassing en Zepto biedt u een aantal eenvoudig te gebruiken methoden om uw klus te klaren. Het grootste deel van het werk wordt gedaan via de op methode.
$ ('# element'). on ('klik', functie (e) // Uw code hier); Gemakkelijk te lezen en gemakkelijk te ontleden. Als je je op de oude school voelt en zin hebt om te gebruiken binden, delegeren of leven methoden, niet doen. Net als met jQuery zijn ze hier verouderd.
Elke moderne bibliotheek op laag niveau moet een gemakkelijk te gebruiken verpakking rond AJAX bieden en Zepto laat je niet hier beneden. Hier is een voorbeeld van een supereenvoudige AJAX-aanvraag.
$ .ajax (type: 'POST', url: '/ project', data: name: 'Super Volcano Lair', gegevenstype: 'json', succes: functie (gegevens) // Doe hier leuke dingen , error: function (xhr, type) alert ('YU NO WORK?')); Dingen zien er misschien een beetje ingewikkeld uit maar wat we doen kan worden verzacht tot:
Net als bij jQuery, zijn er afzonderlijke methoden voor een GET- of POST-aanvraag of om alleen maar wat webinhoud te laden.
Waar komt de wereld naar toe zonder een paar animaties? Zepto stelt de almachtige tentoon bezielen methode die zou moeten werken meest van je animatievereisten.
$ ('# element'). animeren (opacity: 0.50, top: '30px', color: '# 656565', 0.5) We selecteren in feite het element dat moet worden geanimeerd, waarbij het wordt aangeroepen bezielen methode en geef de eigenschappen op die moeten worden geanimeerd, evenals de tijd die nodig is om het animeren te beëindigen. Zepto doet de rest.
Of als je een element gewoon moet laten zien en verbergen, zou de toggle prima moeten werken.
Ik denk dat je het goed begrijpt - Zepto's DOM, animation and events API emuleert grotendeels die van jQuery. En zoals we allemaal weten, jQuery is verdomd goed met die dingen. Als je eerder met jQuery hebt gewerkt, zou je hier niet al te veel moeite moeten doen.
Zepto biedt u een aantal aanraakspecifieke gebeurtenissen die u kunt gebruiken in uw apps. Waaronder:
Hier is een snel voorbeeld, heerlijk opgepakt uit de documentatie van Zepto.
Wanneer een lijstitem wordt geveegd, wordt de verwijderknop van elk ander lijstelement verborgen en wordt alleen de huidige weergegeven. Als u op een delete-knop tikt, wordt het bovenliggende item van die knop verwijderd uit de DOM.
Dit moet redelijk lijken op hoe je in het algemeen met evenementen omgaat, behalve dat je je handlers aan verschillende evenementen koppelt, dat is alles.
Gezien wat en voor wie ik ontwikkel, is dit perfect voor mij; maar zoals het altijd is, kan uw aantal kilometers variëren.
Nou, dat is bijna alles wat er is voor Zepto. In de kern was het bedoeld als een lean, cruft-vrije versie van jQuery die op mobiele apparaten kon worden gebruikt. Na verloop van tijd is het veranderd in een magere bibliotheek die archaïsche browsers niet langer ondersteunt.
Gezien wat en voor wie ik ontwikkel, is dit perfect voor mij; maar zoals het altijd is, kan uw aantal kilometers variëren. U kunt worden vastgehouden aan het gebruik van jQuery-plug-ins die niet-triviale wijzigingen vereisen om deze onder Zepto te laten werken of om gewoon meer vertrouwen te hebben in jQuery.
Hoe dan ook, je moet Zepto echt eens proberen om te zien hoe het in je workflow past voordat je het wegschrijft. Ik deed en ik hou ervan!
Wel, dat is alles van mij vandaag. Laat me weten wat je denkt in de reacties hieronder en bedankt voor het lezen!
