Heim > Artikel > Web-Frontend > Modulare JavaScript-Programmierspezifikationen CommonJS, AMD, CMD, ES6
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.
Verwandte Empfehlungen: Javascript-Lerntutorial
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
是”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
即Common Module Definition
通用模块定义,是SeaJS
在推广过程中对模块定义的规范化产出,是一个同步模块定义,是SeaJS
的一个标准,SeaJS
是CMD
概念的一个实现,SeaJS
是淘宝团队玉伯提供的一个模块开发的js
框架。CMD
规范是国内发展出来的,就像AMD
有个requireJS
,CMD
有个浏览器的实现SeaJS
,SeaJS
要解决的问题和requireJS
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 einAMD
-Framework, dasJS
-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');
🎜Angenommen, es gibt jetzt eine
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.
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
规范是通过module.exports
定义的,在前端浏览器里面并不支持module.exports
,通过node.js
后端使用。Nodejs
端使用CommonJS
规范,前端浏览器一般使用AMD
、CMD
、ES6
等定义模块化开发规范。
CommonJS
的终极目标是提供一个类似Python
,Ruby
和Java
的标准库。这样的话,开发者可以使用CommonJS API
编写应用程序,然后这些应用就可以运行在不同的JavaScript
解释器和不同的主机环境中。
在兼容CommonJS
的系统中,你可以使用JavaScript
开发以下程序:
- 服务器端
JavaScript
应用程序;- 命令行工具;
- 图形界面应用程序;
- 混合应用程序(如,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('./foo')
语句,就自动执行1号模块的 source
属性,并将执行后的 module.exports
属性值输出。
有关es6
模块特性,强烈推荐阮一峰老师的:ECMAScript 6 入门 - Module 的语法专栏。
要说 ES6
模块特性,那么就先说说 ES6
模块跟 CommonJS
模块的不同之处。
ES6
模块输出的是值的引用,输出接口动态绑定,而CommonJS
输出的是值的拷贝;ES6
模块编译时执行,而CommonJS
模块总是在运行时加载。
CommonJS
模块输出的是值的拷贝(原始值的拷贝),也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
// a.jsvar b = require('./b');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!