深入理解JavaScript模块

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