模块化开发

针对前端开发，现在走到哪里我们都能听到模块化开发这个名词，去掉那些繁杂的官方解释，我们可以这样来理解模块化开发。

模块化开发就是以功能为出发点，针对每个功能创建一个模块，需要什么模块就加载什么模块，不仅能协同开发还能进行高效代码复用。模块化有点类似于Java中package包的概念，将逻辑相关的代码写到一个package内部。

AMD规范

但是每个人有每个人的写代码习惯，万一你一套规则，我一套规则，这样写出来的代码可读性就会变的很差，因此针对Javascript模块化开发定义了自己的规范，遵循这些规范化，在模块化开发过程中将会更将顺畅。

目前的前端模块化开发通用规范有AMD和CMD两种方式，今天这篇文章主要讲一下AMD规范。

AMD

异步模块定义(AMD)接口提供了模块定义规则，以及异步的模块加载机制，非常适用于浏览器环境。

AMD规范只定义了一个define函数，为一个全局变量，语法如下：

AMD的define函数

• id

id表示的是定义的模块的名称，问号表示可选参数，如果没有指定id名称，则模块名为加载的文件名称；如果指定了id名，则名称必须是绝对的，而不能是'.'或者'../'类的相对名称。

• dependencies

dependencies表示的是当前定义模块依赖的其他模块，可以为多个，因此参数形式为一个数组，问号表示该参数为可选项。

依赖模块的执行结果会按照依赖数组的位置顺序，以参数的形式依次注入到后面的factory中。

AMD规范之dependencies

• factory
  

当前模块初始化要执行的函数，为必选项，其参数为依赖的模块的执行结果。上述例子中$与angular就是factory的函数参数。

当依赖的模块未指定参数时，factory默认会接收三个参数，分别是require,exports,module。

依赖的模块同样可以在factory内部通过require来加载。

factory内部加载依赖模块

• require动态加载
  

在factory函数内部，可以通过require方法实现模块动态加载。

require动态加载

在上述的例子中，函数内部加载了foo和bar模块，在模块加载完成之前flag值为false，等到模块加载完成之后flag值变为true。

• 无依赖模块

在当前模块不需要依赖其他模块时，可以直接使用对象字面量的方式来返回一个异步模块。

无依赖模块

总结

今天这篇文章主要将的是前端模块化开发中的AMD规范，后续的文章中会写到遵循AMD规范的而诞生的RequireJS的相关知识，敬请期待！