模块化是指将一个复杂的系统分解为很多个模块以方便编码
命名空间
- 很久以前开发网站要通过命名空间的方式来进行编码
- 命名空间可能会冲突,比如zepto也是放在window.$下
- 无法合理的管理项目的依赖和版本
- 无法控制依赖的加载顺序
- 不适用于大项目
commonJS
- 是一种JavaScript模块化规范
- 通过require方法
- 同步加载依赖的其它模块
- module.exports导出其需要的暴露接口
- 代码可复用与nodeJS环境下运行
- 大多数通过npm发布的第三方包都是采用commonJS规范
- 但是采用该规范的代码无法直接运行在浏览器端运行,必须通过工具转换为es5
- commonJS可以分为commonJS1和commonJS2,区别在于前者导出模块是通过exports.xx = xx,后者是module.exports = xx
AMD
- 一种JavaScript规范
- 异步方式加载依赖的模块
- 主要用于解决针对浏览器环境的模块化问题
- 可在不转换代码的情况下直接在浏览器环境运行
- 可以并行加载多个依赖模块
- 代码可以直接在nodeJS环境下运行
- 缺点在于JavaScript的运行环境并没有原生支持AMD,需要先导入AMD的库后才能正常使用
ES6模块化
- 浏览器厂商和nodeJS都宣布原生支持该规范
- 缺点在于目前无法直接运行在大部分JavaScript环境下,必须通过工具转换为标准的ES5后才能运行
样式文件模块化
- 如scss
// util.scss
@mixin center { // 样式片段
// 样式
}
// main.scss
@import 'util';
#box {
@include center;
}