JavaScript : maîtriser l'art des API Fluent

Lors de la conception de Babylon.js v2.0 (un bibliothèque pour créer de la 3D sur le Web), je me suis récemment retrouvé à souhaiter plus L'API est smooth - cela dit, je veux qu'elle soit plus facile à lire pour la communauté, Comprenez et développez votre travail tout en consacrant moins de temps à la documentation technique.

Dans ce tutoriel, je couvrirai les API fluides : ce qu'il faut considérer, comment Leur écriture et leur impact sur les performances entre navigateurs.

Qu'est-ce que l'API Fluent ?

L'API fluide, telle que décrite dans cet article Wikipédia, est API orientée objet conçue pour fournir un code plus lisible. JQuery est un excellent exemple de ce qu'une API fluide vous permet de faire :

 $('<div></div>')

     .html("Fluent API are cool!")

     .addClass("header")

     .appendTo("body");

L'API Smooth vous permet de créer des liens La fonction est appelée en renvoyant cet objet.

Nous pouvons facilement en créer un API fluide comme celle-ci : 

var MyClass = function(a) {

    this.a = a;

}



MyClass.prototype.foo = function(b) {

    // Do some complex work   

    this.a += Math.cos(b);

    return this;

}

Comme vous pouvez le constater, l'astuce Renvoie simplement l'objet this (faisant référence à l'instance actuelle dans ce cas) pour permettre à la chaîne de continuer.

Si vous ne savez pas Comment fonctionne le mot-clé "this" en JavaScript, je vous recommande de lire cet excellent article Auteur de l'article : Mike West.

Ensuite on peut enchaîner les appels :

var obj = new MyClass(5);

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

Avant d'essayer de faire ce qui suit Comme Babylon.js, je veux m'assurer que cela ne génère pas de Problèmes de performances.

Comment se passe la représentation ?

J'ai donc fait un test de benchmark !

var count = 10000000;



var MyClass = function(a) {

    this.a = a;

}



MyClass.prototype.foo = function(b) {

    // Do some complex work   

    this.a += Math.cos(b);

    return this;

}



MyClass.prototype.foo2 = function (b) {

    // Do some complex work   

    this.a += Math.cos(b);

}



var start = new Date().getTime();

var obj = new 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<BR>";

div.innerHTML += obj2.a + ": Without return this: " + (end2 - start2) + "ms";

comme Vous pouvez voir que foo 和 foo2 fait exactement la même chose. seulement La différence est que foo 可以链接，而 foo2 ne peut pas.

Évidemment la chaîne d'appel La différence est :

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

et

obj2.foo2(1);

obj2.foo2(2);

obj2.foo2(3);

Compte tenu de ce code, je l'ai exécuté Découvrez si je m'en soucie sur Chrome, Firefox et IE performance.

Voici le résultat J'obtiens :

• Sur Chrome, l'API standard est 6% plus lente que l'API Fluent.
• Sur Firefox, Les deux API fonctionnent presque de la même manière (API Fluent plus lente 1%).
• Sur IE, Les deux API fonctionnent presque de la même manière (l'API Fluent est 2 % plus lente).

Le problème c'est que j'ai ajouté une opération dans la fonction (Math.cos) Simule une sorte de traitement effectué par une fonction.

Si je supprime tout Gardez simplement la déclaration return, cela ne fonctionne pas sur tous les navigateurs La différence (en fait seulement une à deux millisecondes sur 10 000 000 de tentatives). toi Vous pouvez le tester vous-même sur tous les navigateurs. si tu n'as pas L'appareil est pratique et il existe de nombreux outils gratuits sur dev.modern.IE. N'effectuez simplement pas de tests de performances sur les machines virtuelles Pour les vrais appareils.

Ma conclusion est donc la suivante : allez!

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

Plus de pratique JavaScript

Cela peut vous surprendre un peu, mais Microsoft Il existe de nombreux contenus d'apprentissage gratuits sur de nombreux sujets JavaScript open source, et nous sommes Avec l'arrivée de Microsoft Edge, notre mission est de créer davantage. Découvrez le mien :

• Introduction à la 3D avec HTML5 et WebGL Babylon.JS
• Créez une application d'une seule page à l'aide des commandes suivantes ASP.NET et AngularJS
• Graphiques de pointe en HTML

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

• Conseils de performance pratiques pour rendre votre HTML/JavaScript Faster (une série en sept parties allant du design réactif au Jeux occasionnels à l'optimisation des performances)
• Démarrage rapide avec les plates-formes réseau modernes (bases) HTML, CSS et JavaScript)
• Développer des applications Windows universelles HTML et JavaScript Jump Start (en utilisant le JS que vous avez déjà créé) Créer une application)

Plus quelques outils gratuits : Visual Studio Community, Azure Trial et des outils de test multi-navigateurs pour Mac, Linux ou Windows Fenêtres.

Cet article fait partie de la technologie de développement Web Série de Microsoft. Nous sommes ravis de partager avec vous Microsoft Edge et le nouveau EdgeHTML moteur de rendu. gratuit Machine virtuelle ou tests à distance sur appareils Mac, iOS, Android ou Windows @http://dev.modern.ie/.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!