Vloeiende API's in JavaScript begrijpen

Tijdens het ontwerpen van Babylon.js v2.0(een bibliotheek voor het bouwen van 3D op internet), ik merkte onlangs dat ik wilde dat er meer API's waren vloeiend-dat wil zeggen, ik zou willen dat de gemeenschap het werk gemakkelijker kon lezen, begrijpen en erop kon voortbouwen, terwijl ze minder tijd doorbracht in de technische documenten. 

In deze zelfstudie doorloop ik vloeiende API's: waar ik aan moet denken, hoe ik ze moet schrijven en wat de implicaties van cross-browserprestaties zijn. 

Wat is een Fluent API?

EEN vloeiende API, zoals gesteld door dit Wikipedia-artikel, is een implementatie van een object-georiënteerde API die als doel heeft om meer leesbare code te bieden. JQuery is een goed voorbeeld van wat een vloeiende API je kunt doen:

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

Met de vloeiende API kunt u functieaanroepen ketenen door dit object te retourneren.

We kunnen eenvoudig een vloeiende API zoals deze maken:

var MyClass = function (a) this.a = a;  MyClass.prototype.foo = function (b) // Doe wat complex werk this.a + = Math.cos (b); geef dit terug; 

Zoals je ziet, is de truc zowat de terugkeer van de deze object (verwijzing naar huidige instantie in dit geval) om de keten door te laten gaan.

Als u niet weet hoe het "dit" sleutelwoord in JavaScript werkt, raad ik aan dit geweldige artikel te lezen Mike West.

We kunnen dan oproepen koppelen:

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

Voordat ik hetzelfde probeerde te doen met Babylon.js, wilde ik er zeker van zijn dat dit geen prestatieproblemen zou opleveren.

Hoe zit het met de prestaties?

Dus ik deed een benchmark!

var count = 10000000; var MyClass = function (a) this.a = a;  MyClass.prototype.foo = function (b) // Doe wat complex werk this.a + = Math.cos (b); geef dit terug;  MyClass.prototype.foo2 = function (b) // Doe wat complex werk this.a + = Math.cos (b);  var start = new Date (). getTime (); var obj = nieuwe 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 +": Zonder dit te retourneren: "+ (end2 - start2) +" ms ";

Zoals je kunt zien, foo en foo2 doe precies hetzelfde. Het enige verschil is dat foo kan worden geketend terwijl foo2 kan niet.

Uiteraard is de belketen verschillend tussen:

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

en

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

Met deze code heb ik het uitgevoerd in Chrome, Firefox en IE om te bepalen of ik me zorgen moet maken over de prestaties.

En hier zijn de resultaten die ik kreeg:

• Op Chrome, de reguliere API is 6% langzamer dan de vloeiende API.
• Op Firefox, beide API's draaien op bijna dezelfde snelheid (de vloeiende API is dat 1% langzamer).
• Op D.W.Z, beide API's draaien op bijna dezelfde snelheid (de vloeiende API is dat 2% langzamer).

Het punt is dat ik een bewerking aan de functie heb toegevoegd (Math.cos) om een ​​of andere vorm van behandeling door de functie te simuleren.

Als ik alles verwijder en gewoon de terugkeer verklaring, in alle browsers is er geen verschil (eigenlijk slechts één of twee milliseconden voor 10.000.000 pogingen). U kunt dit voor uzelf testen in de browsers. En als je de apparaten niet bij de hand hebt, zijn er veel gratis tools beschikbaar op dev.modern.IE. Test de prestaties van een virtuele machine niet tegen een echt apparaat. 

Dus mijn conclusie is: het is een poging!

Een vloeiende API is geweldig - het produceert meer leesbare code en je kunt het zonder enig probleem of prestatieverlies gebruiken! 

Meer hands-on met JavaScript

Het zal je misschien een beetje verbazen, maar Microsoft heeft een heleboel gratis leren over veel open-source JavaScript-onderwerpen, en we zijn op een missie om nog veel meer te creëren met Microsoft Edge coming. Bekijk mijn eigen:

• Introductie tot WebGL 3D met HTML5 en Babylon.JS
• Een enkele pagina-applicatie bouwen met ASP.NET en AngularJS
• Cutting Edge Graphics in HTML

Of de leerserie van ons team:

• Praktische prestatie-tips om uw HTML / JavaScript sneller te maken (een zevendelige serie van responsief ontwerp tot informele games tot prestatie-optimalisatie)
• De Jump-start van het moderne webplatform (de fundamenten van HTML, CSS en JavaScript)
• Universele Windows-app ontwikkelen met HTML en JavaScript Jump Start (gebruik de JS die u al hebt gemaakt om een ​​app te bouwen)

En enkele gratis tools: Visual Studio Community, Azure Trial en cross-browser testtools voor Mac, Linux of Windows.

Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ http://dev.modern.ie/.