Share
Moderne JavaScript-Bibliotheken sind ein absoluter Hingucker - schauen Sie sich einfach jQuery an. Wenn Sie eine mobile App erstellen oder auch nur auf moderne Browser abzielen, wird eine Bibliothek, die viel schlanker und flinker ist, zu einem geschmackvollen Angebot.
Heute schauen wir uns eine solche Bibliothek an, genannt Zepto.
Eine Sache, die an den meisten Radars vorbeigelaufen ist, war der Aufstieg von mobilen Geräten.
Das Internet und die Technologie, die es antreibt, sind in den letzten Jahren sprunghaft gewachsen. Wir haben uns von statischen Websites zu Webanwendungen zu dynamischen Webanwendungen gewandelt und dann zu realen, reaktionsschnellen Dingamabob-Apps von heute. Eine Sache, die an den meisten Radars vorbeigelaufen ist, war der Aufstieg von mobilen Geräten.
Denken Sie darüber nach: Viele von uns verwenden Smartphones und nutzen sie ständig zum Browsen. Selbst zu Hause hat ein nicht trivialer Teil meines Kreises ein Tablet für gelegentliches Surfen und E-Mail verwendet. Während dieser Einstrom von Geräten aus Sicht der Exposition gut ist, ist er nicht ohne Vorbehalte.
Anstatt diese Geräte als von den Verbrauchern abhängige Anzeige zu betrachten, müssen wir als Entwickler sie in Bezug auf Ressourcen und Bandbreite betrachten. Nicht alle verfügen über eine Hyper-Quad-Gajillion-Ghz-CPU oder eine Unmenge an Speicher. Und lassen Sie uns noch nicht einmal mit der Bandbreite beginnen. Ein großer Teil der Internetbenutzer steckt immer noch an diesen höllischen Ausreden für eine mobile Internetverbindung.
Ich glaube, Sie sehen, wohin ich damit gehe. Große, monolithische Bibliotheken wie jQuery oder Prototype haben definitiv ihren Platz, aber für diese mobile Ära denke ich, dass es einen Ort für etwas gibt, das viel flinker ist. Und viele Entwickler scheinen mir zuzustimmen.
Ein anderes großes Thema, das ich nicht erwähnen konnte, ist, dass zeitgenössische Bibliotheken ein Menge von Cross-Browser-Sachen. In der Tat war es ein großer Anreiz von jQuery, anfangs viel von der Cross-Browser-Skurrilität zu entfernen, mit der Front-End-Entwickler umgehen mussten. Selbst jetzt macht jQuery viel Gewicht unter der Haube, um sicherzustellen, dass in den verschiedenen Browsern nichts kaputt geht.
Aber wenn Sie ein Entwickler sind, der nur auf zeitgemäße Geräte abzielt, brauchen Sie wirklich alles, darf ich sagen, Scheiße? Die kurze Antwort lautet nein. Durch das Ausschneiden von unnötigem Code können Sie beide:
Denken Sie, dass dieses Problem überzogen ist? Hier ist ein zufälliger Codeblock aus jQuery's Quelle:
isPlainObject: function (obj) // Muss ein Objekt sein. // Aufgrund des IE müssen wir auch das Vorhandensein der Konstruktoreigenschaft überprüfen. // Stellen Sie sicher, dass DOM-Knoten und Fensterobjekte nicht durchlaufen, wenn (! Obj || jQuery.type (obj)! == "object" || obj.nodeType || jQuery.isWindow (obj)) falsch zurückgeben; …
Oder etwas esoterischer:
// Führen Sie eine einfache Überprüfung durch, um festzustellen, ob der Browser // eine NodeList mit integrierten Methoden in ein Array konvertieren kann. // Überprüft auch, ob das zurückgegebene Array DOM-Knoten enthält // (was im Blackberry-Browser nicht der Fall ist) try Array.prototype.slice.call (document.documentElement.childNodes, 0) [0] .nodeType; // Stellen Sie eine Fallback-Methode bereit, falls diese nicht funktioniert catch (e) // Der beabsichtigte Fallback…
Dies mag ziemlich trivial erscheinen, aber das ist in der Regel etwas. Wenn Sie nur auf moderne Browser abzielen, entweder auf Desktops oder auf Handys, müssen Sie all diese zusätzlichen Prüfungen und Hacks nicht wirklich durchführen. Durch das Reduzieren der gewünschten Browser gewinnen Sie sowohl hinsichtlich der Bandbreite als auch der Leistung!
Ich höre, wie Ihr Jungs sagt: "Genug aufgebaut! Erzählen Sie uns schon von der verdammten Bibliothek!". Also lass uns anfangen.
Zepto, wie der Titel es für Sie verdorben hat, ist ein Handy, Mobiltelefon JavaScript-Framework, das beide oben genannten Probleme behebt. Es hat eine sehr kleine Codebasis und ein Federgewicht von ca. 8kb.
Es gelingt, so schlank zu sein, dass das Cross-Browser-Material größtenteils abgeschnitten wird. Bei der Erstellung wurde hauptsächlich auf die Unterstützung von Webkit geachtet. Die mobile Version von Webkit, um genau zu sein. Jetzt wurde es auch für Desktop-Browser erweitert - aber nur für moderne Browser. Nie mehr herumzumachen, damit dieser IE6 funktioniert!
Die API von Zepto ist jQuery-kompatibel. Wenn Sie jQuery verwenden, wissen Sie bereits, wie Sie Zepto verwenden.
Ein weiterer Bereich, in dem Zepto klein ist, besteht darin, das Aufblähen von Funktionen zu vermeiden. Die Kernbibliothek scheint keine zusätzlichen Funktionen zu enthalten. Sogar die AJAX- und Animationsfunktionalität sind als separate Module verfügbar, falls dies erforderlich sein sollte. Für Benutzer, die in erster Linie Bibliotheken für die DOM-Traversierung und -Manipulation verwenden, ist dies ein absolutes Geschenk.
Und, oh, habe ich Zeptos Hauptparty erwähnt? Die API von Zepto ist jQuery-kompatibel. Wenn Sie jQuery verwenden, wissen Sie bereits, wie Sie Zepto verwenden.
Ja und nein. Hängt davon ab eine passendere Antwort.
Ja, weil die zentrale API von Zepto jQuery weitgehend nachahmt. Um es einfacher zu machen und die Lernkurve drastisch zu reduzieren, emuliert Zepto die API von jQuery. Die meisten der häufig verwendeten Methoden, wie etwa die DOM-Manipulation, sind ziemlich gleich benannt und haben dieselben Parameter in derselben Reihenfolge. Die Methodensignaturen sind für die Ingenieure da draußen gleich.
Schauen wir uns ein kleines Beispiel an:
Accentsconagua
$ ('# element'). html ("Hey! Sind Sie in der GW2-Beta?"); Kommt mir bekannt vor? Es sollte. Dies ist genau derselbe Code, den Sie mit jQuery verwenden würden, um den HTML-Code eines Elements zu ändern. Wie ich bereits erwähnt habe, ist dies nicht nur auf diese Methode beschränkt. Die meisten DOM-Vorgänge sind genauso wie Ihre Hilfsprogramme wie AJAX aufgebaut.
Auf der anderen Seite ist die API keine 100% ige Übereinstimmung. Zepto verzichtet auf einige in jQuery vorhandene Methoden, die Ihren Code beschädigen könnten. Und ebenso wichtig: Da Zepto eine Teilmenge von jQuery ist, werden Sie wahrscheinlich auf bestimmte Funktionen verzichten, die eingebaut sind -- Aufgeschoben ist ein schönes Beispiel. Sie können jQuery einfach nicht mit Zepto austauschen und erwarten, dass alles funktioniert.
Die größte Hürde sind für mich die Methoden, die aus jQuery kopiert wurden, aber unterschiedliche Signatur- und Funktionssätze haben. Es ist ein wenig frustrierend, wenn Sie denken, dass Sie eine Methode richtig anwenden, aber nicht. Ein gutes Beispiel dafür ist die Fähigkeit der Klonmethode, Event-Handler zu kopieren. Ohne die Quelle zu betrachten, hätte ich das wirklich nicht herausgefunden.
Wenn Sie bereits mit jQuery gearbeitet haben, sollte alles, was Sie unten sehen, ein Schlummerfest sein.
Genug Chit Chat, tauchen wir jetzt in etwas Code ein. Wie bei vielen modernen Bibliotheken ist DOM Traversal und Manipulation eine Kernfunktion, die jeder perfektionieren möchte. Da die API und die allgemeine Funktionalität jQuery sehr ähnlich sind, kann man davon ausgehen, dass alles erstklassig ist.
Schauen wir uns einige allgemeine Funktionen an, die sich auf DOM beziehen.
Dies ist das A und O der DOM-Operationen: Lesen oder Ändern des HTML-Inhalts eines Elements. Mit Zepto ist es so einfach wie das Anrufen von html Methode für den Container und bei Bedarf die neue HTML-Datei übergeben.
Beispielsweise erhält dies den HTML-Code eines Elements und speichert ihn in einer Variablen.
var containerText = $ ('# element'). html (); Oder wenn Sie etwas anderes ändern wollen:
$ ('# element'). html ("Hola there!"); Ganz einfach, richtig?
Wie bei jQuery verwendet Zepto die anhängen und voranstellen Methoden. Und die Aufforderung bleibt auch gleich.
$ ('# element'). anhängen ("Dies ist das angefügte Element.
"); // oder $ ('# element'). prepend ("Dies ist das angefügte Element.
"); Ereignisse sind das Rückgrat jeder modernen Anwendung. Zepto bietet Ihnen eine Reihe einfach zu verwendender Methoden, um Ihre Arbeit zu erledigen. Der Großteil der Arbeit wird durch die erledigt auf Methode.
$ ('# element'). on ('click', Funktion (e) // Ihr Code hier); Leicht zu lesen und leicht zu analysieren. Wenn Sie sich alt fühlen und gerne verwenden binden, delegieren oder Leben Methoden, nicht. Genau wie bei jQuery werden sie hier nicht mehr empfohlen.
Jede moderne Low-Level-Bibliothek muss einen benutzerfreundlichen Wrapper für AJAX bereitstellen, und Zepto lässt Sie hier nicht im Stich. Hier ist ein Beispiel für eine sehr einfache AJAX-Anfrage.
$ .ajax (Typ: 'POST', URL: '/ Projekt', Daten: Name: 'Super Volcano Lair'), Datentyp: 'Json', Erfolg: Funktion (Daten) // Hier einige nette Sachen , Fehler: Funktion (Xhr, Typ) Warnung ('YU NO WORK?')); Die Dinge mögen ein wenig kompliziert aussehen, aber was wir tun, kann auf Folgendes reduziert werden:
Wie bei jQuery gibt es eine separate Methode für eine GET- oder POST-Anforderung oder zum Laden von Webinhalten.
Was wird die Welt ohne ein paar Animationen erreichen? Zepto entlarvt den Allmächtigen animieren Methode, die behandelt werden sollte die meisten Ihrer animierenden Bedürfnisse.
$ ('# element'). animieren (Deckkraft: 0,50, oben: '30px', Farbe: '# 656565', 0,5) Wir wählen im Wesentlichen das zu animierende Element aus und rufen das Element auf animieren Methode und geben Sie die zu animierenden Eigenschaften sowie die Zeit an, die zum Animieren benötigt wird. Den Rest macht Zepto.
Oder wenn Sie nur ein Element anzeigen und ausblenden müssen, sollte der Umschalter einwandfrei funktionieren.
Ich denke, dass Sie den Punkt hier verstehen - Zeptos DOM-, Animations- und Ereignis-API ahmt jQuery weitgehend nach. Und wie wir alle wissen, ist jQuery mit diesen Dingen verdammt gut. Wenn Sie bereits mit jQuery gearbeitet haben, sollten Sie hier nicht zu viel Mühe haben.
Zepto bietet Ihnen einige berührungsspezifische Ereignisse, die Sie in Ihren Apps nutzen können. Diese schließen ein:
Hier ein kurzes Beispiel, das wunderbar aus Zeptos Dokumentation übernommen wurde.
Wenn ein Listenelement durchsucht wird, wird die Löschschaltfläche aller anderen Listenelemente ausgeblendet und nur das aktuelle Element wird angezeigt. Durch Tippen auf eine Schaltfläche "Löschen" wird das übergeordnete Element dieser Schaltfläche aus dem DOM entfernt.
Dies sollte ziemlich ähnlich sein, wie Sie normalerweise mit Ereignissen umgehen, nur dass Sie Ihre Handler an verschiedene Ereignisse binden, das ist alles.
In Anbetracht dessen, für was und für wen ich entwickle, ist dies perfekt für mich. Ihre Laufleistung kann jedoch wie immer variieren.
Nun, das ist fast alles für Zepto. Im Kern sollte es eine schlanke, knusperfreie Version von jQuery sein, die auf mobilen Geräten verwendet werden kann. Im Laufe der Zeit hat sich daraus eine schlanke Bibliothek entwickelt, die auf die Unterstützung archaischer Browser verzichtet.
In Anbetracht dessen, für was und für wen ich entwickle, ist dies perfekt für mich. Ihre Laufleistung kann jedoch wie immer variieren. Möglicherweise sind Sie mit jQuery-Plugins eingesperrt, die nicht triviale Modifikationen erfordern, um unter Zepto funktionieren zu können, oder Sie müssen mehr auf jQuery vertrauen.
In jedem Fall müssen Sie Zepto wirklich einmal ausprobieren, um zu sehen, wie es zu Ihrem Workflow passt, bevor Sie es abschreiben. Ich habe es getan und ich liebe es!
Nun, das ist alles von mir heute. Lassen Sie mich wissen, was Sie in den Kommentaren unten denken, und danke Ihnen vielmals für das Lesen!
