前端模块化的发展

模块化是指将一个复杂的系统分解为很多个模块以方便编码

命名空间

1. 很久以前开发网站要通过命名空间的方式来进行编码
2. 命名空间可能会冲突，比如zepto也是放在window.$下
3. 无法合理的管理项目的依赖和版本
4. 无法控制依赖的加载顺序
5. 不适用于大项目

commonJS

1. 是一种JavaScript模块化规范
2. 通过require方法
3. 同步加载依赖的其它模块
4. module.exports导出其需要的暴露接口
5. 代码可复用与nodeJS环境下运行
6. 大多数通过npm发布的第三方包都是采用commonJS规范
7. 但是采用该规范的代码无法直接运行在浏览器端运行，必须通过工具转换为es5
8. commonJS可以分为commonJS1和commonJS2，区别在于前者导出模块是通过exports.xx = xx，后者是module.exports = xx

AMD

1. 一种JavaScript规范
2. 异步方式加载依赖的模块
3. 主要用于解决针对浏览器环境的模块化问题
4. 可在不转换代码的情况下直接在浏览器环境运行
5. 可以并行加载多个依赖模块
6. 代码可以直接在nodeJS环境下运行
7. 缺点在于JavaScript的运行环境并没有原生支持AMD，需要先导入AMD的库后才能正常使用

ES6模块化

1. 浏览器厂商和nodeJS都宣布原生支持该规范
2. 缺点在于目前无法直接运行在大部分JavaScript环境下，必须通过工具转换为标准的ES5后才能运行

样式文件模块化

1. 如scss

// util.scss
@mixin center { // 样式片段
	// 样式
}
// main.scss
@import 'util';
#box {
	@include center;
}