suchen

Heim  >  Artikel  >  Web-Frontend  >  Modulare JavaScript-Programmierspezifikationen CommonJS, AMD, CMD, ES6

Modulare JavaScript-Programmierspezifikationen CommonJS, AMD, CMD, ES6

WBOY
WBOYnach vorne
2022-03-01 18:11:321980Durchsuche

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, das hauptsächlich modulare Programmierspezifikationen, CommonJS, AMD, CMD und ES6-bezogene Themen vorstellt. Ich hoffe, dass es für alle hilfreich ist.

Modulare JavaScript-Programmierspezifikationen CommonJS, AMD, CMD, ES6

Verwandte Empfehlungen: Javascript-Lerntutorial

1. Vorwort

AMD, CMD, CommonJs sind modulare Programmierlösungen, die in ES5 bereitgestellt werden >import/export ist eine neue modulare Programmierlösung in 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

Was genau ist also AMD, CMD, CommonJs? Was sind die Unterschiede zwischen ihnen? Welche modulare Programmierspezifikation sollte für die Projektentwicklung verwendet werden und wie wird sie verwendet? In diesem Blogbeitrag werden die oben genannten Fragen einzeln beantwortet. 🎜🎜2. AMD-Asynchronous Module Definition🎜🎜AMD ist die Abkürzung für „Asynchronous Module Definition“, also „Asynchronous Module Definition ". Es lädt Module asynchron und das Laden des Moduls hat keinen Einfluss auf die Ausführung nachfolgender Anweisungen. 🎜🎜Asynchron bedeutet hier, dass andere Aufgaben des Browsers (dom-Konstruktion, css-Rendering usw.) nicht blockiert werden, während das Laden intern synchron erfolgt (Rückrufe werden unmittelbar nach dem Laden ausgeführt). das Modul) ). 🎜
🎜RequireJS: Es handelt sich um ein AMD-Framework, das JS-Dateien asynchron laden kann, entsprechend der Modullademethode Über die Funktion define () ist der erste Parameter ein Array, das einige abhängige Pakete definiert, der zweite Parameter ist eine Rückruffunktion, die über Variablen auf die Methoden im Modul verweist und schließlich über die Rückgabe ausgegeben wird. 🎜
🎜AMD ist die standardisierte Ausgabe der Moduldefinition während des Hochstufungsprozesses von RequireJS. Es ist ein Konzept, und RequireJS ist es a Die Implementierung dieses Konzepts ist genau so, wie die JavaScript-Sprache die Implementierung der ECMAScript-Spezifikation ist. AMD ist eine Organisation und RequireJS ist eine Reihe von Skriptsprachen, die unter dieser Organisation angepasst werden. 🎜🎜Im Gegensatz zu CommonJS sind zwei Parameter erforderlich: 🎜
define(function(require, exports, module) {
  // 模块代码});
🎜Der erste Parameter [module] ist ein Array, und die darin enthaltenen Mitglieder sind die zu ladenden Module callback ist die Rückruffunktion nach Abschluss des Ladevorgangs. Wenn der obige Code in die Methode AMD geändert wird: 🎜
// 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()
  ...})
🎜 Unter diesen entsprechen die Parameter in der Rückruffunktion den Mitgliedern (Modulen) im Array. 🎜🎜requireJS lädt Module mithilfe der AMD-Spezifikation. Mit anderen Worten, das Modul muss in der von AMD angegebenen Weise geschrieben werden. 🎜🎜Konkret muss das Schreiben von Modulen mithilfe einer bestimmten define()-Funktion definiert werden. Wenn ein Modul nicht von anderen Modulen abhängig ist, kann es direkt in die Funktion define() geschrieben werden. 🎜
var math = require('math');
  • id: Der Name des Moduls. Wenn dieser Parameter nicht angegeben wird, sollte der Modulname standardmäßig der vom Modullader angeforderte angegebene Skriptname sein /li>dependencies: Modulabhängigkeiten, Array-Literale, die durch vom Modul definierte Module identifiziert werden. Der Abhängigkeitsparameter ist optional. Wenn er weggelassen wird, sollte er standardmäßig ["require", "exports", "module"] sein. Wenn das Längenattribut der Factory-Methode jedoch kleiner als 3 ist, ruft der Loader die Factory-Methode mit der durch das Längenattribut der Funktion angegebenen Anzahl von Argumenten auf.
  • factory: Die Factory-Funktion des Moduls, die Funktion oder das Objekt, die während der Modulinitialisierung ausgeführt werden soll. Wenn es sich um eine Funktion handelt, sollte sie nur einmal ausgeführt werden. Wenn es sich um ein Objekt handelt, sollte dieses Objekt der Ausgabewert des Moduls sein.
🎜Angenommen, es gibt jetzt eine math.js-Datei, die ein math-Modul definiert. Dann wird math.js wie folgt geschrieben: 🎜
var math = require('math');math.add(2,3); // 5
🎜Die Lademethode ist wie folgt: 🎜
module
exports
require
global
🎜Wenn das math-Modul auch von anderen Modulen abhängt, wird es geschrieben wie folgt: 🎜
var module = {
  exports: {}};(function(module, exports) {
  exports.multiply = function (n) { return n * 1000 };
  }(module, module.exports))var f = module.exports.multiply;
  f(5) // 5000
🎜Wenn require() das Modul math lädt, wird zuerst das Modul dependenceModule geladen. Wenn mehrere Abhängigkeiten vorhanden sind, werden alle Abhängigkeiten in das erste Parameterarray der Funktion define() geschrieben, sodass AMD vorabhängig ist. Dies unterscheidet sich von der CMD-Spezifikation, die auf Nähe basiert. 🎜 CMD🎜🎜3. CMD – Synchronisationsmoduldefinition🎜🎜CMD ist die allgemeine Moduldefinition SeaJS im Promotion-Prozess Die standardisierte Ausgabe der Moduldefinition ist eine synchronisierte Moduldefinition, die ein Standard von SeaJS ist und eine Implementierung des Konzepts von CMD. <code>SeaJS ist ein js-Framework, das von Modulen des Taobao-Teams Yubo entwickelt wurde. Die CMD-Spezifikation wurde im Inland entwickelt, genau wie AMD über ein requireJS verfügt und CMD über eine Browser-Implementierung verfügt code>SeaJS, SeaJS löst das gleiche Problem wie requireJS, außer in Bezug auf die Moduldefinitionsmethode und den Zeitpunkt des Modulladens (Ausführen, Parsen). Unterschied. 🎜

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视频教程

Das obige ist der detaillierte Inhalt vonModulare JavaScript-Programmierspezifikationen CommonJS, AMD, CMD, ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Was ist der Unterschied zwischen Stack und Heap in JavaScript?Nächster Artikel：Was ist der Unterschied zwischen Stack und Heap in JavaScript?

In Verbindung stehende Artikel

Mehr sehen