JS中的四种模块化规范 —— CMD、AMD、CommonJS与ES6

分手后的思念是犯贱 2023-07-06 14:48 1阅读 0赞

## CommonJS规范 ##

> 1.  `CommonJS`是通过`module.exports`定义模块的，但在前端浏览器中并不支持该规范：浏览器中缺少四个`Node`环境变量（`module`，`exports`，`require`，`global`）
> 2.  `webpack`以及`Node`是采用`CommonJS`的规范来写的

### 特点 ###

#### 1. 如果`module.exports`是基本数据类型，和语言本身一样属于复制，在另一个模块中可以对该模块输出的变量重新赋值，并且不会影响其他模块的变量值。 ####

//data.js
    module.exports = 2
    
    //test.js
    let a = require("./data");
    console.log(a);//2
    module.exports = { 
        b:{ 
            name:"zhang"
        }
    }
    
    //app.js
    let http = require("http");
    let url =require("url");
    let express = require("express");
    let app = new express();
    let data = require("./data/data")
    data = 3;
    console.log(data);//3
    let test = require("./data/test")
    let cookieParser = require("cookie-parser");
    app.use(cookieParser());
    app.get("/",(req,res)=>{ 
    
        res.send("express");//结束服务
    })
    app.listen(8100,"localhost",()=>{ 
        console.log("服务启动了")
    })

#### 2. 对于复杂的数据类型，例如`Array`，`Object`属于浅拷贝，即同时指向一个内存空间，因此对一个模块的值的改变可以影响另一个模块。 ####

//data.js
    module.exports = { 
        age:10
    }
    
    //test.js
    let a = require("./data");
    console.log(a.age);//3
    module.exports = { 
        b:{ 
            name:"zhang"
        }
    }
    
    //app.js
    let http = require("http");
    let url =require("url");
    let express = require("express");
    let app = new express();
    let data = require("./data/data")
    data.age = 3;
    console.log(data.age);//3
    let test = require("./data/test")
    let cookieParser = require("cookie-parser");
    app.use(cookieParser());
    app.get("/",(req,res)=>{ 
    
        res.send("express");//结束服务
    })
    app.listen(8100,"localhost",()=>{ 
        console.log("服务启动了")
    })

#### 3. 当使用`require`命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值，也就是说，`CommonJS`模块无论加载多少次，都会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存/该模块输出为对象且改变该模块的输出中的属性值 ####

#### 4. 循环加载：`CommonJS`属于加载时执行，即脚本代码在`require`时候就会全部执行，一旦出现某个模块被循环加载，只输出(此处的输出代表只在另一个模块中导入循环加载模块的已经执行的已输出内容，即exports中的变量)已经执行的部分，未执行的部分不输出 ####

> 下述代码执行过程：
> 
>  *  执行c.js的内容
>  *  `require(./a.js)`：执行a.js的内容
>  *  在第二步执行`a.js`的内容时遇到`require('./b.js)`，故去执行`b.js`的内容。
>  *  在执行`b.js`的内容时，遇到`require('./a.js)`，遇到循环加载，故只在b中导入执行过的`a.js`的输出内容且不执行`a.js`的内容（故在`b.js`中可访问到a.done，但其值为false），继续执行`b.js`的内容（在b的内容执行完毕时从上次a中断的位置继续执行，实际上是相当于在a中导入完b.js的内容后，继续执行）
>  *  输出：`b.js-1false`
>  *  输出：`b.js-2执行完毕`
>  *  `b.js`执行完毕，继续执行`a.js`中剩余的内容
>  *  输出：`a.js-1true`
>  *  输出：`a.js-2执行完毕`
>  *  执行`require(./b.js)`，由于已经执行过不会再执行`b`中的代码，所以直接导入b返回值。
>  *  输出：`c.js-1 执行完毕 true true`

// a.js
    exports.done = false
    let b = require('./b.js')
    console.log('a.js-1', b.done)
    exports.done = true
    console.log('a.js-2', '执行完毕')
    
    // b.js
    exports.done = false
    let a = require('./a.js')
    console.log('b.js-1', a.done)
    exports.done = true
    console.log('b.js-2', '执行完毕')
    
    // c.js
    let a = require('./a.js')
    let b = require('./b.js')
    
    console.log('c.js-1', '执行完毕', a.done, b.done)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]

#### 4. `CommonJS`加载模块是同步的，所以只有加载完成才能执行后面的操作。像`Node.js`主要用于服务器的编程，加载的模块文件一般都已经存在本地磁盘，所以加载起来比较快，不用考虑异步加载的方式，所以`CommonJS`规范比较实用。 ####

## AMD规范 ##

> 如果在浏览器端采用`CommonJS`的模块规范，则会一直等待，直到模块加载完毕。这样就会导致浏览器处于’假死’状态。故浏览器端的模块，不能采用’同步加载’，只能采用’异步加载’

>  *  `Asynchronous Module Definition（AMD）`：异步模块定义
>  *  `AMD`使用时需要引入第三方的库文件：`RequireJS`
>  *  在浏览器端模块化开发
>  *  在`RequireJS`推广过程中对模块定义的规范化产出
>  *  推崇依赖前置：在定义模块的时候就要声明其依赖的模块，并且会立即加载其依赖的模块。
>  *  对于依赖的模块，`AMD`是提前执行，不过`RequireJS`从`2.0`开始，也改成可以延迟执行。
>  *  适合在浏览器环境中异步加载模块，可以并行加载多个模块
>  *  提高了开发成本，并且不能按需加载，而是必须提前加载所有的依赖。
>  *  `AMD`支持`CMD`写法，在写时需要引入`SeaJS`库文件。但更推荐是依赖前置。
>  *  `AMD` 的`API`默认是一个当多个用，`CMD`的`API`严格区分，推崇职责单一。比如`AMD`里，`require`分全局`require`和局部`require`，都叫 `require`。`CMD`里，没有全局`require`，而是根据模块系统的完备性，提供`seajs.use`来实现模块系统的加载启动。CMD里，每个API都简单纯粹。

#### 1. 采用`require()`语句加载模块，但不同于`CommonJS`，它要求两个参数:`require([module],callback)` ####

*  `module`：数组。元素是要加载的模块名称/地址
 *  `callback`：加载成功后的回调函数

#### 2. 采用`define(id,dependencies,factory)`函数来暴露模块 ####

*  `id`（可选）：字符串，模块的标识符，如果没有提供参数，默认为文件名
 *  `dependencies`（可选）：需要引入的依赖模块，使用相对路径，数组格式
 *  `factory`（必须）：工厂方法，回调函数，参数为返回来的模块内容，若依赖多个模块，则有多个参数。该函数返回值为当前模块暴露出去的内容。如果该值为对象，则此对象会作为模块的输入值且无法获取依赖模块的内容。如果是函数，则只被执行一次，之后调用该模块时都会从缓存中取出该函数调用值

#### ① 如果一个模块不依赖其他模块，那么可以直接定义在`define()`函数之中 ####

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

#### ② 如果这个模块还依赖其他模块，那么`define()`函数的第一个参数必须是一个数组，指明该模块的依赖模块的地址/模块名称。 ####

// math.js
    //先加载test.js模块再执行回调函数
    　　define(["./test.js"],function (res){ 
    	console.log(res)
    	　　　　var add = function (x,y){ 
    	　　　　　　return x+y;
    	　　　　};
    	　　　　return { 
    	　　　　　　add: add
    	　　　　};
    	　　});
    
    //test.js
    define( function() { 
        return { 
            a:1
        }
    });

#### ③ 允许输出模块兼容`CommonJS`规范，这时define方法如下： ####

#### 3. `AMD`采用异步加载 ####

## CMD规范 ##

> `CMD(Common Module Definition)`：通用模块定义。它解决的问题和AMD规范是一样的，只不过在模块定义方式和模块加载时机上不同，CMD也需要额外的引入第三方的库文件，`SeaJS`

>  *  `CMD`是`SeaJS`在推广过程中对模块定义的规范化产出
>  *  推崇依赖就近，只有在用到某一模块的时候才会按需加载。
>  *  延迟执行
>  *  `CMD`的`API`严格区分，推崇职责单一

### 1. 采用`define()`方法定义模块：`define(id?,dependencies?,factory)` ###

#### ① `id`：可选，字符串类型，模块标识，如果没有提供参数，默认为文件名。 ####

#### ② `dependencies`：可选，字符串数组，当前模块依赖的模块地址/名称 ####

#### ③ `factory`：回调函数，工厂方法，初始化模块需要执行的函数或对象。如果为函数，它只会在最初导入模块时调用一次，`module.exports`的值/返回值即为模块导出值。如果是对象，则该对象则为模块导出值。 ####

#### ④ 如果③中为函数，则其参数为：`(require,exports,module)`，`CMD`推崇依赖就近，则在回调函数中需要时再引入，此时`require`方法的返回值即为依赖模块导出值。 ####

// cmd1.js
    define(function(require,exports,module){ 
        // ...
        module.exports={ 
            // ..
        }
    })
    
    // cmd2.js
    define(function(require,exports,module){     
        var cmd2 = require('./cmd1') 
        // cmd2.xxx 依赖就近书写
        module.exports={ 
            // ...
        }
    })

### 2. `SeaJS`提供`seajs.use`来加载模块：`seajs.use([dependencies],function(){})` ###

#### ① `dependencies`：字符串数组，依赖的模块地址/名称 ####

#### ② `function`：依赖的模块都加载成功之后的回调函数，依赖的模块的导出值会以参数的形式传入，从而在回调函数中可以获取到依赖模块的导出值。 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <script src="sea.js"></script>
            <script src="cmd2.js"></script>
            <script src="cmd1.js"></script>
            <script type="text/javascript">
                seajs.use(['cmd2.js','cmd1.js'],function(cmd2,cmd1){ 
                    // ....
                })
            </script>
        </body>
    </html>

## ES6模块化规范 ##

>  *  ES6\`模块中的值属于动态只读引用，即不能在引用时改变模块的导出值。
>  *  对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
>  *  对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
>  *  ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量
>  *  `CommonJS`和`AMD`都只能在运行时确定模块之间的依赖关系。在代码1中，其实质是整体加载`fs`模块（即加载`fs`模块的全部方法），生成一个对象导出，即`_fs`。然后再获取其中的`stat,exists,reafFile`方法使用。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。
>  *  `ES6`模块化是编译时加载。由于`ES6`导出的不是对象，而是通过`export`命令显式指定输出的代码，再通过`import`命令输入。在代码2中，其实质是从`fs`模块中加载三个方法，不需要加载其中的所有方法，这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载。效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

//代码1
    // CommonJS模块
    let {  stat, exists, readFile } = require('fs');
    
    // 等同于
    let _fs = require('fs');
    let stat = _fs.stat;
    let exists = _fs.exists;
    let readfile = _fs.readfile;

//代码2
    // ES6模块
    import {  stat, exists, readFile } from 'fs';

## 文章推荐： ##

[AMD、CMD规范][AMD_CMD]  
[CommonJS规范与AMD/CMD规范总结][CommonJS_AMD_CMD]  
[js中的import、require、export][js_import_require_export]  
[CommonJS规范][CommonJS]  
[js的四种模块化规范][js]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200220201503753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[AMD_CMD]: https://www.cnblogs.com/leftJS/p/11073481.html
[CommonJS_AMD_CMD]: https://www.jianshu.com/p/7c7fc199b7aa
[js_import_require_export]: https://www.cnblogs.com/fps2tao/p/10823468.html
[CommonJS]: http://javascript.ruanyifeng.com/nodejs/module.html#toc4
[js]: https://www.jianshu.com/p/6c6cf7030720