在JS早期，使用script标签引入JS，会造成以下问题：
- 加载的时候阻塞网页渲染，引入JS越多，阻塞时间越长。
- 容易污染全局变量。
- js文件存在依赖关系，加载必须有顺序。项目较大时，依赖会错综复杂。
- 引入的JS文件过多，不美观，且不易于管理。
CommonJS Modules/1.0规范，服务器端规范。
特点：Node.js推广使用。该规范的核心是：允许模块使用require方法来同步加载所依赖的其他模块，然后通过exports或module.exports导出需要暴露的接口。
-
一个模块是一个文件
-
使用module.exports或exports导出模块
// module.js exports.add = (a, b) => a+b module.exports = { add: (a, b) => a + b } -
使用require加载模块
a. require命令第一次加载模块时，执行整个脚本，在内存中生成对象 b. 多次执行require命令再次加载该模块时，不会再执行该脚本，直接从缓存中取值 c. CommonJS加载模块是同步加载模块
-
为什么CommonJS规范不适合作为浏览器的规范
由于CommonJS是同步加模块，在服务端加载模块时都是从本地硬盘中加载，读取速度很快。但是在浏览器端加载模块时，需要请求服务器端，涉及网速、代理的问题，一旦等待时间过长，浏览器会处于“假死”状态。
AMD（Asynchronous Module Definition）异步模块定义，客户端规范。
采用异步方式加载模块，模块加载不影响它后面语句的代执行。
AMD是require.js在推广使用过程中对模块定义规范化的产物。
在使用时，需引入require.js
特点-
使用define()定义模块
define(id? dependencies? factory)
-
使用require加载模块
require([module], callback)
AMD是依赖前置模块
CMD（Common Module Definition）通用模块定义，异步加载模块。
CMD是sea.js在推广过程中对模块定义的规范化产物。
在使用时，需引入sea.js
特点：
-
使用define()定义模块，使用require()加载模块
define(function (require, exports, module) { let a = require('a') let b = require('b') exports.eat = a.eat exports.run = b.run })CMD模块加载是推崇就近依赖的，需要到某个模块时再进行require加载
-
使用seajs.use加载使用模块
seajs.use(id, callback?)
UMD（Universal Module Definition）通用模块定义，为了兼容AMD、CMD和无模块化开发规范
(function (root, factory) {
// 判断是否是AMD/CMD
if (typeof define === 'function') {
define([], factory)
} else if (typeof exports === 'object') {
// Node CommonJS规范
module.exports = factory()
} else {
// 浏览器环境
root.someAttr = factory
}
})(this, function () {
let add = function (a, b) {
return a + b
}
return {
add,
module: 'UMD'
}
})
五、ES6模块
ES6通过imort和export实现模块的输入与输出，import命令用于输入其他模块提供的功能，export命令用于规定模块对外的接口。
特点：
-
使用export导出模块
// test.js export let module = 'ES6 Module' export let hello = function () {} let demo = function () {} // 默认导出 export default demo -
使用import导入模块
// 导入默认模块 import demo from './test.js' // 导入指定模块 import { hello, module } from './test' // 导入指定模块，并重命名 import { hello as hi, module } from './test.js' // 导入全部模块，并重命名 import * as test from './test.js'
