Share
Under utformningen av Babylon.js v2.0(ett bibliotek för att bygga 3D på webben), fann jag nyligen att jag önskade att fler API: er var flytande-det vill säga att gemenskapen skulle kunna lättare läsa, förstå och bygga på arbetet, samtidigt som man spenderar mindre tid i tekniska dokument.
I den här handledningen går jag igenom flytande API: vad som ska övervägas, hur man skriver dem och konsekvenser för webbläsarens prestanda.
en flytande API, som anges i denna Wikipedia-artikel, är en implementering av ett objektorienterat API som syftar till att tillhandahålla mer läsbar kod. JQuery är ett bra exempel på vad ett flytande API tillåter dig att göra:
Accentsconagua
$ ('') .html ("Flytande API är coolt!") .addClass ("header") .appendTo ("body");Med det flytande API kan du ringa funktionssamtal genom att returnera det här objektet.
Vi kan enkelt skapa ett flytande API så här:
var MyClass = funktion (a) this.a = a; MyClass.prototype.foo = function (b) // Gör något komplext arbete this.a + = Math.cos (b); returnera detta;
Som du kan se är tricket bara om att återvända detta objekt (hänvisning till aktuell instans i det här fallet) för att tillåta kedjan att fortsätta.
Om du inte är medveten om hur "det här" sökordet fungerar i JavaScript, rekommenderar jag att du läser den här stora artikeln av Mike West.
Vi kan sedan ringa samtal:
var obj = ny MyClass (5); obj.foo (1) .foo (2) .foo (3);
Innan jag försökte göra detsamma med Babylon.js ville jag vara säker på att det inte skulle ge några prestationsproblem.
Så jag gjorde en riktmärke!
var räknat = 10000000; var MyClass = funktion (a) this.a = a; MyClass.prototype.foo = function (b) // Gör något komplext arbete this.a + = Math.cos (b); returnera detta; MyClass.prototype.foo2 = function (b) // Gör något komplext arbete this.a + = Math.cos (b); var start = nytt datum (). getTime (); var obj = ny MyClass (5); obj.foo (1) .foo (2) .foo (3); för (varindex = 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 +": Utan att returnera detta: "+ (end2 - start2) +" ms ";Som du kan se, foo och foo2 gör precis samma sak. Den enda skillnaden är det foo kan vara kedjad medan foo2 kan inte.
Självklart är samtalskedjan olika mellan:
obj.foo (1) .foo (2) .foo (3);
och
obj2.foo2 (1); obj2.foo2 (2); obj2.foo2 (3);
Med tanke på den här koden körde jag den på Chrome, Firefox och IE för att avgöra om jag måste bli oroad över prestanda.
Och här är resultaten jag fick:
Saken är att jag lade till en operation i funktionen (Math.cos) för att simulera någon form av behandling som görs av funktionen.
Om jag tar bort allt och bara behåller lämna tillbaka uttalande, på alla webbläsare är det ingen skillnad (faktiskt bara en eller två millisekunder för 10.000.000 försök). Du kan testa detta för dig själv över webbläsarna. Och om du inte har enheterna praktiska finns det gott om gratis verktyg på dev.modern.IE. Testa inte bara en virtuell maskin mot en riktig enhet.
Så min slutsats är: Det är en go!
Ett flytande API är bra - det producerar mer läsbar kod, och du kan använda den utan problem eller prestandaförlust!
Det kan kanske överraska dig lite, men Microsoft har en massa gratis lärande på många JavaScript-ämnen med öppen källkod, och vi är på uppdrag att skapa mycket mer med Microsoft Edge. Kolla in min egen:
Eller vårt lags inlärningsserie:
Och några gratis verktyg: Visual Studio Community, Azure Trial och testverktyg för webbläsare för Mac, Linux eller Windows.
Den här artikeln är en del av web dev-tekniken från Microsoft. Vi är glada att dela Microsoft Edge och den nya EdgeHTML-återgivningsmotor med dig. Få gratis virtuella maskiner eller testa fjärran på din Mac, iOS, Android eller Windows-enheten @ http://dev.modern.ie/.
