简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Spécifications de programmation modulaire JavaScript CommonJS, AMD, CMD, ES6

Spécifications de programmation modulaire JavaScript CommonJS, AMD, CMD, ES6

WBOY
WBOYavant
2022-03-01 18:11:321916parcourir

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement les spécifications de programmation modulaire, les problèmes liés à CommonJS, AMD, CMD et ES6. J'espère qu'il sera utile à tout le monde.

Spécifications de programmation modulaire JavaScript CommonJS, AMD, CMD, ES6

Recommandations associées : Tutoriel d'apprentissage Javascript

1. Préface

AMD, CMD, CommonJs sont des solutions de programmation modulaires fournies dans ES5. >import/export est une nouvelle solution de programmation modulaire dans ES6. AMD、CMD、CommonJs是ES5中提供的模块化编程方案，import/export是ES6中新增的模块化编程方案。

那么，究竟什么什么是AMD、CMD、CommonJs？他们之间又存在什么区别呢？项目开发应该选用哪种模块化编程规范，又是如何使用？本篇博文将一一解答以上疑问。

二、AMD-异步模块定义

AMD是”Asynchronous Module Definition”的缩写，即”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。

这里异步指的是不堵塞浏览器其他任务（dom构建，css渲染等），而加载内部是同步的（加载完模块后立即执行回调）。

RequireJS：是一个AMD框架，可以异步加载JS文件，按照模块加载方法，通过define()函数定义，第一个参数是一个数组，里面定义一些需要依赖的包，第二个参数是一个回调函数，通过变量来引用模块里面的方法，最后通过return来输出。

AMD是RequireJS在推广过程中对模块定义的规范化产出，它是一个概念，RequireJS是对这个概念的实现，就好比JavaScript语言是对ECMAScript规范的实现。AMD是一个组织，RequireJS是在这个组织下自定义的一套脚本语言。

不同于CommonJS，它要求两个参数：

require([module], callback);

第一个参数[module]，是一个数组，里面的成员是要加载的模块，callback是加载完成后的回调函数。如果将上述的代码改成AMD方式：

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

其中，回调函数中参数对应数组中的成员（模块）。

requireJS加载模块，采用的是AMD规范。也就是说，模块必须按照AMD规定的方式来写。

具体来说，就是模块书写必须使用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接写在define()函数之中。

define(id, dependencies, factory);
  • id：模块的名字，如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本名字；
  • dependencies：模块的依赖，已被模块定义的模块标识的数组字面量。依赖参数是可选的，如果忽略此参数，它应该默认为 ["require", "exports", "module"]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。
  • factory：模块的工厂函数，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

假定现在有一个math.js文件，定义了一个math模块。那么，math.js书写方式如下：

// math.jsdefine(function() {
  var add = function(x, y) {
    return x + y;
  }

  return  {
    add: add  }})

加载方法如下：

// main.jsrequire(['math'], function(math) {
  alert(math.add(1, 1));})

如果math模块还依赖其他模块，写法如下：

// math.jsdefine(['dependenceModule'], function(dependenceModule) {
    // ...})

当require()函数加载math模块的时候，就会先加载dependenceModule模块。当有多个依赖时，就将所有的依赖都写在define()函数第一个参数数组中，所以说AMD是依赖前置的。这不同于CMD规范，它是依赖就近的。
CMD

三、CMD-同步模块定义

CMD 即Common Module Definition通用模块定义，是SeaJS在推广过程中对模块定义的规范化产出，是一个同步模块定义，是SeaJS的一个标准，SeaJS是CMD概念的一个实现，SeaJS是淘宝团队玉伯提供的一个模块开发的js框架。CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS

Alors, qu'est-ce que AMD, CMD, CommonJs exactement ? Quelles sont les différences entre eux ? Quelle spécification de programmation modulaire doit être utilisée pour le développement de projets et comment l'utiliser ? Cet article de blog répondra aux questions ci-dessus une par une. 🎜🎜2. Définition du module asynchrone AMD🎜🎜AMD est l'abréviation de "Définition du module asynchrone", c'est-à-dire "Définition du module asynchrone. ". Il charge les modules de manière asynchrone et le chargement du module n'affecte pas l'exécution des instructions suivantes. 🎜🎜Asynchrone fait ici référence au fait de ne pas bloquer d'autres tâches du navigateur (construction dom, rendu css, etc.), tandis que le chargement est synchrone en interne (les rappels sont exécutés immédiatement après le chargement le module) ). 🎜
🎜RequireJS : Il s'agit d'un framework AMD qui peut charger des fichiers JS de manière asynchrone. Selon la méthode de chargement du module, il est défini. via la fonction definition(), le premier paramètre est un tableau qui définit certains packages dépendants, le deuxième paramètre est une fonction de rappel, qui fait référence aux méthodes du module via des variables, et enfin les sorties via return. 🎜
🎜AMD est la sortie standardisée de la définition du module pendant le processus de promotion de RequireJS. C'est un concept, et RequireJS l'est. a L'implémentation de ce concept est tout comme le langage JavaScript est l'implémentation de la spécification ECMAScript. AMD est une organisation et RequireJS est un ensemble de langages de script personnalisés sous cette organisation. 🎜🎜Différent de CommonJS, il nécessite deux paramètres : 🎜
define(function(require, exports, module) {
  // 模块代码});
🎜Le premier paramètre [module] est un tableau, et les membres à l'intérieur sont les modules à charger <. code>callback est la fonction de rappel une fois le chargement terminé. Si le code ci-dessus est remplacé par la méthode AMD : 🎜
// CMDdefine(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  // 此处略去 100 行
  var b = require('./b') // 依赖可以就近书写
  b.doSomething()
  // ... })// AMD 默认推荐的是define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
  a.doSomething()
  // 此处略去 100 行
  b.doSomething()
  ...})
🎜 Parmi eux, les paramètres de la fonction de rappel correspondent aux membres (modules) du tableau. 🎜🎜requireJS charge les modules en utilisant la spécification AMD. En d'autres termes, le module doit être écrit de la manière spécifiée par AMD. 🎜🎜Plus précisément, l'écriture du module doit être définie à l'aide d'une fonction define() spécifique. Si un module ne dépend pas d'autres modules, il peut être écrit directement dans la fonction define(). 🎜
var math = require('math');
  • id : Le nom du module n'est pas fourni, le nom du module doit être par défaut le nom du script spécifié demandé par le chargeur de module ; /li>dépendances : dépendances de module, littéraux de tableau identifiés par les modules définis par le module. Le paramètre de dépendance est facultatif, s'il est omis, il doit être par défaut ["require", "exports", "module"]. Cependant, si l'attribut length de la méthode factory est inférieur à 3, le chargeur choisira d'appeler la méthode factory avec le nombre d'arguments spécifié par l'attribut length de la fonction.
  • factory : La fonction d'usine du module, la fonction ou l'objet à exécuter lors de l'initialisation du module. S'il s'agit d'une fonction, elle ne doit être exécutée qu'une seule fois. S'il s'agit d'un objet, cet objet doit être la valeur de sortie du module.
🎜Supposons qu'il existe maintenant un fichier math.js qui définit un module math. Ensuite, math.js s'écrit ainsi : 🎜
var math = require('math');math.add(2,3); // 5
🎜La méthode de chargement est la suivante : 🎜
module
exports
require
global
🎜Si le module math dépend aussi d'autres modules, il s'écrit comme suit : 🎜
var module = {
  exports: {}};(function(module, exports) {
  exports.multiply = function (n) { return n * 1000 };
  }(module, module.exports))var f = module.exports.multiply;
  f(5) // 5000
🎜When require() charge le module math, elle chargera d'abord le module dependenceModule. Lorsqu'il y a plusieurs dépendances, toutes les dépendances sont écrites dans le premier tableau de paramètres de la fonction define(), donc AMD est pré-dépendant. Ceci est différent de la spécification CMD, qui repose sur la proximité. 🎜 CMD🎜🎜3. CMD - définition du module de synchronisation🎜🎜CMD est la définition commune du module Common Module Definition, qui est la définition de SeaJS dans le processus de promotion La sortie standardisée de la définition du module est une définition de module synchronisée, qui est un standard de SeaJS SeaJS est une implémentation du concept de CMD<.>. <code>SeaJS est un framework js développé par des modules fournis par l'équipe Taobao Yubo. La spécification CMD a été développée au niveau national, tout comme AMD a un requireJS et CMD a une implémentation de navigateur <. code>SeaJS, SeaJS résout le même problème que requireJS, sauf en termes de méthode de définition de module et de timing de chargement (exécution, analyse) du module. différence. 🎜

CMD 通过define()定义，没有依赖前置，通过require加载jQuery插件，CMD是依赖就近，在什么地方使用到插件就在什么地方require该插件，即用即返，这是一个同步的概念。

在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下:

define(function(require, exports, module) {
  // 模块代码});

其中，

  • require是可以把其他模块导入进来的一个参数;
  • exports是可以把模块内的一些属性和方法导出的;
  • module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

AMD是依赖关系前置,在定义模块的时候就要声明其依赖的模块;
CMD是按需加载依赖就近,只有在用到某个模块的时候再去require，示例代码如下：

// CMDdefine(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  // 此处略去 100 行
  var b = require('./b') // 依赖可以就近书写
  b.doSomething()
  // ... })// AMD 默认推荐的是define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
  a.doSomething()
  // 此处略去 100 行
  b.doSomething()
  ...})

四、CommonJS 规范

CommonJS规范是通过module.exports定义的，在前端浏览器里面并不支持module.exports,通过node.js后端使用。Nodejs端使用CommonJS规范，前端浏览器一般使用AMD、CMD、ES6等定义模块化开发规范。

CommonJS的终极目标是提供一个类似Python，Ruby和Java的标准库。这样的话，开发者可以使用CommonJS API编写应用程序，然后这些应用就可以运行在不同的JavaScript解释器和不同的主机环境中。

在兼容CommonJS的系统中，你可以使用JavaScript开发以下程序：

  1. 服务器端JavaScript应用程序;
  2. 命令行工具;
  3. 图形界面应用程序;
  4. 混合应用程序（如，Titanium或Adobe AIR）;

2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。这标志"Javascript模块化编程"正式诞生。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。

node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。

var math = require('math');

然后，就可以调用模块提供的方法：

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

CommonJS定义的模块分为:模块引用(require)、 模块定义(exports)、模块标识(module)。
其中，

  • require()用来引入外部模块；
  • exports对象用于导出当前模块的方法或变量，唯一的导出口；
  • module对象就代表模块本身。

虽说NodeJS遵循CommonJS的规范，但是相比也是做了一些取舍，添了一些新东西的。

NPM作为Node包管理器，同样遵循CommonJS规范。

下面讲讲commonJS的原理以及简易实现：

1、原理
浏览器不兼容CommonJS的根本原因，在于缺少四个Node.js环境变量。

module
exports
require
global

只要能够提供这四个变量，浏览器就能加载 CommonJS 模块。

下面是一个简单的示例。

var module = {
  exports: {}};(function(module, exports) {
  exports.multiply = function (n) { return n * 1000 };
  }(module, module.exports))var f = module.exports.multiply;
  f(5) // 5000

上面代码向一个立即执行函数提供 module 和 exports 两个外部变量，模块就放在这个立即执行函数里面。模块的输出值放在 module.exports 之中，这样就实现了模块的加载。

2、Browserify 的实现
Browserify 是目前最常用的 CommonJS 格式转换工具。

请看一个例子，main.js 模块加载 foo.js 模块。

// foo.jsmodule.exports = function(x) {
  console.log(x);};// main.jsvar foo = require("./foo");foo("Hi");

使用下面的命令，就能将main.js转为浏览器可用的格式。

$ browserify main.js > compiled.js

其中，Browserify到底做了什么？安装一下browser-unpack，就清楚了。

$ npm install browser-unpack -g

然后，将前面生成的compile.js解包。

$ browser-unpack < compiled.js
[
  {
    "id":1,
    "source":"module.exports = function(x) {\n  console.log(x);\n};",
    "deps":{}
  },
  {
    "id":2,
    "source":"var foo = require(\"./foo\");\nfoo(\"Hi\");",
    "deps":{"./foo":1},
    "entry":true
  }]

可以看到，browerify 将所有模块放入一个数组，id 属性是模块的编号，source 属性是模块的源码，deps 属性是模块的依赖。

因为 main.js 里面加载了 foo.js，所以 deps 属性就指定 ./foo 对应1号模块。执行的时候，浏览器遇到 require(&#39;./foo&#39;) 语句，就自动执行1号模块的 source 属性，并将执行后的 module.exports 属性值输出。

五、ES6

有关es6模块特性，强烈推荐阮一峰老师的：ECMAScript 6 入门 - Module 的语法专栏。

要说 ES6 模块特性，那么就先说说 ES6 模块跟 CommonJS 模块的不同之处。

  • ES6 模块输出的是值的引用，输出接口动态绑定，而 CommonJS 输出的是值的拷贝；
  • ES6 模块编译时执行，而 CommonJS 模块总是在运行时加载。

CommonJS 模块输出的是值的拷贝(原始值的拷贝)，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

// a.jsvar b = require(&#39;./b&#39;);console.log(b.foo);setTimeout(() => {
  console.log(b.foo);
  console.log(require('./b').foo);}, 1000);// b.jslet foo = 1;setTimeout(() => {
  foo = 2;}, 500);module.exports = {
  foo: foo,};// 执行：node a.js// 执行结果：// 1// 1// 1

上面代码说明，b 模块加载以后，它的内部 foo 变化就影响不到输出的 exports.foo 了。这是因为 foo 是一个原始类型的值，会被缓存。所以如果你想要在 CommonJS 中动态获取模块中的值，那么就需要借助于函数延时执行的特性。

// a.jsvar b = require('./b');console.log(b.foo);setTimeout(() => {
  console.log(b.foo);
  console.log(require('./b').foo);}, 1000);// b.jsmodule.exports.foo = 1;   // 同 exports.foo = 1 setTimeout(() => {
  module.exports.foo = 2;}, 500);// 执行：node a.js// 执行结果：// 1// 2// 2

所以我们可以总结一下：

  • CommonJS 模块重复引入的模块并不会重复执行，再次获取模块直接获得暴露的module.exports 对象。
  • 如果你需要处处获取到模块内的最新值的话，也可以每次更新数据的时候每次都要去更新 module.exports 上的值
  • 如果暴露的 module.exports 的属性是个对象，那就不存在这个问题了。

相关推荐：javascript视频教程

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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Quelle est la différence entre pile et tas en JavaScriptArticle suivant：Quelle est la différence entre pile et tas en JavaScript

Articles Liés

Voir plus