Share
Mens du designer Babylon.js v2.0(et bibliotek for å bygge 3D på nettet), fant jeg nylig at jeg ønsket at flere APIer var flytende-det vil si, at samfunnet lettere kunne lese, forstå og bygge på arbeidet mens du bruker mindre tid i teknisk doktorgrad.
I denne opplæringen går jeg gjennom flytende APIer: hva du skal vurdere, hvordan du skriver dem, og implikasjoner for nettleserens ytelse.
EN flytende API, som nevnt av denne Wikipedia-artikkelen, er en implementering av en objektorientert API som har som mål å gi mer lesbar kode. JQuery er et godt eksempel på hva en flytende API lar deg gjøre:
Accentsconagua
$ ('') .html ("Fluent API er kult!") .addClass ("header") .appendTo ("body");Den flytende API lar deg kjedefunksjonssamtaler ved å returnere dette objektet.
Vi kan enkelt lage en flytende API slik:
var MyClass = funksjon (a) this.a = a; MyClass.prototype.foo = funksjon (b) // Gjør noe komplekst arbeid this.a + = Math.cos (b); returnere dette;
Som du kan se, handler det bare om å returnere dette objekt (referanse til gjeldende forekomst i dette tilfellet) for å tillate kjeden fortsette.
Hvis du ikke er klar over hvordan "dette" søkeordet fungerer i JavaScript, anbefaler jeg å lese denne flotte artikkelen av Mike West.
Vi kan da ringe anrop:
var obj = ny MyClass (5); obj.foo (1) .foo (2) .foo (3);
Før jeg prøvde å gjøre det samme med Babylon.js, ønsket jeg å være sikker på at dette ikke ville generere noen ytelsesproblemer.
Så jeg gjorde et referanseindeks!
var teller = 10000000; var MyClass = funksjon (a) this.a = a; MyClass.prototype.foo = funksjon (b) // Gjør noe komplekst arbeid this.a + = Math.cos (b); returnere dette; MyClass.prototype.foo2 = funksjon (b) // Gjør noe komplekst arbeid this.a + = Math.cos (b); var start = ny dato (). getTime (); var obj = ny MyClass (5); obj.foo (1) .foo (2) .foo (3); for (var indeks = 0; indeks < 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 +": Uten returnere dette: "+ (end2 - start2) +" ms ";Som du kan se, foo og foo2 gjør akkurat det samme. Den eneste forskjellen er det foo kan kjedes mens foo2 kan ikke.
Åpenbart er anropskjeden forskjellig mellom:
obj.foo (1) .foo (2) .foo (3);
og
obj2.foo2 (1); obj2.foo2 (2); obj2.foo2 (3);
Gitt denne koden, kjørte jeg den på Chrome, Firefox og IE for å avgjøre om jeg må bekymre meg om ytelse.
Og her er resultatene jeg fikk:
Saken er at jeg la til en operasjon i funksjonen (Math.cos) for å simulere noen form for behandling utført av funksjonen.
Hvis jeg fjerner alt og bare beholder komme tilbake uttalelse, på alle nettlesere er det ingen forskjell (faktisk bare en eller to millisekunder for 10.000.000 prøver). Du kan teste dette selv over nettleserne. Og hvis du ikke har enhetene hendige, er det nok av gratis verktøy på dev.modern.IE. Bare ikke prestasjon test en virtuell maskin mot en ekte enhet.
Så min konklusjon er: Det er en tur!
En flytende API er flott. Den produserer mer lesbar kode, og du kan bruke den uten problem eller ytelsestap!
Det kan kanskje overraske deg litt, men Microsoft har en mengde gratis læring på mange JavaScript-temaer med åpen kildekode, og vi har et oppdrag å skape mye mer med Microsoft Edge. Sjekk ut min egen:
Eller vårt lags læringsserie:
Og noen gratis verktøy: Visual Studio Community, Azure Trial, og tverrbrowser testing verktøy for Mac, Linux eller Windows.
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
