模块化开发: CommonJS / AMD / CMD / ES

作者: oo高学吟 | 来源:发表于2019-11-24 22:08 被阅读0次

JS模块化
归档
ES6模块化
模块化module／CommonJS／Browserify／AM
js模块化
AMD、CMD、CommonJs、ES6的对比
js 模块化总结
js模块化规范
前端模块化：ES6，CommonJS
js模块化学习笔记二：模块化规范

模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露它的接口。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。

<script>标签
- 全局作用域下容易造成变量冲突
- 文件只能按照<script>的书写顺序进行加载
- 开发人员必须主观解决模块和代码库的依赖关系
- 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪
CommonJS
- 定义的模块分为: 模块引用(require) / 模块输出(exports) / 模块标识(module)
- 是更偏向于服务器端的规范。NodeJS采用了这个规范。CommonJS的一个模块就是一个脚本文件。require命令第一次加载该脚本时就会执行整个脚本，然后在内存中生成一个对象。
- CommonJS是同步加载模块，这对于服务器端不是一个问题，因为所有的模块都放在本地硬盘。等待模块时间就是硬盘读取文件时间，很小。但是，对于浏览器而言，它需要从服务器加载模块，涉及到网速，代理等原因，一旦等待时间过长，浏览器处于”假死”状态。所以在浏览器端，不适合于CommonJS规范。
```
{
    id:'...',
    exports: { ... },
    loaded: true,
    ...
}
/* id是模块名，exports是该模块导出的接口，loaded表示模块是否加载完毕。
此外还有很多属性，这里省略了。
以后需要用到这个模块时，就会到exports属性上取值。
即使再次执行require命令，也不会再次执行该模块，而是到缓存中取值。*/

// 例：
math.jsexports.add = function(a, b) {
    return a + b;
}
var math = require('math');
math.add(2, 3);
```

AMD (Asynchronous Module Definition) 异步模块定义

AMD是RequireJs在推广过程中对模块定义的规范化产出
这里异步指的是不堵塞浏览器其他任务（dom构建，css渲染等），而加载内部是同步的（加载完模块后立即执行回调）。

依赖前置

/* AMD也采用require命令加载模块，但是不同于CommonJS，它要求两个参数：*/
require([module], callback);
 /* 第一个参数[module]，是一个数组，里面的成员是要加载的模块，callback是加载完成后的回调函数。
如果将上述的代码改成AMD方式：*/
    require(['math'], function(math) {
        math.add(2, 3);
    })
//其中，回调函数中参数对应数组中的成员（模块）。
//修改为define的写法：
// math.js
define(['dependenceModule'], function(dependenceModule)
  var add = function(x, y) {
    return x + y;
  }
  return  {
    add: add
  }
})
/* 当require()函数加载math模块的时候，就会先加载dependenceModule模块。
当有多个依赖时，就将所有的依赖都写在define()函数第一个参数数组中。
所以说AMD是依赖前置的。这不同于CMD规范，它是依赖就近的。*/

CMD (Common Module Definition)
- Seajs推崇的规范
- 依赖就近，用的时候再require, 推崇 as lazy as possible（尽可能的懒加载，也称为延迟加载，即在需要的时候才加载）。
```
// CMD
define(function(require, exports, module) {
    var a = require('./a');
    a.doSomething();
    var b = require('./b');
    b.doSomething();
})
//AMD
define(['a', 'b'], function(a, b) {
    a.doSomething();
    b.doSomething();
})
```
- CMD和AMD的区别
  - AMD和CMD都是用difine和require的异步加载
  - 但是CMD标准倾向于在使用过程中提出依赖，就是不管代码写到哪突然发现需要依赖另一个模块，那就在当前代码用require引入就可以了，规范会帮你搞定预加载
  - AMD标准让你必须提前在头部依赖参数部分写好（没有写好？倒回去写好咯）。
ES6 模块
- ES6 模块不是对象，无法引用模块本身。而是通过export命令显式指定输出的代码，再通过import命令输入。
- ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高
- 顶层的this指向undefined
- 浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器。<script type="module" src="./foo.js"></script>
import和require的区别
- vue模块引入使用import，node模块引入使用require
- require 是 AMD规范引入方式，import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
- 通过require引入基础数据类型时，属于复制该变量。通过require引入复杂数据类型时，数据浅拷贝该对象