Js 模块化

在一个项目中，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