AMD规范
-
定义
AMD(Asynchronous Module Definition)是异步模块定义的缩写,采用异步的方式加载模块,模块加载不影响后面语句的运行,所有依赖这个模块的语句,都定义在回调函数中,加载完成后,回调函数才会运行 - 加载方式
require([module], callback);
第一个参数为要加载的数组,第二个加载完成后的回调
require(['util'], function(util) {
util.method()
})
- 定义模块的方式
define(function() {
return {
mix: function(source, target) {
}
};
});
-
实现
requirejs实现了AMD规范,requirejs主要使用了动态创建script标签实现规范
var requirejs, require, define;
requirejs源码的开头定义了三个全局变量,可以在别的模块中用来引用和定义模块
CommonJS
node.js遵从的模块,是服务端使用的模块系统,使用的是同步加载的方式,
不适用与浏览器端,因为浏览器端没有require,module等变量,且浏览器端加载速度和网络有关,不适合使用同步加载的方式,可以多次加载,但在第一次加载后会缓存,后面加载会从缓存中直接读取,不会再执行一遍该模块,对于循环引用,模块会自动切断循环链
var math = require('math');
module.exports = {
add: function(a, b) { return a + b }
}
es6是静态化模块
es6模块在编译时就能确定关系,不同于Commonjs和AMD模块,只能在运行时确定关系
export default add
import add from 'math'
commonjs模块和es6模块的区别
- 对于commonjs模块
1.对于基本数据类型,属于复制,复制之后,被引用模块中该值改变,或者另一个引用模块引用重新修改值,本模块都不会改变.
2.对于复杂数据类型,属于浅拷贝,不同的模块指向的地址是同一个,一个模块修改了值,另一个模块也会对应修改
3.多次require只会执行一次,第二次require会从缓存中取值
-
对于es6模块
1.对于基本数据类型,是对基本数据类型的引用,当模块内部值改变时,引入的模块值也会改变,但是不能修改引用的对象,相当于const
2.对于复杂数据类型,是地址的引用,不同模块不能修改引用的路径,但是可以修改引用的数据的内部内容,相当于const引入复杂数据类型,引用的地址不能改变,但是地址指向的内容可以改变,并且所有模块同步改变
3.属于静态分析,必须放在文件头部 -
总结
1.对于基本数据类型,commonjs是复制,es6是引用
2.对于复杂数据类型.两者类似,一个是浅复制,一个是对地址的引用,
都可以在一个模块中修改地址指向的内容,影响其他的模块,实际应用,
比如axios,可以引出一个对象,在其中一个模块中设置的配置,其他模块也会有该配置,比如在登陆模块给配置对象增加一个token,其他模块的引用都会带上该token
