前端模块化的一些总结
一.前端模块化问题
目前前端模块化规范比较多,有主张异步加载的AMD和CMD,还有同步加载的CommonJS,还有es6实现的esm,等等(以后再有新知识再补充),这里做一下总结
二.AMD和CMD实现
AMD和CMD都使用异步加载的方式,代表作如下
| 规范 | 代表作 |
|---|---|
| AMD | requireJS |
| CMD | SeaJS |
我个人比较喜欢seajs,用起来方便好用
AMD和CMD都是运行时引入
三.CommonJS
CommonJS是同步加载的方式,适用于服务端.
因为服务端使用此标准加载的都是本地的文件,非常快,也就无所谓了
CommonJS是require进入一个对象,是非静态的,是在运行时才引入
四.esm
es module,也就是es6的模块化机制
esm是静态模块化实现,当使用import的时候,引入模块不是对象,而是通过export指定输出的代码,import引入输出的代码(只是一个内存引用地址,同时是不能改变的这个地址的,所以对象属性能修改,但是变量不能修改),能够实现静态检查,在编译之时就已经确定模块关系
esm默认使用严格模式
import具有提升效果,提升到模块的顶部,并要写在模块的顶层作用域内,不能写在if-else内或者函数内
这是esm不同于AMD , CMD , CommonJS 的地方.
五.对比和选择
1.AMD和CMD
AMD和CMD都是异步加载实现,但是AMD推荐依赖前置并先加载好(后来好像也变成了和CMD一样的策略了),而CMD推荐依赖就近加载 ; 个人比较喜欢seaJS
2.CommonJS和AMD/CMD
AMD/CMD是异步加载方案,适用于浏览器端
CommonJS是同步加载方案,适用于服务端,比如node
3.CommonJS和esm
| CommonJS | esm |
|---|---|
| 运行时加载 | 编译时输出接口(只读的,类似于const声明的变量) |
| 输出值得拷贝(输出后,模块内再变化就不能被外部感知,除非写函数获取) | 输出值得引用(或者说是输出内存地址的引用),模块内部的变化会被外部感知,如例1 |
/*-----------------------moduleB-------------------------------*/
let counter = 3;
function incCounter() {
counter++;
}
function getCounter() {
return counter;
}
module.exports = {
counter: counter,
incCounter: incCounter,
getCounter:getCounter
};
/*-----------------------moduleA-------------------------------*/
let B = require('./moduleB');
// 获取counter不会变化
console.log(B.counter); // 3
B.incCounter();
console.log(B.counter); // 3
// 写一个函数获取counter变量
console.log(B.getCounter()); // 3
B.incCounter();
console.log(B.getCounter()); // 4