为什么80%的码农都做不了架构师？>>> 
一：不使用RequireJS存在的问题
问题一：JS阻塞浏览器渲染
看下一般的编写方式
index.html
<!DOCTYPE html>
<html><head><script type="text/javascript" src="a.js"></script></head><body><span>body</span></body>
</html>
a.js
function fun1(){alert("it works");
}fun1();
或者a.js也可以这么写
(function(){function fun1(){alert("it works");}fun1();
})()
第二种方法使用了块作用域来申明function防止污染全局变量，本质还是一样的，当运行上面两种例子时不知道你是否注意到，alert执行的时候，html内容是一片空白的，即<span>body</span>并未被显示，当点击确定后，才出现，这就是JS阻塞浏览器渲染导致的结果。
问题二：加载多个JS文件时让html变得丑陋
当有多个js文件需要加载时，将会出现如下丑陋的场景
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>
二：使用RequireJS
若要使用requirejs需要到官网下载。requrejs.org
index.html
<!DOCTYPE html>
<html><head><script type="text/javascript" src="require.js"></script><script type="text/javascript">require(["a"]);</script></head><body><span>body</span></body>
</html>
a.js
define(function(){function fun1(){alert("it works");}fun1();
})
浏览器提示了"it works"，说明运行正确，但是有一点不一样，这次浏览器并不是一片空白，body已经出现在页面中。
三：RequireJS三变量
使用require只需要了解三个变量和一个配置指令即可
define
define用于定义一个模块
前一篇中的a.js
define(function(){function fun1(){alert("it works");}fun1();
})
通过define函数定义了一个模块，然后在页面中使用：
require(["js/a"]);
来加载该模块。
注意：这里define的模块是比较简单的模块，没有依赖其他模块，也没有返回变量，模块加载时只是执行一个函数而矣。
require
require用于加载依赖的模块，加载完成后执行回调函数 语法
require(["依赖的模块1", "依赖的模块2", "依赖的模块3"], function(模块1的返回变量，模块2的返回变量，模块3的返回变量){//回调函数执行体//这里可以使用依赖模块返回的变量了
}
)
requirejs
requirejs === require 一般使用简单化写法require.
四：RequireJS配置
require.config是用来配置模块加载位置，简单点说就是给模块起一个更短更好记的名字，比如将百度的jquery库地址标记为jquery，这样在require时只需要写["jquery"]就可以加载该js，本地的js我们也可以这样配置：
require.config({paths : {"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],"a" : "js/a" }
})
require(["jquery","a"],function($){$(function(){alert("load finished"); })
})
baseUrl
配置js脚本的根目径
require.config({baseUrl : "js"
})
上面的例子中重复出现了require.config配置，如果每个页面中都加入配置，必然显得十分不雅，requirejs提供了一种叫"主数据"的功能，我们首先创建一个main.js：
require.config({paths : {"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],"a" : "js/a" }
})
然后再页面中使用下面的方式来使用requirejs：
<script data-main="js/main" src="js/require.js"></script>
解释一下，加载requirejs脚本的script标签加入了data-main属性，这个属性指定的js将在加载完reuqire.js后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名
data-main还有一个重要的功能，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径，是什么意思呢？如上面的data-main="js/main"设定后，我们在使用require(['jquery'])后(不配置jquery的paths)，require会自动加载js/jquery.js这个文件，而不是jquery.js
paths
通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
require.config({paths : {"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],"a" : "js/a" }
})
require(["jquery","a"],function($){$(function(){alert("load finished"); })
})
这样配置后，当百度的jquery没有加载成功后，会加载本地js目录下的jquery
shim
通过require加载的模块一般都需要符合AMD规范即使用define来申明模块，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim，shim解释起来也比较难理解，shim直接翻译为"垫"，其实也是有这层意思的，目前我主要用在两个地方
- 非AMD模块输出，将非标准的AMD模块"垫"成可用的模块，例如：在老版本的jquery中，是没有继承AMD规范的，所以不能直接require["jquery"],这时候就需要shim，比如我要是用underscore类库，但是他并没有实现AMD规范，那我们可以这样配置
require.config({shim: {"underscore" : {exports : "_";}}
})
这样配置后，我们就可以在其他模块中引用underscore模块：
require(["underscore"], function(_){_.each([1,2,3], alert);
})
插件形式的非AMD模块，我们经常会用到jquery插件，而且这些插件基本都不符合AMD规范，比如jquery.form插件，这时候就需要将form插件"垫"到jquery中：
require.config({shim: {"underscore" : {exports : "_";},"jquery.form" : {deps : ["jquery"]}}
})
也可以简写为：
require.config({shim: {"underscore" : {exports : "_";},"jquery.form" : ["jquery"]}
})
这样配置之后我们就可以使用加载插件后的jquery了
require.config(["jquery", "jquery.form"], function($){$(function(){$("#form").ajaxSubmit({...});})
})
附录
稍微复杂一点的模块定义
define(["依赖的模块1","依赖的模块2","依赖的模块3"], function(模块1的返回变量, 模块2的返回变量，模块3的返回变量){var a = 1; //定义本模块的全局变量function func(){ //定义本模块的内部函数}func() //加载本模块时立即执行某函数return {"run": func //返回给require的回调函数，作为入参，回调函数体中可以执行该函数。}
})
加载稍微复杂一点的模块
require(["jquery","underscore","myModule"], function($, _, myModule){myModule.run(); //执行上面模块的函数
})
参考文档
- http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具requirejs教程(一)：初识requirejs
- http://www.runoob.com/w3cnote/requirejs-tutorial-2.html JS模块化工具requirejs教程(二)：基本知识
- http://requirejs.org/ RequireJS官方文档