En JavaScript, AMD fait référence à « Définition de module asynchrone », qui est une spécification de module qui charge les modules de manière asynchrone. Le chargement du module n'affecte pas l'exécution de toutes les instructions qui dépendent de ce module. sont définis dans une fonction de rappel. Cette fonction de rappel ne s'exécutera pas tant que le chargement n'est pas terminé.
L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
À mesure que les sites Web deviennent progressivement des « applications Internet », les codes Javascript intégrés dans les pages Web deviennent de plus en plus volumineux et complexes.
Les pages Web ressemblent de plus en plus à des programmes de bureau, nécessitant une division du travail et une collaboration au sein d'une équipe, une gestion des progrès, des tests unitaires, etc... Les développeurs doivent utiliser des méthodes d'ingénierie logicielle pour gérer la logique métier du Web. pages.
La programmation modulaire Javascript est devenue un besoin urgent. Idéalement, les développeurs n'ont besoin que d'implémenter la logique métier de base, et d'autres modules peuvent être chargés par d'autres.
Cependant, Javascript n'est pas un langage de programmation modulaire. Il ne prend pas en charge les « classes », encore moins les « modules ». (La sixième édition du standard ECMAScript, en cours de formulation, prendra officiellement en charge les « classes » et les « modules », mais sa mise en pratique prendra beaucoup de temps.)
La communauté Javascript a fait beaucoup d'efforts pour améliorer l'existant Dans l'environnement d'exécution, l'effet de « module » est obtenu. Cet article résume les meilleures pratiques actuelles de « programmation modulaire Javascript » et explique comment les mettre en pratique. Bien qu'il ne s'agisse pas d'un didacticiel d'introduction, vous pouvez le comprendre à condition d'avoir un peu de compréhension de la syntaxe de base de Javascript.
Spécifications des modules
Réfléchissez-y d'abord, pourquoi les modules sont-ils 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.
CommonJS
En 2009, le programmeur américain Ryan Dahl a créé le projet node.js pour utiliser le langage JavaScript pour la programmation côté serveur.
Cela marque la naissance officielle de la « programmation modulaire 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 la méthode fournie par le module :
var math = require('math'); math.add(2,3); // 5
Comme cette série est principalement destinée à la programmation par navigateur et n'implique pas node.js, il n'y a plus d'introduction à CommonJS . Tout ce que nous devons savoir ici, c'est que require() est utilisé pour charger les modules.
Environnement du navigateur
Après avoir eu 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 aura 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 un état "suspendu". .
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.
Spécification 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也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:
require([module], callback);
第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式,就是下面这样:
require(['math'], function (math) { math.add(2, 3); });
math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境。
目前,主要有两个Javascript库实现了AMD规范:require.js和curl.js。本系列的第三部分,将通过介绍require.js,进一步讲解AMD的用法,以及如何将模块化编程投入实战。
更多编程相关知识,请访问:编程视频!!
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!