模块化理解 CommonJS AMD CMD ES6模块

Posted 2020-12-06 姜小七的填坑之旅

模块化就是将系统分解成一个一个独立的功能模块，模块是独立的，可复用的，模块之间是解耦的。

 

CommonJS

Commonjs模块是一个可复用的js块，通过exports输出这个特定对象，其他模块通过require()引用此对象；

CommonJS支持无封装的模块（即没有定义的相关语句），把我们从AMD的define()封装中解放出来；

CommonJS只支持对象作为模块；

 1 //package/lib is a dependency we require
 2 var lib = require("package/lib");
 3 
 4 //behaviour for our module
 5 function foo(){
 6    lib.log("hello world!")
 7 }
 8 
 9 //export (expose) foo to other modules
10 exports.foo = foo

 Node应用由模块组成，采用commonjs模块规范，每个文件是一个模块，有自己的作用域。

commonjs规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的

exports属性（module.exports）是对外的接口。require方法用于加载模块

 1 //example.js
 2 var x=5;
 3 var foo = function(v){
 4   return v + x;
 5 };
 6 module.exports.x = x;
 7 module.exports.foo = foo;
 8 
 9 //test.js
10 var example = require(‘./example.js‘);
11 console.log(example.x);//5
12 console.log(example.foo(1))//6

commonJs模块特点：

1.所有代码都运行在模块作用域，不会污染全局作用域

2.模块可多次加载，但只在第一次加载运行，运行结果会存储在缓存，后面加载直接读取缓存，必须清除缓存才能让模块再次运行；

3.模块采用同步运行方式，按照在代码中出现但顺序进行加载

module.exports属性

module.exports属性表示当前模块对外输出但接口，其他文件加载该模块就是读取module.exports变量；

exports变量

为了方便，Node为每个模块提供一个exports变量，指向module.exports；这等同于在每个模块的头部都有一行一下命令：

 1 var exports = module.exports 

 即，在对外输出模块接口时，可以向exports对象添加方法

1 exports.area = function (r) {
2   return Math.PI * r * r;
3 };

注意，不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。

即 exports = function(r){return Math.PI*r*r;}是无效的。

1 exports.hello = function(){
2     return ‘hele‘;
3 }
4 module.exports = ‘Hello world‘;

上面代码中，hello函数是无法输出的，因为下面module.exports被重新赋值了。

 

AMD（Asynchronous Module Defination）

异步模块定义规范，使用异步方式加载模块，通过define方法定义模块，require方法加载模块。

也可以说AMD是专门为浏览器中javascript环境设计的规范。它吸取了CommonJS的一些优点，但又不照搬它的格式；