前端模块规范有三种:CommonJs,AMD和CMD。
- CommonJs用在服务器端,AMD和CMD用在浏览器环境
- AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
- CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
- AMD:提前执行(异步加载:依赖先执行)+延迟执行
- CMD:延迟执行(运行到需加载,根据顺序执行)
CommonJS
- 根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。
AMD
- AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
- 它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
RequireJS主要解决两个问题
- 多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
- js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
CMD
module.exports | exports | export | export default的区别
- 首先上是用法上的不同
module.exports和exports的用法是后面加一个等号,再接具体的导出
module.exports=...
exports=...
export ...
export default ...
- exports其实是module.exports的引用
在nodejs中,每一个js文件都被看成是一个模块,所以,nodejs会为每一个js文件生成一个module对象,这个module对象会有一个exports属性,并且这个exports属性是一个空对象,即
module={
exports:{}
}
同时还有一个exports对象,引用的是module的exports属性,
exports=module.exports
- export和exports的区别
这两个看起来很容易混淆,因为实在太像了。但是二者是完全不同的概念。
export是es6引入的语法,用于导出模块中的变量,对象,函数,类。对应的导入关键字是import。
exports是一个对象,不是语法。具体的含义在第二点已经说明。
- export和export default的区别
export和export default都是es6的导出语法。
二者的区别有以下几点:
- export default在一个模块中只能有一个,当然也可以没有。export在一个模块中可以有多个。
- export default的对象、变量、函数、类,可以没有名字。export的必须有名字。
- export default对应的import和export有所区别
// 比如
// test.js
export default const a = 1;
export const a = 1;
对应的import分别是
// import a from 'test'
import {a} from 'test'
export对应的import必须加上{}
// import时取别名的区别
// 二者都可以在import的时候取别名。但格式不同。
// 比如把导入的a取名为b
// export default对应的取别名方式
import b from 'test'
// export对应的取别名方式
import {a as b} from 'test'
export与export default
- export与export default均可用于导出常量、函数、文件、模块等
- 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
- 在一个文件或模块中,export、import可以有多个,export default仅有一个
- 通过export方式导出,在导入时要加{ },export default则不需要