一、AMD(异步模块定义)
AMD是适用于浏览器端的,异步加载模块,是依赖前置模块。将需要用到该模块的函数,定义在其回调函数中,完成异步加载。在服务器端,可以承受同步加载,因为所有的文件都存储在硬盘中,但是在浏览器端会产生假死现象。所以,产生了AMD。主要有require.js和curl.js两种方式。其优点为:
- 自动处理依赖,无需考虑模块引入顺序
- 异步加载模块,避免阻塞
- 在同一个文件中可以定义多个模块
定义模块
define('modelName',['a','b','c'],function(a,b,c){ return })
三个参数分别表示模块名称,模块依赖以及定义的回调函数或对象
注:模块名为驼峰格式,依赖模块不允许有文件扩展名
加载模块
require(['a','b','c'],function(x,y,z){}
指定各模块路径和引用名
require.config({ baseUrl:'js/lib', paths:{ "jquery":'jquery.min', } })
二、CMD(通用模块定义)
- 一个文件一个模块,所以经常用文件名作为模块名称
- 依赖就近,懒执行
- 相比于AMD,AMD用户体验好,因为没有延迟,依赖模块提前执行了。 CMD性能好,因为只有用户需要的时候才执行。CMD加载完某个依赖模块后并不执行,只是下载。在所有依赖模块加载完成后进行主逻辑,遇到require语句的时候才执行相应的模块。这样的执行顺序和书写顺序是完全一致的。
定义模块
define(function(require,exports,module)){}
三、CommonJS
服务端的模块管理机制
- 一个单独的文件就是一个模块,每一个模块都是单独的作用域
- 模块只有一个出口,module.exports对象
- 加载模块:加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象 CommonJs使用同步的方式加载模块,在服务端,模型文件都存在本地磁盘,读取非常快。
四、ES6module
- export命令:用于规定模块的对外接口
- import命令:用于输入其他模块提供的功能 此外,ES6还提供了export default命令,为模块指定默认输出,对应的import语句不需要使用大括号。
- CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值的引用
- CommonJS模块是运行时加载,ES6模块是编译时输出接口
- 在import时可以指定加载某个输出值,而不是加载整个模块