Javascript comme un boss: comprendre les API courants

Les plats clés

• Les API courantes en JavaScript permettent un code plus lisible et compréhensible en activant le chaînage des appels de fonction, obtenu en renvoyant «cet» objet dans chaque fonction. Cela rend le code plus intuitif et plus facile à déboguer, en particulier lorsqu'il s'agit de séquences complexes d'appels de fonction.
• Les tests de performances sur différents navigateurs (Chrome, Firefox, IE) ont montré que l'utilisation d'API fluide n'a pas d'impact significatif sur les performances. Dans certains cas, l'API fluide était encore plus rapide que l'API ordinaire, indiquant qu'ils peuvent être utilisés sans préoccupation concernant les pertes de performance.
• Les API courantes sont non seulement applicables à JavaScript, mais peuvent être utilisées avec n'importe quelle bibliothèque ou cadre JavaScript. De nombreuses bibliothèques et cadres populaires, comme JQuery, utilisent déjà des API couramment pour rendre leurs méthodes plus lisibles et expressives. Cependant, ils doivent être utilisés judicieusement, compte tenu des besoins du projet et de la familiarité de l'équipe avec le modèle API courant.

Cet article fait partie d'une série Web Dev Tech de Microsoft. Merci de soutenir les partenaires qui rendent le point de point possible.

Lors de la conception de babylon.js v2.0 (une bibliothèque pour construire 3D sur le Web), je me suis récemment retrouvé à souhaiter que plus d'API soit couramment - c'est-à-dire que je souhaite que la communauté puisse lire, comprendre et s'appuyer sur Le travail tout en passant moins de temps dans les documents technologiques. Dans ce tutoriel, je vais parcourir les API courantes - que faire considérer, comment les écrire et les implications de performance entre les navigateurs.

Qu'est-ce qui rend une API couramment?

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

<span>$('<div></div>')
</span>     <span>.html("Fluent API are cool!")
</span>     <span>.addClass("header")
</span>     <span>.appendTo("body");</span>

Une API courante vous permet de chaîner les appels de la fonction en renvoyant cet objet. Si vous ne savez pas comment le mot clé fonctionne en JavaScript, je recommande de lire ce excellent article.

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

<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}</span>

Comme vous pouvez le voir, l'astuce consiste à renvoyer cet objet (une référence à l'instance actuelle dans ce cas) pour permettre à la chaîne de continuer.

Nous pouvons alors chaîner les appels:

<span>var obj = new MyClass(5);
</span>obj<span>.foo(1).foo(2).foo(3);</span>

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

donc j'ai fait une référence!

<span>var count = 10000000;
</span>
<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}
</span>
<span>MyClass.prototype.foo2 = function (b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span><span>}
</span>
<span>var start = new Date().getTime();
</span><span>var obj = new MyClass(5);
</span>obj<span>.foo(1).foo(2).foo(3);
</span><span>for (var index = 0; index < count; index++) {
</span>    obj<span>.foo(1).foo(2).foo(3);
</span><span>}
</span><span>var end = new Date().getTime();
</span>
<span>var start2 = new Date().getTime();
</span><span>var obj2 = new MyClass(5);
</span><span>for (var index = 0; index < count; index++) {
</span>    obj2<span>.foo2(1);
</span>    obj2<span>.foo2(2);
</span>    obj2<span>.foo2(3);
</span><span>}
</span><span>var end2 = new Date().getTime();
</span>
<span>var div = document.getElementById("results");
</span>
div<span>.innerHTML += obj.a + ": With return this: " + (end - start) + "ms<BR>";
</span>div<span>.innerHTML += obj2.a + ": Without return this: " + (end2 - start2) + "ms";</span>

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 peut pas.

Évidemment, la chaîne d'appels est différente entre:

obj<span>.foo(1).foo(2).foo(3);</span>

et:

obj2<span>.foo2(1);
</span>obj2<span>.foo2(2);
</span>obj2<span>.foo2(3);</span>

Compte tenu de ce code, je l'ai exécuté sur Chrome, Firefox et IE pour déterminer si je dois m'inquiéter des performances.

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

• Dans le chrome, l'API ordinaire est 6% plus lent que l'API fluide
• Dans Firefox, les deux API fonctionnent presque à la même vitesse (l'API fluide est 1% plus lent)
• Dans IE, les deux API fonctionnent presque à la même vitesse (l'API fluide est à 2% plus lent)

J'ai ajouté une opération dans la fonction (math.cos) pour simuler une sorte de traitement effectué par la fonction.

Si je supprime tout et que je garde simplement l'instruction de retour, sur tous les navigateurs, il n'y a pas de différence (en fait, un ou deux millisecondes pour 10 000 000 essais). Vous pouvez tester cela par 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 Modern.ie. Ne pas tester une machine virtuelle contre un réel appareil.

Donc, ma conclusion est: c'est un coup!

Les API courantes sont excellentes, ils produisent du code plus lisible et vous pouvez les utiliser sans aucun problème ni pertes de performances!

Plus pratique avec JavaScript

Cela pourrait vous surprendre un peu, mais Microsoft a un tas d'apprentissage gratuit sur de nombreux sujets JavaScript open source et nous sommes en mission pour en créer beaucoup plus dans la venue Spartan Project. Consultez le mien:

• Introduction à WebGL 3D et HTML5 et babylon.js
• Construire une seule application de page avec asp.net et angularjs
• Graphiques de pointe dans HTML

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

• Conseils de performance pratiques pour accélérer votre HTML / JavaScript (une série en sept parties, de la conception réactive aux jeux occasionnels à l'optimisation des performances)
• La plate-forme Web moderne Jumpstart (les principes fondamentaux de HTML, CSS et JS)
• Développer une application Windows universelle avec HTML et JavaScript Jumpstart (utilisez le JS que vous avez déjà créé pour créer une application)

Et quelques outils gratuits: Visual Studio Community, Azure Trial et Cross-Browser Test Tools for Mac, Linux ou Windows.

Cet article fait partie de la série Web Dev Tech de Microsoft. Nous sommes ravis de partager Project Spartan et son nouveau moteur de rendu avec vous. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows sur moderne.ie.

Les questions fréquemment posées sur les API courantes en javascript

Qu'est-ce qu'une API courante en javascript?

Une API courante en JavaScript est un moyen de structurer votre code pour le rendre plus lisible et plus facile à comprendre. Il implique ensemble des méthodes de chaînage d'une manière qui se lit comme une phrase ou une série d'instructions. Ceci est réalisé en s'assurant que chaque méthode renvoie un objet, permettant à une autre méthode d'être immédiatement invoquée à partir du résultat de la méthode précédente. Les API courantes peuvent rendre votre code plus propre et plus intuitif, surtout lorsqu'il s'agit de séquences complexes d'appels de fonction.

Comment créer une API courante en JavaScript?

La création d'une API courante en JavaScript implique la conception de vos méthodes pour renvoyer l'objet auquel ils appartiennent. Cela vous permet de chaîner des méthodes ensemble. Par exemple, considérez un objet «voiture» avec des méthodes «startEngine», «accélérer» et «arrêter». Si chacune de ces méthodes renvoie «ceci» (l'objet de la voiture), vous pouvez les enchaîner comme ainsi: car.startenne (). Accélérer (). Stop ().

quels sont les avantages de l'utilisation de fluide API?

Les API courantes peuvent rendre votre code plus lisible et plus facile à entretenir. Par des méthodes de chaînage ensemble, vous pouvez exprimer des opérations complexes d'une manière qui se lit comme une phrase. Cela peut rendre votre code plus facile à comprendre et à déboguer. Les API fluide peuvent également rendre votre code plus expressif et flexible, vous permettant de créer des abstractions plus puissantes.

Y a-t-il des inconvénients pour utiliser des API courantes?

Alors que les API fluide peuvent rendre votre code plus lisible , ils peuvent également rendre plus difficile de déboguer s'ils ne sont pas utilisés correctement. Étant donné que les appels de méthode sont enchaînés, un problème avec une méthode peut affecter toutes les méthodes ultérieures de la chaîne. De plus, les API courantes peuvent parfois être moins intuitives pour les personnes qui ne connaissent pas le motif.

Puis-je utiliser des API courantes avec du code asynchrone?

Oui, vous pouvez utiliser des API courantes avec du code asynchrone , mais cela peut être un peu plus complexe. Vous devrez vous assurer que chaque méthode de la chaîne renvoie une promesse, vous permettant d'utiliser «then ()» pour chaîner les méthodes ensemble. Alternativement, vous pouvez utiliser la syntaxe asynchrone / attendre pour écrire du code asynchrone qui semble synchrone, ce qui peut rendre votre API fluide plus facile à lire et à comprendre.

Comment l'API fluide se compare-t-il aux autres modèles de conception en JavaScript?

L'API courante est un modèle de conception qui se concentre sur la lisibilité et l'expressivité. Il peut être comparé à d'autres modèles de conception comme le modèle de générateur, qui vise également à rendre le code plus lisible et plus facile à travailler. Cependant, bien que le modèle de générateur se concentre sur la construction d'objets complexes étape par étape, l'API Fluent se concentre sur la réalisation d'appels de méthode chaînables pour un flux d'opérations plus lisible.

Les API fluide peuvent être utilisées avec des bibliothèques et des frameworks JavaScript?

Oui, les API courantes peuvent être utilisées avec n'importe quelle bibliothèque ou cadre JavaScript. De nombreuses bibliothèques et frameworks populaires comme JQuery et Lodash utilisent déjà des API courants pour rendre leurs méthodes plus lisibles et expressives.

Comment puis-je déboguer une API courante?

Le débogage d'une API fluide peut être un peu Tricky parce que les appels de méthode sont enchaînés. Cependant, vous pouvez utiliser des instructions Console.log dans vos méthodes pour enregistrer leur sortie. De plus, l'utilisation d'un débogueur JavaScript peut vous aider à parcourir votre code et à voir l'état de vos objets à chaque étape de la chaîne.

Les API courantes peuvent-elles améliorer les performances?

Les API courantes consistent principalement à améliorer la lisibilité et la maintenabilité du code, pas les performances. Cependant, en rendant votre code plus facile à lire et à comprendre, les API couramment peuvent vous aider à repérer et à résoudre les problèmes de performances plus facilement. Soyez un bon choix pour les projets où la lisibilité et la maintenabilité sont une priorité. Cependant, ils peuvent ne pas être les mieux adaptés à chaque projet. Si votre équipe ne connaît pas le modèle API fluide, il peut leur prendre un certain temps pour s'y habituer. De plus, les API courantes peuvent rendre le débogage plus difficile s'il n'est pas utilisé correctement. Comme pour tout modèle de conception, il est important de considérer les besoins de votre projet et de votre équipe avant de décider d'utiliser les API courantes.

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!