JavaScript模块化编程（2）：AMD规范

声明：本文摘抄自 阮一峰 的博客，这位大神给我了很大的帮助，本文是为了加深自己对JavaScript理解而写的。

前言

　　上一章节说了，模块的基本写法，本章主要介绍如何规范的使用模块，能让你以后写的代码，能直接拿给别人用，想想就觉得很有成就感，不是吗？

　　先想一想，为什么模块很重要？

　　相比大家都玩过积木吧，使用积木可以堆出很多东西，楼，车，等等，但是百变不离其中，没个模型都是由很多积木堆积而成，而每个积木如果用法不同，那么就可以做不同的东西。可以把我们工作中项目，当做我们要做的东西，每一个项目多多少少都会有那么重复的东西，那么我们做过一次，是不是就可以把它模块化，以后直接拿出来就可以用了呢?

　　同样，我们也可以方便的使用其它人写的模块，想要什么功能就加载什么。

　　但是，这样做的前提，那就是大家要按照同样的方式来编写模块，否则你有你的写法，我有我的写法，那么就不能引用了！JavScript模块现在还没有官方的规范，这一点就更加重要了。

　　目前，通行的Javascript 模块有两种：CommonJs 和 AMD。下面主要介绍AMD，但是还是先让我们了解下 CommonJS.

一，CommonJS

　　2009年，美国程序员 Ryan Dahl 创造了 Node.js项目，将Javascript语言用于服务器编程。

　　这标志着“Javascript 模块化编程”正式诞生，为什么会这么说？Node.js编程采用的方式就是模块法。在浏览器中，没有模块也不是很大的问题，毕竟网页程序的复杂性有限；但是在服务端，一定要有模块，于操作系统和其它应用程序互动，否则根本无法编程。　

　　node.js的 模块系统 ，就是采用CommonJS规范实现的，在CommonJS中，有一个全局性方法 require()，用于加载模块，假定有一个数学模块 math.js，就可以像下面一样加载。

var math = require('math'); // 函数里面是 模块的文件名，可以省略 .js
var circle = require('./circle.js'); //可以包含路径

View Code

 

　　然后，可以调用模块里面提供的方法：

　　

var math = require("math");
math.add(2,3); // 5

 

　　因为本文主要介绍的是针对浏览器编程，不涉及到 node.js ，所以对CommonJS 就不多介绍了，在此，我们只要知道 requrie()用于加载模块就可以了。

二，浏览器环境

　　有了服务器模块以后，很自然的，大家都想要客户端模块，而且最好两者都能兼容，一个模块不用修改，在服务器和浏览器都可以运行。

　　但是，有一个很重大的局限，使得CommonJS规范不适宜浏览器环境，如果在浏览器运行会出很大的问题，你能看出来吗？

 

var math = require("math");
math.add(2,3); // 5

　　第二行math.add(2,5)，在第一行require('math')之后运行，因此必须等待math.js加载完成，也就是说，如果加载时间很长，整个应用程序就会停到哪里，就是所谓的假死状态。

　　这对服务器而言，可能不是问题，因为所有的模块资源都在服务器端，可以同步加载资源。但是，对于浏览器而言，这是一个大问题，因为模块都放在服务器的，等待时间取决于网速的快慢，可能要等待很长时间。不过，对于开发 hybrid APP 的同学，可能不会出现这样情况，因为模块资源是存放到客户端的。

　　因此，浏览器端的模块，不能采用 “同步加载”（synchronous），只能采用 “异步加载” （asynchronous），这就是AMD的规范诞生背景。

三，AMD

　　AMD 是 "asynchronous Module Definition"的缩写，意思是“异步模块定义”。它采用异步方式加载模块，模块加载不影响它后面语句的运行，所有依赖这个模块的语句，都定义在 一个回调函数中，等待加载完成之后，这个回调函数才会运行。

　　AMD也采用 require() 语句加载模块，但是不同于CommonJS,它要求两个参数。

 

require([module],callback);

　　第一个参数[module]，是一个数组，里面成员就是要加载的模块；第二个参数 callback，则是模块加载完成之后要执行的方法。若将前面的代码修改成 AMD写法，就是下面这样：

　　

require(['math'],function(){
   math.add(2,3); //5 
});

　　math.add() 和 math 模块加载不是同步的，浏览器不会假死，所有，AMD比较适合浏览器环境。

　　目前，主要有两个 Javascript库实现了 AMD规范： require.js 和 curl.js 。下一章，将通过介绍require.js来进一步讲解 AMD的用法，以及如何将模块话编程投入实战。

 

转载于:https://www.cnblogs.com/zhiyuan-2011/articles/3905783.html