Spesifikasi pengaturcaraan modular JavaScript CommonJS, AMD, CMD, ES6

Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript terutamanya memperkenalkan spesifikasi pengaturcaraan modular, isu berkaitan CommonJS, AMD, CMD dan ES6. Saya harap ia akan membantu semua orang.

Cadangan berkaitan: Tutorial pembelajaran javascript

1. Prakata

AMD、CMD、CommonJsYa, ES5 ialah penyelesaian pengaturcaraan modular baharu dalam import/export. ES6

Jadi, apakah sebenarnya

? Apakah perbezaan antara mereka? Spesifikasi pengaturcaraan modular yang manakah harus digunakan untuk pembangunan projek, dan bagaimana untuk menggunakannya? Catatan blog ini akan menjawab soalan di atas satu persatu. AMD、CMD、CommonJs

2. Definisi modul AMD-Asynchronous

ialah singkatan daripada "AMD", iaitu, "Asynchronous Module DefinitionTakrifan modul tak segerak ". Ia memuatkan modul secara tidak segerak, dan pemuatan modul tidak menjejaskan pelaksanaan kenyataan berikutnya.

Asynchronous di sini merujuk kepada tidak menyekat tugas lain penyemak imbas (

membina, domrendering, dsb.), manakala pemuatan adalah secara dalaman segerak (panggilan balik dilaksanakan serta-merta selepas memuatkan modul). css

: Ia adalah rangka kerja RequireJS yang boleh memuatkan AMD fail secara tidak segerak Menurut kaedah pemuatan modul, ia ditakrifkan melalui fungsi define(). tatasusunan, yang ditakrifkan Bagi sesetengah pakej yang memerlukan kebergantungan, parameter kedua ialah fungsi panggil balik, yang merujuk kepada kaedah dalam modul melalui pembolehubah, dan akhirnya dikeluarkan melalui pemulangan. JS

ialah keluaran standard definisi modul dalam proses promosi AMD Ia adalah konsep, dan RequireJS ialah pelaksanaan konsep ini, sama seperti RequireJS bahasa ialah Pelaksanaan spesifikasi JavaScript. ECMAScript ialah sebuah organisasi dan AMD ialah satu set bahasa skrip yang disesuaikan di bawah organisasi ini. RequireJS

berbeza daripada

, ia memerlukan dua parameter: CommonJS

require([module], callback);

Parameter pertama

ialah tatasusunan, dan ahli di dalamnya ialah modul yang akan dimuatkan, [module] ialah fungsi panggil balik selepas pemuatan selesai. Jika kod di atas ditukar kepada kaedah callback: AMD

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

Antaranya, parameter dalam fungsi panggil balik sepadan dengan ahli (modul) dalam tatasusunan.

memuatkan modul menggunakan spesifikasi requireJS. Dalam erti kata lain, modul mesti ditulis mengikut cara yang ditentukan oleh AMD. AMD

Secara khusus, penulisan modul mesti ditakrifkan menggunakan fungsi

tertentu. Jika modul tidak bergantung pada modul lain, ia boleh ditulis terus dalam fungsi define(). define()

define(id, dependencies, factory);

• : Nama modul jika parameter ini tidak diberikan, nama modul hendaklah lalai kepada nama skrip yang ditentukan yang diminta oleh pemuat modul >id
: Kebergantungan modul, susunan literal pengecam modul yang telah ditakrifkan oleh modul. Parameter kebergantungan adalah pilihan, jika parameter ini ditinggalkan, parameter ini harus lalai kepada
• . Walau bagaimanapun, jika atribut panjang kaedah kilang adalah kurang daripada 3, pemuat akan memilih untuk memanggil kaedah kilang dengan bilangan argumen yang ditentukan oleh atribut panjang fungsi. dependencies["require", "exports", "module"]
: Fungsi kilang modul, fungsi atau objek yang akan dilaksanakan semasa pemulaan modul. Jika ia adalah fungsi, ia harus dilaksanakan sekali sahaja. Jika ia adalah objek, objek ini harus menjadi nilai output modul.
• factory

Andaikan terdapat fail

dan modul

ditakrifkan. Kemudian, math.js ditulis seperti berikut: mathmath.js

dimuatkan seperti berikut:

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

  return  {
    add: add  }})

Jika modul

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

juga bergantung pada modul lain, ia ditulis seperti berikut :

math

Apabila fungsi

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

memuatkan modul

, modul require() akan dimuatkan dahulu. Apabila terdapat berbilang kebergantungan, semua kebergantungan ditulis dalam tatasusunan parameter pertama fungsi math, jadi dependenceModule adalah pra-bergantung. Ini berbeza daripada spesifikasi define(), yang bergantung pada kedekatan. AMD CMDCMD
3. Takrif modul penyegerakan CMD

ialah

takrif modul umum, iaitu output piawai CMD takrif modul dalam proses promosi . Ia adalah definisi modul penyegerakan dan piawai Common Module Definition ialah pelaksanaan konsep SeaJS ialah rangka kerja SeaJS yang disediakan oleh pasukan Taobao Yubo. SeaJS Spesifikasi dibangunkan di dalam negara, sama seperti CMD mempunyai SeaJS, js mempunyai pelaksanaan penyemak imbas CMD dan masalah yang perlu diselesaikan oleh AMD adalah sama seperti requireJS, kecuali dalam Terdapat perbezaan dalam cara modul ditakrifkan dan apabila ia dimuatkan (secara untuk bercakap, dijalankan dan dihuraikan). CMD

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('./foo') 语句，就自动执行1号模块的 source 属性，并将执行后的 module.exports 属性值输出。

五、ES6

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

Atas ialah kandungan terperinci Spesifikasi pengaturcaraan modular JavaScript CommonJS, AMD, CMD, ES6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!