Fluent-APIs in JavaScript verstehen

Beim Entwerfen von Babylon.js v2.0(eine Bibliothek zum Erstellen von 3D im Web), habe ich mir kürzlich gewünscht, dass es mehr APIs gibt fließend-Das heißt, ich wünschte, die Gemeinschaft könnte die Arbeit leichter lesen, verstehen und darauf aufbauen, während sie weniger Zeit in den technischen Dokumenten verbringt. 

In diesem Lernprogramm gehe ich durch fließende APIs: Was ist zu beachten, wie man sie schreibt und welche Auswirkungen die Browser-übergreifende Auswirkungen haben. 

Was ist eine Fluent-API??

EIN fließende API, Wie in diesem Wikipedia-Artikel angegeben, handelt es sich um eine Implementierung einer objektorientierten API, die für besser lesbaren Code sorgt. JQuery ist ein hervorragendes Beispiel dafür, was Sie mit einer fließenden API tun können:

 $ ('
') .html ("Fluent API are cool!") .addClass ("header") .appendTo ("body");

Mit der fließenden API können Sie Funktionsaufrufe verketten, indem Sie dieses Objekt zurückgeben.

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

var MyClass = Funktion (a) this.a = a;  MyClass.prototype.foo = function (b) // Mache einige komplexe Arbeiten this.a + = Math.cos (b); kehre das zurück; 

Wie Sie sehen können, geht es bei dem Trick nur darum, das zurückzugeben diese object (Verweis auf die aktuelle Instanz in diesem Fall), damit die Kette fortgesetzt werden kann.

Wenn Sie nicht wissen, wie das Schlüsselwort "this" in JavaScript funktioniert, empfehle ich Ihnen, diesen großartigen Artikel durch zu lesen Mike West.

Wir können dann Anrufe verketten:

var obj = new MyClass (5); obj.foo (1) .foo (2) .foo (3);

Bevor ich dasselbe mit Babylon.js versuchte, wollte ich sichergehen, dass dies nicht zu Performanceproblemen führt.

Was ist mit der Leistung??

Also habe ich einen Benchmark gemacht!

var count = 10000000; var MyClass = Funktion (a) this.a = a;  MyClass.prototype.foo = function (b) // Mache einige komplexe Arbeiten this.a + = Math.cos (b); kehre das zurück;  MyClass.prototype.foo2 = function (b) // Mache einige komplexe Arbeiten this.a + = Math.cos (b);  var start = new Date (). getTime (); var obj = new MyClass (5); obj.foo (1) .foo (2) .foo (3); for (var index = 0; index < count; index++)  obj.foo(1).foo(2).foo(3);  var end = new Date().getTime(); var start2 = new Date().getTime(); var obj2 = new MyClass(5); for (var index = 0; index < count; index++)  obj2.foo2(1); obj2.foo2(2); obj2.foo2(3);  var end2 = new Date().getTime(); var div = document.getElementById("results"); div.innerHTML += obj.a + ": With return this: " + (end - start) + "ms
"; div.innerHTML + = obj2.a +": Ohne Rückgabe: "+ (end2 - start2) +" ms ";

Wie du siehst, foo und foo2 genau das gleiche tun. Der einzige Unterschied ist das foo kann gekettet werden, während foo2 kann nicht.

Offensichtlich unterscheidet sich die Anrufkette zwischen:

obj.foo (1) .foo (2) .foo (3);

und

obj2.foo2 (1); obj2.foo2 (2); obj2.foo2 (3);

Mit diesem Code habe ich es 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 bekam:

• Auf Chrom, Die reguläre API ist 6% langsamer als die fließende API.
• Auf Feuerfuchs, Beide APIs laufen fast mit der gleichen Geschwindigkeit (die fließende API ist) 1% Langsamer).
• Auf IE, Beide APIs laufen fast mit der gleichen Geschwindigkeit (die fließende API ist) 2% Langsamer).

Die Sache ist, dass ich eine Funktion in die Funktion eingefügt habe (Math.cos) um eine durch die Funktion durchgeführte Behandlung zu simulieren.

Wenn ich alles entferne und einfach die Rückkehr Aussage, auf allen Browsern gibt es keinen Unterschied (eigentlich nur eine oder zwei Millisekunden für 10.000.000 Versuche). Sie können dies für sich selbst über die Browser testen. Und wenn Sie die Geräte nicht zur Hand haben, gibt es auf dev.modern.IE viele kostenlose Tools. Testen Sie eine virtuelle Maschine einfach nicht mit einem realen Gerät. 

Meine Schlussfolgerung lautet also: Es ist ein Versuch!

Eine fließende API ist großartig - sie produziert besser lesbaren Code, und Sie können ihn ohne Probleme oder Leistungsverlust verwenden! 

Weitere praktische Übungen mit JavaScript

Es mag Sie ein wenig überraschen, aber Microsoft bietet eine Reihe von kostenlosen Informationen zu vielen Open-Source-JavaScript-Themen. Wir haben uns zum Ziel gesetzt, mit Microsoft Edge viel mehr zu schaffen. Schauen Sie sich meine eigenen an:

• Einführung in WebGL 3D mit HTML5 und Babylon.JS
• Erstellen einer Einzelseitenanwendung mit ASP.NET und AngularJS
• Schneide Grafiken in HTML

Oder die Lernreihe unseres Teams:

• Praktische Tipps zur Leistung, um Ihr HTML / JavaScript schneller zu machen (eine siebteilige Serie vom responsiven Design über Gelegenheitsspiele bis hin zur Leistungsoptimierung)
• The Modern Web Platform Jump Start (Grundlagen von HTML, CSS und JavaScript)
• Universelle Windows-App mit HTML und JavaScript entwickeln Jump Start (Verwenden Sie zum Erstellen einer App die bereits erstellte JS).

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

Dieser Artikel ist Teil der Web-Dev-Tech-Serie von Microsoft. Wir freuen uns zu teilen Microsoft Edge und das Neue EdgeHTML-Rendering-Engine mit dir. Erhalten Sie kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac, iOS, Android oder Windows-Gerät. http://dev.modern.ie/.