JavaScript: Die Kunst fließender APIs beherrschen

Beim Entwerfen von Babylon.js v2.0 (a (Bibliothek zum Erstellen von 3D im Web) habe ich kürzlich festgestellt, dass ich mir mehr wünschte Die API ist glatt – ich möchte jedoch, dass sie für die Community leichter lesbar ist. Verstehen Sie Ihre Arbeit und bauen Sie sie aus, während Sie weniger Zeit mit der technischen Dokumentation verbringen.

In diesem Tutorial behandle ich Fluent-APIs: Was ist zu beachten und wie geht das? Schreiben und die Auswirkungen auf die browserübergreifende Leistung.

Was ist Fluent API?

Die Fluent-API, wie in diesem Wikipedia-Artikel beschrieben, ist Objektorientierte API für besser lesbaren Code. JQuery ist ein großartiges Beispiel dafür, was eine fließende API Ihnen ermöglicht:

 $('<div></div>')

     .html("Fluent API are cool!")

     .addClass("header")

     .appendTo("body");

Smooth API ermöglicht Ihnen die Verknüpfung Die Funktion wird durch die Rückgabe dieses Objekts aufgerufen.

Wir können ganz einfach eines erstellen Fluent-API wie folgt:

var MyClass = function(a) {

    this.a = a;

}



MyClass.prototype.foo = function(b) {

    // Do some complex work   

    this.a += Math.cos(b);

    return this;

}

Wie Sie sehen, der Trick Gibt einfach das this-Objekt zurück (das auf die aktuelle Instanz verweist). (in diesem Fall), damit die Kette weiterlaufen kann.

Wenn Sie es nicht wissen Wie das Schlüsselwort „this“ in JavaScript funktioniert, empfehle ich Ihnen, diesen tollen Artikel zu lesen Autor des Artikels: Mike West.

Dann können wir Anrufe verketten:

var obj = new MyClass(5);

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

Bevor Sie versuchen, Folgendes zu tun Wie bei Babylon.js möchte ich sicherstellen, dass dadurch keine generiert werden Leistungsprobleme.

Wie ist die Leistung?

Also habe ich einen Benchmark-Test gemacht!

var count = 10000000;



var MyClass = function(a) {

    this.a = a;

}



MyClass.prototype.foo = function(b) {

    // Do some complex work   

    this.a += Math.cos(b);

    return this;

}



MyClass.prototype.foo2 = function (b) {

    // Do some complex work   

    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<BR>";

div.innerHTML += obj2.a + ": Without return this: " + (end2 - start2) + "ms";

as Sie können sehen, dass foo 和 foo2 genau das Gleiche bewirkt. nur Der Unterschied besteht darin, dass foo 可以链接，而 foo2 es nicht kann.

Natürlich die Anrufkette Der Unterschied ist:

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

und

obj2.foo2(1);

obj2.foo2(2);

obj2.foo2(3);

Mit diesem Code habe ich ihn ausgeführt Finden Sie heraus, ob Chrome, Firefox und IE für mich interessant sind Leistung.

Das ist das Ergebnis Ich bekomme:

• Auf Chrome ist die reguläre API 6 % langsamer als die Fluent API.
• Auf Firefox, Beide APIs laufen nahezu identisch (Fluent API langsamer 1 %).
• Am IE, Beide APIs laufen nahezu identisch (Fluent API ist 2 % langsamer).

Das Problem ist, dass ich der Funktion eine Operation hinzugefügt habe (Math.cos) Simuliert eine Art Verarbeitung durch eine Funktion.

Wenn ich alles lösche Behalten Sie einfach die return-Anweisung bei, sie funktioniert nicht auf allen Browsern Der Unterschied (eigentlich nur ein bis zwei Millisekunden über 10.000.000 Versuche). Du Sie können es selbst browserübergreifend testen. wenn nicht Das Gerät ist praktisch und es gibt viele kostenlose Tools auf dev.modern.IE. Führen Sie einfach keine Leistungstests auf virtuellen Maschinen durch Für echte Geräte.

Mein Fazit lautet also: Komm schon!

Die Fluent-API ist großartig – sie erzeugt besser lesbaren Code und Sie können ihn ohne Probleme oder Leistungseinbußen verwenden!

Mehr Übung JavaScript

Das kommt für Sie vielleicht etwas überraschend, aber Microsoft Es gibt viele kostenlose Lerninhalte zu vielen Open-Source-JavaScript-Themen, und das tun wir auch Mit der Einführung von Microsoft Edge ist es unsere Mission, mehr zu schaffen. Schauen Sie sich mein eigenes an:

• Einführung in 3D mit HTML5 und WebGL Babylon.JS
• Erstellen Sie mit den folgenden Befehlen eine Einzelseitenanwendung ASP.NET und AngularJS
• Modernste Grafiken in HTML

Oder die Lernreihe unseres Teams:

• Praktische Leistungstipps für Ihre HTML/JavaScript Faster (eine siebenteilige Serie von Responsive Design bis Casual Games bis hin zur Leistungsoptimierung)
• Schnellstart mit modernen Netzwerkplattformen (Grundlagen HTML, CSS und JavaScript)
• Entwickeln Sie universelle Windows-Anwendungen HTML- und JavaScript-Jump-Start (unter Verwendung des JS, das Sie bereits erstellt haben Erstellen Sie eine App)

Plus einige kostenlose Tools: Visual Studio Community, Azure-Testversion und browserübergreifende Testtools für Mac, Linux oder Windows Windows.

Dieser Artikel ist Teil von Web Development Technology Serie von Microsoft. Wir freuen uns, Ihnen Microsoft Edge und die neue EdgeHTML-Rendering-Engine mitzuteilen. frei Virtuelle Maschine oder Remote-Tests auf Mac-, iOS-, Android- oder Windows-Geräten @http://dev.modern.ie/.

Das obige ist der detaillierte Inhalt vonJavaScript: Die Kunst fließender APIs beherrschen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!