1. CommonJS、AMD、CMD、ES Module的时间顺序
CommonJS > AMD > CMD > ES Module
2. 模块化概念
模块化是指将一个复杂问题，自顶向下逐层把系统划分为若干模块的过程。对于整个系统来说，这些模块可组合，分解和更换的单元。对于编程领域的模块化就是遵守固定的原则，将一个大文件拆分成多个独立且相互依赖的小模块。简单理解模块化就是在一个js文件中能够引入另一个js文件
3. 模块化好处
1.提高了代码的复用性
2.提高了代码的可维护性
3.可以实现按需加载
4.防止变量污染
4.模块规范有哪些？
CommonJS
简介
CommonJS用于：服务器端，node，webpack
特点：同步/运行时加载，磁盘读取速度快
语法
我们要先创建两个文件1.js和2.js
1.js是一个模块
这是整体暴露的方法
attr1 = "这是attr1" attr2 = "这是attr2" // module.exports这是用于整体暴露 module.exports = { attr1, attr2 }
也可以写成单个暴露的方法
attr1 = "这是attr1" attr2 = "这是attr2" // 这是单个暴露的方法,要暴露哪个，我们就写成exports.xxx = xxx的形式 exports.attr1 = attr1 exports.attr2 = attr2
在2.js中导入1.js，使用require的方法
这是整体导出的方法
const model = require('./1.js') // 这是整体导出,这个名字可以自己取 console.log(model); //{ attr1: '这是attr1', attr2: '这是attr2' } console.log(model.attr1); //这是attr1 console.log(model.attr2); //这是attr2
也可以解构某一个导出
// 需要哪个模块就对它进行导出 // const { xx } = require('./1.js')的方法,xx必须和暴露的名字一样 const { attr1 } = require('./1.js') const { attr2 } = require('./1.js') console.log(attr1); //这是attr1 console.log(attr2); //这是attr2
注意: 不可以exports = xxx，这样写会无效，因为更改了exports的地址
而 exports 是 module.exports 的引用指向的是同一个内存，模块最后导出的是module.exports
AMD
简介
AMD用于：不常用，CommonJs的浏览器端实现
特点：
1.异步加载：因为面向浏览器端，为了不影响渲染肯定是异步加载
2.依赖前置：所有的依赖必须写在最初的依赖数组中，速度快，但是会浪费资源，预先加载了所有依赖不管你是否用到
语法
// 1. 导出：通过define来定义模块 // 如果该模块还依赖其他模块，则将模块的路径填入第一个参数的数组中 define(['x'], function(x){ function foo(){ return x.fn() + 1 } return { foo: foo }; }); // 2. 引用 require(['a'], function (a){ a.foo() });
CMD
简介
CMD用于：不常用，根据CommonJs和AMD实现，优化了加载方式
特点：
1.异步加载：异步加载
2.按需加载/依赖就近：按需加载/依赖就近：用到了再引用依赖，方便了开发，缺点是速度和性能较差
语法
// 1. 导出：通过define来定义模块 // 如果该模块还依赖其他模块，在用到的地方引用即可 define(function(){ function foo(){ var x = require('x') return x.fn() + 1 } return { foo: foo }; }); // 2. 引用 var x = require('a'); a.foo();
ES6 Module
简介
ES6 Module用于：目前浏览器端的默认标准
特点：静态编译： 在编译的时候就能确定依赖关系，以及输入和输出的变量
语法
三种导出方法
1: 边声明，边导出
export var m = 1; export function m() {};
2.导出一个接口 export {}，形似导出对象但不是, 本质上是引用集合，最常用的导出方法
let attr1 = "attr1" let attr2 = "attr2" export { attr1, attr2 }
3.默认导出
let attr1 = "attr1" export default attr1
引用 方式
import { x } from 'test.js' // 导出模块中对应的值，必须知道值在模块中导出时的名字 import { x as myx } from 'test.js' // 改名字 import x from 'test.js' // 默认导出的引用方式
注意
1.export default在同一个文件中只可存在一个（一个模块只能有一个默认输出）
2.一个模块中可以同时使用export default 和 export
5.CommonJS和ES6 Module的几个区别？
1: CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
2: CommonJS 模块是运行时加载，ES6模块是编译时输出接口
3: CommonJS 模块的require()是同步加载模块，ES6模块的import命令是异步加载，有一个独立的模块依赖的解析阶段
