Comprendere le API Fluent in JavaScript

Durante la progettazione di Babylon.js v2.0(una libreria per costruire 3D sul web), recentemente mi sono ritrovato a desiderare che fossero presenti più API fluente-cioè, vorrei che la comunità potesse più facilmente leggere, capire e sviluppare il lavoro mentre spendeva meno tempo nei documenti tecnici. 

In questo tutorial, illustrerò le API fluenti: cosa considerare, come scriverle e implicazioni sulle prestazioni del browser. 

Cos'è un'API fluente?

UN API fluente, come dichiarato da questo articolo di Wikipedia, è un'implementazione di un'API orientata agli oggetti che mira a fornire un codice più leggibile. JQuery è un ottimo esempio di ciò che un'API fluente ti permette di fare:

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

L'API fluente consente di concatenare le chiamate di funzione restituendo questo oggetto.

Possiamo facilmente creare un'API fluente come questa:

var MyClass = function (a) this.a = a;  MyClass.prototype.foo = function (b) // Esegue un lavoro complesso this.a + = Math.cos (b); restituiscilo; 

Come puoi vedere, il trucco sta nel restituire il Questo oggetto (riferimento all'istanza corrente in questo caso) per consentire alla catena di continuare.

Se non sei a conoscenza di come la parola chiave "this" funziona in JavaScript, ti consiglio di leggere questo fantastico articolo di Mike West.

Possiamo quindi concatenare le chiamate:

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

Prima di provare a fare lo stesso con Babylon.js, volevo essere sicuro che questo non avrebbe generato problemi di prestazioni.

Che dire delle prestazioni?

Quindi ho fatto un punto di riferimento!

var count = 10000000; var MyClass = function (a) this.a = a;  MyClass.prototype.foo = function (b) // Esegue un lavoro complesso this.a + = Math.cos (b); restituiscilo;  MyClass.prototype.foo2 = function (b) // Esegue un lavoro complesso this.a + = Math.cos (b);  var start = new Date (). getTime (); var obj = new MyClass (5); obj.foo (1) .foo (2) .foo (3); per (indice var = 0; indice < 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 +": Senza restituire questo: "+ (end2 - start2) +" ms ";

Come potete vedere, foo e foo2 fare esattamente la stessa cosa L'unica differenza è questa foo può essere incatenato mentre foo2 non può.

Ovviamente la catena di chiamata è diversa tra:

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

e

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

Dato questo codice, l'ho eseguito su Chrome, Firefox e IE per determinare se devo preoccuparmi delle prestazioni.

E qui ci sono i risultati che ho ottenuto:

• Sopra Cromo, l'API regolare è 6% più lento dell'API fluente.
• Sopra Firefox, entrambe le API funzionano quasi alla stessa velocità (l'API fluente è 1% Più lentamente).
• Sopra IE, entrambe le API funzionano quasi alla stessa velocità (l'API fluente è 2% Più lentamente).

Il fatto è che ho aggiunto un'operazione alla funzione (Math.cos) per simulare un tipo di trattamento eseguito dalla funzione.

Se rimuovo tutto e tengo semplicemente il ritorno dichiarazione, su tutti i browser non c'è differenza (in realtà solo uno o due millisecondi per 10.000.000 tentativi). Puoi testarlo da solo attraverso i browser. E se non hai i dispositivi a portata di mano, ci sono molti strumenti gratuiti su dev.modern.IE. Basta non testare le prestazioni di una macchina virtuale contro un dispositivo reale. 

Quindi la mia conclusione è: è un andare!

Un'API fluente è eccezionale: produce codice più leggibile e puoi usarlo senza alcun problema o perdita di prestazioni! 

Più mani con JavaScript

Potrebbe sorprendervi un po ', ma Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge in arrivo. Controlla il mio:

• Introduzione a WebGL 3D con HTML5 e Babylon.JS
• Creazione di un'applicazione a pagina singola con ASP.NET e AngularJS
• Grafica all'avanguardia in HTML

Oppure le serie di apprendimento del nostro team:

• Suggerimenti pratici sulle prestazioni per rendere il tuo HTML / JavaScript più veloce (una serie in sette parti dal design reattivo ai giochi casuali all'ottimizzazione delle prestazioni)
• La piattaforma Web moderna Jump Start (i fondamenti di HTML, CSS e JavaScript)
• Sviluppo di un'applicazione Windows universale con HTML e JavaScript Jump Start (usa il JS che hai già creato per creare un'app)

E alcuni strumenti gratuiti: Visual Studio Community, Azure Trial e strumenti di test cross-browser per Mac, Linux o Windows.

Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.