JavaScript wie ein Boss: Fluent APIs verstehen

Key Takeaways

• fließende APIs in JavaScript ermöglichen lesbarere und verständlichere Code, indem die Erhöhung von Funktionsaufrufen aktiviert wird, die durch Rückgabe von "dieses" Objekt in jeder Funktion zurückgegeben werden. Dies macht den Code intuitiver und einfacher zu debuggen, insbesondere wenn es sich um komplexe Funktionsaufrufe handelt.
• Leistungstests an verschiedenen Browsern (Chrom, Firefox, IE) zeigten, dass die Verwendung fließender APIs die Leistung nicht signifikant beeinflusst. In einigen Fällen war die fließende API noch schneller als die reguläre API, was darauf hinweist, dass sie ohne Bedenken hinsichtlich der Leistungsverluste verwendet werden können.
• fließende APIs gelten nicht nur für JavaScript, sondern können auch mit einer JavaScript -Bibliothek oder einem JavaScript -Bibliothek oder einer Framework verwendet werden. Viele beliebte Bibliotheken und Frameworks wie JQuery verwenden bereits fließende APIs, um ihre Methoden lesbarer und ausdruckswerter zu gestalten. Sie sollten jedoch unter Berücksichtigung der Bedürfnisse des Projekts und der Vertrautheit des Teams mit dem fließenden API -Muster mit Bedacht eingesetzt werden.

Dieser Artikel ist Teil einer Web Dev Tech -Serie von Microsoft. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

Während des Entwerfens von babylon.js v2.0 (eine Bibliothek zum Aufbau von 3D im Web) hatte ich kürzlich wünschte, dass mehr APIs fließend wären - das heißt, ich wünschte, die Community könnte leichter lesen, verstehen und aufbauen Die Arbeit verbringt während weniger Zeit in den Tech -Dokumenten. In diesem Tutorial gehe ich durch fließende APIs-was zu beachten ist, wie man sie schreibt und die Auswirkungen auf den Browser-Leistung.

Was macht eine API fließend?

Eine fließende API, wie in diesem Wikipedia-Artikel angegeben, ist eine Implementierung einer objektorientierten API, die darauf abzielt, mehr lesbarer Code zu liefern. JQuery ist zum Beispiel ein gutes Beispiel dafür, was eine fließende API ermöglicht:

<span>$('<div></div>')
</span>     <span>.html("Fluent API are cool!")
</span>     <span>.addClass("header")
</span>     <span>.appendTo("body");</span>

Mit einer fließenden API können Sie die Aufrufe der Kettenfunktion durch zurückgeben. Wenn Sie nicht wissen, wie das Keyword in JavaScript funktioniert, empfehle ich, diesen großartigen Artikel zu lesen.

Wir können leicht eine fließende API wie folgt erstellen:

<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}</span>

Wie Sie sehen, geht es bei dem Trick nur darum, das Objekt zurückzugeben (ein Verweis auf die aktuelle Instanz in diesem Fall), damit die Kette fortgesetzt wird.

wir können dann Anrufe ketten:

<span>var obj = new MyClass(5);
</span>obj<span>.foo(1).foo(2).foo(3);</span>

Bevor ich versuchte, dasselbe mit babylon.js zu tun, wollte ich sicher sein, dass dies nicht einige Leistungsprobleme generieren würde.

Also habe ich einen Benchmark gemacht!

<span>var count = 10000000;
</span>
<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}
</span>
<span>MyClass.prototype.foo2 = function (b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span><span>}
</span>
<span>var start = new Date().getTime();
</span><span>var obj = new MyClass(5);
</span>obj<span>.foo(1).foo(2).foo(3);
</span><span>for (var index = 0; index < count; index++) {
</span>    obj<span>.foo(1).foo(2).foo(3);
</span><span>}
</span><span>var end = new Date().getTime();
</span>
<span>var start2 = new Date().getTime();
</span><span>var obj2 = new MyClass(5);
</span><span>for (var index = 0; index < count; index++) {
</span>    obj2<span>.foo2(1);
</span>    obj2<span>.foo2(2);
</span>    obj2<span>.foo2(3);
</span><span>}
</span><span>var end2 = new Date().getTime();
</span>
<span>var div = document.getElementById("results");
</span>
div<span>.innerHTML += obj.a + ": With return this: " + (end - start) + "ms<BR>";
</span>div<span>.innerHTML += obj2.a + ": Without return this: " + (end2 - start2) + "ms";</span>

Wie Sie sehen können, machen Foo und Foo2 genau dasselbe. Der einzige Unterschied ist, dass Foo gekettet werden kann, während foo2 nicht.

kann

Offensichtlich unterscheidet sich die Call -Kette zwischen:

obj<span>.foo(1).foo(2).foo(3);</span>

und:

obj2<span>.foo2(1);
</span>obj2<span>.foo2(2);
</span>obj2<span>.foo2(3);</span>

Angesichts dieses Codes habe ich ihn auf Chrome, Firefox und IE ausgeführt, um festzustellen, ob ich mir Sorgen um die Leistung machen muss.

Und hier sind die Ergebnisse, die ich erhalten habe:

• In Chrom ist die reguläre API 6% langsamer als fließende API
In Firefox läuft beide APIs fast mit gleicher Geschwindigkeit (die fließende API ist 1% langsamer)
In IE laufen beide APIs fast mit der gleichen Geschwindigkeit (die fließende API ist 2% langsamer)

Ich habe eine Operation in die Funktion (math.cos) hinzugefügt, um eine Art von Verarbeitung zu simulieren, die durch die Funktion durchgeführt wird.

Wenn ich alles entferne und einfach die Rückkehrerklärung aufbewahre, gibt es im gesamten Browser keinen Unterschied (eigentlich nur ein oder zwei Millisekunden für 10.000.000 Versuche). Sie können dies selbst in den Browsern testen. Und wenn Sie die Geräte nicht zur Hand haben, gibt es auf Modern.ie viele kostenlose Tools. Testen Sie einfach keine virtuelle Maschine gegen ein echtes Gerät.

meine Schlussfolgerung lautet also: Es ist ein Go!

fließende APIs sind großartig, sie produzieren mehr lesbarer Code und Sie können sie ohne Probleme oder Leistungsverluste verwenden!

mehr praktisch mit JavaScript

Es könnte Sie vielleicht ein bisschen überraschen, aber Microsoft hat ein paar kostenlose Lernen auf vielen Open -Source -JavaScript -Themen und wir sind auf der Mission, mit Project Spartan Coming viel mehr zu schaffen. Schauen Sie sich meine eigene an:

Einführung in WebGL 3D und HTML5 und babylon.js
Erstellen einer einzelnen Seitenanwendung mit ASP.NET und AngularJS
innovative Grafiken in HTML

oder die Lernserie unseres Teams:

Praktische Leistungstipps, um Ihr HTML/JavaScript schneller zu gestalten (eine siebenteilige Serie von Responsive Design über lässige Spiele bis hin zu Leistungsoptimierung)
• Die moderne Webplattform Jumpstart (die Grundlagen von HTML, CSS und JS)

Entwicklung der universellen Windows -App mit HTML und JavaScript Jumpstart (Verwenden Sie die JS, die Sie bereits erstellt haben, um eine App zu erstellen)

und einige kostenlose Tools: Visual Studio Community, Azure Test und Cross-Browser-Test-Tools für Mac, Linux oder Windows.

Dieser Artikel ist Teil der Web Dev Tech -Serie von Microsoft. Wir freuen uns, Projekt Spartan und seinen neuen Rendering -Engine mit Ihnen zu teilen. Holen Sie sich kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac-, iOS-, Android- oder Windows -Gerät bei Modern.ie.

häufig gestellte Fragen zu fließenden APIs in JavaScript

Was ist eine fließende API in JavaScript? Es beinhaltet das Zusammenketten von Methoden in einer Weise, die wie ein Satz oder eine Reihe von Anweisungen liest. Dies wird erreicht, indem sichergestellt wird, dass jede Methode ein Objekt zurückgibt, sodass eine andere Methode sofort aus dem Ergebnis der vorherigen Methode aufgerufen werden kann. Fluent -APIs können Ihren Code sauberer und intuitiver machen, insbesondere wenn Sie mit komplexen Funktionsaufrufen zu tun haben.

Wie erstelle ich eine fließende API in JavaScript? Auf diese Weise können Sie Methoden miteinander ketten. Betrachten Sie beispielsweise ein Objekt "Auto" mit Methoden "StartEngine", "Accelerate" und "Stop". Wenn jede dieser Methoden 'this' (das Autoobjekt) zurückgibt, können Sie sie wie SO anketten: car.stellengine (). Accelerate (). Stop (). APIs? Durch die gemeinsame Verkettung von Methoden können Sie komplexe Operationen auf eine Weise ausdrücken, die wie ein Satz liest. Dies kann Ihren Code erleichtern und zu debuggen. Fluent -APIs können Ihren Code auch ausdrucksvoller und flexibler machen, sodass Sie leistungsfähigere Abstraktionen erstellen können. Sie können es auch schwieriger machen, zu debuggen, wenn sie nicht richtig verwendet werden. Da Methodenaufrufe miteinander verkettet werden, kann ein Problem mit einer Methode alle nachfolgenden Methoden in der Kette beeinflussen. Darüber hinaus kann fließende APIs für Personen, die mit dem Muster nicht vertraut sind, manchmal weniger intuitiv sein.

Kann ich fließende APIs mit asynchronem Code verwenden? , aber es kann etwas komplexer sein. Sie müssen sicherstellen, dass jede Methode in der Kette ein Versprechen zurückgibt, sodass Sie „.Sen ()“ verwenden können, um Methoden miteinander zu ketten. Alternativ können Sie Async/Auseait Syntax verwenden, um asynchrone Code zu schreiben, der synchron aussieht. Dadurch kann Ihre fließende API leichter zu lesen und zu verstehen.

fließende API ist ein Entwurfsmuster, das sich auf Lesbarkeit und Ausdruckskraft konzentriert. Es kann mit anderen Entwurfsmustern wie dem Builder -Muster verglichen werden, die auch darauf abzielen, Code lesbarer und einfacher zu bearbeiten. Während sich das Builder -Muster Schritt für Schritt auf die Konstruktion komplexer Objekte konzentriert, konzentriert sich die Fluent -API auf die Kette für einen lesbaren Betriebsfluss. >

Ja, fließende APIs können mit jeder JavaScript -Bibliothek oder jedem JavaScript -Bibliothek verwendet werden. Viele beliebte Bibliotheken und Frameworks wie JQuery und Lodash verwenden fließende APIs bereits, um ihre Methoden lesbarer und ausdruckswerter zu gestalten.

Wie kann ich eine fließende API debuggen? Schwierig, weil Methodenaufrufe miteinander gekettet werden. Sie können jedoch Konsolen.log -Anweisungen in Ihren Methoden verwenden, um deren Ausgabe zu protokollieren. Darüber hinaus kann die Verwendung eines JavaScript -Debuggers Ihnen helfen, Ihren Code durchzuführen und den Status Ihrer Objekte in jedem Schritt in der Kette zu sehen.

Können fließende APIs die Leistung verbessern? Durch das Lesen und Verständnis Ihres Code können Sie jedoch fließende APIs leichter erkennen und beheben. Passen Sie gut zu Projekten, bei denen Lesbarkeit und Wartbarkeit Priorität haben. Sie sind jedoch möglicherweise nicht die beste für jedes Projekt. Wenn Ihr Team mit dem fließenden API -Muster nicht vertraut ist, kann es einige Zeit dauern, bis sich sie daran gewöhnt haben. Darüber hinaus kann fließende APIs das Debuggen erschweren, wenn sie nicht ordnungsgemäß verwendet werden. Wie bei jedem Entwurfsmuster ist es wichtig, die Bedürfnisse Ihres Projekts und Ihres Teams zu berücksichtigen, bevor Sie sich entscheiden, fließende APIs zu verwenden.

Das obige ist der detaillierte Inhalt vonJavaScript wie ein Boss: Fluent APIs verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!