在一个项目中，Js 代码的量可能是巨大的，
全放在一个文件里显然不利于管理和运行。
那么就要把功能不同的代码划分到不同的文件内。
那么就可能出现这种情况：
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
甚至更多的网络请求，
又如果，代码文件之间，有互相依赖的代码：
// 在 a.js 中
function getFormatDate (date, type) {
// type === 1 返回格式1
// type === 2 返回格式2等等
}
// 在 b.js 中
function aGetFormatDate (date) {
// 要求返回格式1
return getFormatDate (date, 2)
}
// 在 c.js 中
var dt = new Date()
console.log (aGetFormateDate(dt))
在以上代码中，它们之间有联系，
但是，如果只看其中一个文件，我们并不知道这个方法来自哪里，
这同样不利于管理。为了解决这些问题，就出现了—— Js 模块化。
-
AMD - 异步模块定义
这是一种运行在客户端的一种规则。
它的主要特征就是模块异步加载，
模块加载的同时不影响后面的语句，
加载完后再运行定义的回调函数。
其中最为熟知的是 require.js，
它全局定义了 define 函数和 require 函数，来实现功能。
<script src="require.js" data-main="main"></script>
引用 require.js ，然后加载核心文件 main （入口）来开始运行。
// a.js
define (function () {
return {
getFormatDate: function (date, type) {
if (type ===1) {
return "格式1"
}
if (type === 2) {
return "格式2"
}
}
}
})
// b.js
define (['./a.js'], function (a) {
return {
aGetFormatDate: function (date) {
return a.getFormatDate(date, 2)
}
}
})
// c.js
define (['./b'], function (b) {
return {
printDate: function (date) {
console.log (b.aGetFormateDate(date))
}
}
})
// main.js
require(['./c.js'], function (c) {
var date = new Date()
v.printDate(date)
})
以上就模拟了流程，我们可以清楚的看到每个回调函数所依赖的 js 文件。
而这些文件也是在被依赖是，才开始异步加载。
-
CommonJS
一种 node.js 模块化规范，也就是在服务器端的规范。
有以下优点：
前端开发以来的插件和库，都可以从 npm 中获取
构建工具的高度自动化，使得使用 npm 的成本非常低
CommonJS 不需要异步加载，而是同步一次性加载（服务器端优势）
代码演示一下
// a.js
module.exports = {
getFormatDate: function (date, type) {
if (type ===1) {
return "格式1"
}
if (type === 2) {
return "格式2"
}
}
}
// b.js
var reqA = require ('a.js')
module.exprots = {
aGetFormatDate: function (date) {
return a.getFormatDate(date, 2)
}
}
CommonJS定义的模块分为：
- require()用来引入外部模块；
- exports对象用于导出当前模块的方法或变量，唯一的导出口；
- module对象就代表模块本身。
AMD 和 CommonJS 的差异
需要异步加载的，就是用 AMD
CommonJS 需要构建工具支持，如果项目用 npm 的话可以优先考虑。
-
另外还有一种 CMD 模块定义规范
Wait me back
