Accentsconagua

Comprendre les API Fluent en JavaScript

Code
Share

Lors de la conception de Babylon.js v2.0(une bibliothèque pour la construction 3D sur le Web), je me suis récemment retrouvé à souhaiter que davantage d’API soient courant-c'est-à-dire que j'aimerais que la communauté puisse plus facilement lire, comprendre et s'appuyer sur le travail tout en consacrant moins de temps aux documents techniques.. 

Dans ce tutoriel, je vais passer en revue des API fluides: éléments à prendre en compte, comment les écrire et implications pour les performances sur plusieurs navigateurs.. 

Qu'est-ce qu'une API Fluent??

UNE API fluide, comme indiqué dans cet article Wikipedia, est une implémentation d'une API orientée objet qui vise à fournir un code plus lisible. JQuery est un excellent exemple de ce qu'une API fluide vous permet de faire:

 $ ('
') .html ("Les APIs courantes sont cool!") .addClass ("header") .appendTo ("body");

L'API fluide vous permet de chaîner des appels de fonction en renvoyant cet objet.

Nous pouvons facilement créer une API fluide comme ceci:

var MyClass = function (a) this.a = a;  MyClass.prototype.foo = function (b) // Effectue des travaux complexes this.a + = Math.cos (b); retournez ceci;

Comme vous pouvez le constater, l’astuce consiste à rendre le ce objet (référence à l'instance courante dans ce cas) pour permettre à la chaîne de continuer.

Si vous ne savez pas comment le mot-clé «this» fonctionne en JavaScript, je vous recommande de lire cet excellent article de Mike West.

Nous pouvons ensuite enchaîner les appels:

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

Avant d’essayer de faire la même chose avec Babylon.js, je voulais être sûr que cela ne générerait pas de problèmes de performances..

Qu'en est-il de la performance?

Alors j'ai fait un repère!

nombre de var = 10000000; var MyClass = function (a) this.a = a;  MyClass.prototype.foo = function (b) // Effectue des travaux complexes this.a + = Math.cos (b); retournez ceci;  MyClass.prototype.foo2 = fonction (b) // Effectue des travaux complexes this.a + = Math.cos (b);  var start = new Date (). getTime (); var obj = new MyClass (5); obj.foo (1) .foo (2) .foo (3); pour (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 +": Sans renvoyer ceci: "+ (fin2 - début2) +" ms ";

Comme vous pouvez le voir, foo et foo2 faire exactement la même chose. La seule différence est que foo peut être enchaîné alors que foo2 ne peux pas.

Évidemment, la chaîne d’appel est différente entre:

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

et

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

Étant donné ce code, je l'ai exécuté sur Chrome, Firefox et IE pour déterminer si je devais me préoccuper de la performance..

Et voici les résultats que j'ai obtenus:

  • Sur Chrome, l'API régulière est 6% plus lent que l'API fluide.
  • Sur Firefox, les deux API fonctionnent presque à la même vitesse (l’API fluide est 1% Ralentissez).
  • Sur C'EST À DIRE, les deux API fonctionnent presque à la même vitesse (l’API fluide est 2% Ralentissez).

La chose est que j'ai ajouté une opération dans la fonction (Math.cos) pour simuler un type de traitement effectué par la fonction.

Si je supprime tout et que je garde le revenir déclaration, sur tous les navigateurs, il n'y a pas de différence (en réalité, une ou deux millisecondes pour 10 000 000 d'essais). Vous pouvez tester cela vous-même à travers les navigateurs. Et si vous n'avez pas les appareils à portée de main, il existe de nombreux outils gratuits sur dev.modern.IE. Il suffit de ne pas tester les performances d'une machine virtuelle contre un périphérique réel.. 

Donc ma conclusion est: c'est un essai!

Une API fluide est géniale: elle produit un code plus lisible et vous pouvez l'utiliser sans aucun problème ni perte de performance.! 

Plus de pratique avec JavaScript

Cela vous surprendra peut-être un peu, mais Microsoft a beaucoup à apprendre gratuitement sur de nombreuses rubriques JavaScript open-source et nous avons pour mission de créer beaucoup plus avec Microsoft Edge. Découvrez moi-même:

  • Introduction à WebGL 3D avec HTML5 et Babylon.JS
  • Construire une application à page unique avec ASP.NET et AngularJS
  • Graphiques de pointe en HTML

Ou la série d'apprentissage de notre équipe:

  • Conseils pratiques sur les performances pour rendre votre code HTML / JavaScript plus rapide (une série en sept parties allant de la conception réactive aux jeux occasionnels en passant par l'optimisation des performances)
  • Le démarrage rapide de la plate-forme Web moderne (principes de base de HTML, CSS et JavaScript)
  • Développement d'une application Windows universelle avec HTML et JavaScript Jump Start (utilisez le JS que vous avez déjà créé pour créer une application)

Et quelques outils gratuits: Communauté Visual Studio, Azure Trial et outils de test multi-navigateurs pour Mac, Linux ou Windows..

Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.

Code
×