JavaScript的模块编程与require.js的使用

1.JavaScript的模块编程概念
   网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等。开发者不得不使用软件工程的方法，管理网页的业务逻辑。JavaScript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。
          但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更没有"模块"（module）的概念。（正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用）
Javascript社区做了很多努力，在现有的运行环境中，实现"模块"的效果。
 
2.JavaScript模块编程规范
目前，通行的Javascript模块管理规范共有两种：CommonJS和AMD。
（1）CommonJS规范
在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载：
var math = require('math');
然后，就可以调用模块提供的方法：
var math = require('math');
math.add(2,3); // 5
但是，在CommonJS规范中，有一个问题，就是require加载模块时，是同步的。而js模块是放在服务端，所以在加载服务端的js模块时，会造成浏览器端假死的问题。我们知道Node.js的模块管理是参照CommonJS规范来实现，这个问题在Node.js中没有那么严重，因为在服务端执行require去加载服务器端本地的脚本的IO消耗还是可以接收的。
（2）AMD规范
AMD是"Asynchronous ModuleDefinition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
require(['math'],function (math) {
math.add(2, 3);
});
math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。
目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。
 
3.require.js的用法
（1）编写模块
require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。举例如下：
// math.js
define(function(){
var add = function (x,y){
　　 return x+y;
　　};

　　return {
　　 add: add
　　};
});
如果模块还依赖其他的模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。举例如下：
//lib-test.js
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}

return {
　 foo : foo
};
});
当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。
（2）编写主模块
//main.js
require.config({
paths: {
　　 "jquery": "lib/jquery.min",
　　　 "underscore": "lib/math",
　　　 "backbone": "lib/lib-test"
　　}
}); //require.config()配置js模块的地址

require(['jquery','math', 'lib-test'], function ($, math, lib-test){
// some code here
});
（3）在文档中使用require.js异步加载这些模块
<script src="js/require.js" data-main="js/main"></script>
备注：data-main属性用来指明主模块是js/main.js，这个属性是必需的。
 
参考资料来源于：
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
http://www.ruanyifeng.com/blog/2012/11/require_js.html