Programmation modulaire JavaScript (2) : spécification AMD

La première partie de cette série a présenté la méthode d'écriture de base du module Javascript. Aujourd'hui, nous allons présenter comment utiliser le module de manière standardisée.

(suite d'en haut)

7. Spécifications du module

Réfléchissez d'abord à la raison pour laquelle les modules sont importants ?

Grâce aux modules, nous pouvons utiliser le code d'autres personnes plus facilement et charger les modules que nous voulons pour les fonctions que nous voulons.

Cependant, il y a un prérequis pour cela, c'est-à-dire que tout le monde doit écrire le module de la même manière, sinon vous avez votre façon d'écrire, et j'ai ma façon d'écrire, ne serait-ce pas un désordre! Ceci est d’autant plus important qu’il n’existe pas encore de spécification officielle pour les modules Javascript.

Actuellement, il existe deux spécifications de modules Javascript populaires : CommonJS et AMD. Je présenterai principalement AMD, mais je commencerai par CommonJS.

8. CommonJS

En 2009, le programmeur américain Ryan Dahl a créé le projet node.js, en utilisant le langage JavaScript pour la programmation côté serveur.

Cela marque la naissance officielle de la "programmation modularisée JavaScript". Parce que pour être honnête, dans un environnement de navigateur, ne pas avoir de modules n'est pas un gros problème. Après tout, la complexité des programmes Web est limitée, mais côté serveur, il doit y avoir des modules pour interagir avec le système d'exploitation et les autres applications. sinon il n'y a aucun moyen de programmer.

Le système de modules de node.js est implémenté en référence à la spécification CommonJS. Dans CommonJS, il existe une méthode globale require() pour charger les modules. En supposant qu'il existe un module mathématique math.js, il peut être chargé comme suit.

var math = require('math');

Ensuite, vous pouvez appeler les méthodes fournies par le module :

var math = require('math');
math.add(2,3); // 5

Parce que cette série est principalement destinée à la programmation du navigateur et n'implique pas node.js, nous ne le ferons donc pas. Je ne fais pas grand chose avec CommonJS. Tout ce que nous devons savoir ici, c'est que require() est utilisé pour charger les modules.

9. Environnement du navigateur

Avec le module côté serveur, il est naturel que tout le monde veuille le module côté client. Et il est préférable que les deux soient compatibles, afin qu'un module puisse fonctionner à la fois sur le serveur et sur le navigateur sans modification.

Cependant, en raison d'une limitation majeure, la spécification CommonJS n'est pas adaptée aux environnements de navigateur. Le code de la section précédente présente toujours un gros problème s'il est exécuté dans un navigateur. Pouvez-vous le voir ?

var math = require('math');
math.add(2, 3);

La deuxième ligne de math.add(2, 3) s'exécute après la première ligne de require('math'), vous devez donc attendre que math.js soit chargé. Autrement dit, si le chargement prend beaucoup de temps, l’application entière reste en attente.

Ce n'est pas un problème côté serveur, car tous les modules sont stockés sur le disque dur local et peuvent être chargés de manière synchrone. Le temps d'attente est le temps de lecture du disque dur. Cependant, pour les navigateurs, c'est un gros problème, car les modules sont placés côté serveur, et le temps d'attente dépend de la vitesse du réseau. Cela peut prendre beaucoup de temps, et le navigateur est dans une "mort suspendue". État.

Par conséquent, les modules côté navigateur ne peuvent pas utiliser le "chargement synchrone" (synchrone), mais ne peuvent utiliser que le "chargement asynchrone" (asynchrone). C’est dans ce contexte qu’est née la spécification AMD.

10. AMD

AMD est l'abréviation de « Asynchronous Module Definition », qui signifie « définition de module asynchrone ». Il charge les modules de manière asynchrone et le chargement du module n'affecte pas l'exécution des instructions suivantes. Toutes les instructions qui dépendent de ce module sont définies dans une fonction de rappel. Cette fonction de rappel ne s'exécutera pas tant que le chargement n'est pas terminé.

AMD utilise également l'instruction require() pour charger les modules, mais contrairement à CommonJS, il nécessite deux paramètres :

require([module], callback);

Le premier paramètre [module] est un tableau, à l'intérieur du membre est le module à charger ; le deuxième paramètre de rappel est la fonction de rappel une fois le chargement réussi. Si le code précédent est réécrit sous forme AMD, il ressemblera à ceci :

require(['math'], function (math) {
　　math.add(2, 3);
});

math.add() et le chargement du module mathématique ne sont pas synchronisés et le navigateur ne se fige pas. Alors évidemment, AMD est plus adapté à l’environnement navigateur.

Actuellement, il existe deux bibliothèques Javascript principales qui implémentent la spécification AMD : require.js et curl.js. La troisième partie de cette série expliquera plus en détail l'utilisation d'AMD et comment mettre en pratique la programmation modulaire en introduisant require.js.

Ce qui précède est le contenu de la programmation modulaire JavaScript (2) : spécifications AMD Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !