模块化的优势
在以前没有模块化时，通常在编写代码时写在一个文件里， 或者通过script标签来划分模块， 但是当项目足够庞大时，项目会变得越来越难以管理， 所以我们需要一种方式帮助我们进行模块化。
- 减少全局变量的污染
- 增强可读性、复用性和可维护性
- 减少代码冗余
模块化的分类
commonJS
概念
- 每一个文件都是单独的模块
- 核心变量 export 、module.export、require;
- export 、module.export导出内容
简单使用
var a = 1;
module.exports.a = a
const aa = require('./a.js');
console.log(aa.a); // 1
特点
- 运行时加载，模块 = 对象，运行时才会把模块挂载在export上
- 同步加载模块（适用于服务端）
- 导出的数据是值的拷贝
ES Module
概念
- 静态化，编译时就能确定依赖关系以及输出的变量
- 核心变量 export import
简单使用
var a = 1
export a
import aa from './a.js'
console.log(aa) // 1
特点
- 静态语法，导入和导出都是静态的
- 提前加载， 在编译时执行模块文件
- import 命令会有提升效果，会提升到代码头部优先执行
- 导出的数据是值得引用
AMD
概念
- requireJS
- 非同步加载模块，允许指定构造函数（浏览器环境下，要从服务端获取模块，就需要采用异步的方式）
- 使用define来定义模块
简单使用
// 定义无依赖的模块
define(function(){
console.log('111')
})
// 定义有依赖的模块
define(['xxx'], function(xxx){
console.log(xxx)
})
// 调用模块
require(['xxxx'],function(xxxx){
console.log(xxxx)
})
特点
- 非同步加载方式（适用于浏览器）
- 前置依赖，提前加载
- 可以并行加载多个模块
CMD
概念
- seaJS
- define来定义模块 require加载模块
- 非同步加载方式
- 按需加载
简单使用
//定义模块
define(function(a, b, c){
// 加载模块
var a = require('xxx');
})
// 使用模块
seajs.use(['xxx'],function(aaa){
console.log(aaa)
})
特点
- 依赖就近，延迟加载
UMD
UMD是一种通用模块定义规范，可以在浏览器环境中使用，也可以在服务器环境中使用
规定如下
- 优先判断是否存在exports方法，如果存在，则采用CommonJS方式记载模块
- 其次判断是否存在define方法， 如果存在，则采用AMD方式加载模块；
