模块化 CDM AMD

为什么会有模块

我们最初只会有index.js的文件，后来随着业务的发展，这个代码发展到了1000多行，就很难读懂并且很难维护了了，因此我们就想到了分块，就是把相同业务逻辑的代码放在一起，这个就是模块.通常是会把一个文件看作一个模块的，每个模块文件都有其特定的功能，便于复用。通过使用模块，使我们能够在开发环境上更好地开发和维护我们的项目。我在写游戏项目的时候我把app.js写成element,js,enemy.js等，这个就是模块化思想.

我们把1000多行代码按功能分了不同的代码块，就是分别引用在了index.html里，例如如下：

<script src="common.js"></script>
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

这样实现模块化存在两大问题

• 命名冲突(不同的文件里可能会出现相同的变量，不能实现私有化)
• 管理模块依赖艰难(得分析模块之间的依赖，文件数多，就会很麻烦)
  因此模块化规范诞生了，规范化的模块会使我们统一方法定义模块，不需要手动维护依赖。

模块化规范

目前我们有3类模块化规范

• CommonJs
• AMD异步模块定义
• CMD通用模块定义

CommonJS规范

• 文件即模块，一个文件即模块，每个文件拥有自己的作用域
• 使用 module.exports属性（或简写exports）来暴露对外的接口和属性
• 使用 require(moduleName) 来同步加载依赖模块

以下为一个例子:

math.js
/**
*创建计算圆形面积函数
*@param {Number} r 圆形面积
*@return {Number} 圆形面积
**/

functiuon area(r){
   return Math.pi*r*r;
}
// 暴露对外接口
module.exports={
	area:area
}

circle.js
/**
 * 模块circle
 */

var math=require('./math')
var radius=10;
// 计算圆形面积 
math.area(radius);
<