JS模块化工具requirejs
原文链接
上一篇文章记录的是AMD和CMD模块化标准。requireJS就基于AMD。下面看看requireJS的基本知识。
RequireJs出现的原因
随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。比如：
.......这样做有很大的问题。经常会造成我们说的白页。首先由于浏览器再加载脚本时，默认是阻塞的。即在加载这些js脚本时，会停止网页的渲染。当加载的文件越来越多时，网页失去响应的时间就会越来越长。其次，由于JS之间存在依赖关系（比如使用b.js必须要等需要等待a.js加载完)，此时必须严格保证这些脚本的书写（加载）顺序。依赖最大的模块一定要放在后面。这就造成代码的编写和维护非常困难。比如：
index.html
"en">
"UTF-8">
Document
"">test
a.js
(function(){
function fun1(){
alert("it works");
}
fun1();
})()此时在alert(it works)之前浏览器是没有任何东西的如下：
此时如果我们利用requireJS异步加载。就不会出现这个问题。alert的同时，dom结构也会被渲染出来。
RequireJs作用
基于上面的种种原因，RequireJS就出现了。
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。
下面是几种作用：
实现js文件的异步加载，避免网页失去响应
管理模块之间的依赖性，便于代码的编写和维护
声明不同js文件之间的依赖
可以按需、并行、延时载入js库
可以让我们的代码以模块化的方式组织
开始使用requireJS
在html中引入requirejs
如果直接在网页中这样写：
同样也会可能造成浏览器失去响应，因为加载这个文件。可以：
使用defer或者async
async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
将其放在body最下面。最后加载。
最后写成：
通常使用requirejs的话，我们只需要导入requirejs即可，不需要显式导入其它的js库，因为这个工作会交给requirejs来做。
属性 data-main 是告诉requirejs：你下载完以后，马上去载入真正的入口文件。它一般用来对requirejs进行配置，并且载入真正的程序模块，这里我们是在js文件夹下又创建了config.js。
基本API
require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短
define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块，并执行加载完后的回调函数
主模块的写法
先来回忆下AMD的写法：
// config.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是[‘moduleA’, ‘moduleB’, ‘moduleC’]，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。–ranyifeng
假定主模块依赖jquery、underscore和backbone这三个模块，config.js就可以这样写：
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});require.js假定这三个模块与config.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。
require.js会先加载jQuery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中。
模块的加载
一般config.js(入口的文件)的作用主要有两个：
1. 配置requirejs 比如项目中用到哪些模块，文件路径是什么
2. 载入程序主模块
使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（config.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。
require.config({
paths:{
"jquery":"jquery.min",
"underscore":"underscore.min"
"backbone":"backbone.min"
}
})下面这样写path是由于这些js文件都和config.js是同级目录,如果不是同级目录，比如下面这些文件都在lib/下，那么对应下面的paths中要指明/lib/jquery.min或者使用baseUrl: "js/lib"。
之前的例子中加载模块都是本地js，但是大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN，这样就不能通过这种方式来加载了，我们以加载一个jquery库为例：
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})通过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。
AMD模块的写法
上面介绍了主模块的写法，以及主模块是如何加载模块的，下面来看些是如何编写这些AMD模块的。
比如我们刚刚写的a.js是这样写的。通过define函数定义了一个模块，然后再页面中使用：
define(function(){
function fun1(){
alert("it works");
}
fun1();
})再例如一个math.js
define(function(){
var add = function(x,y){
return x+y;
}
var sub = function(x,y){
return x-y;
}
return {
add:add,
sub:sub
}
})config.js主模块中加载方法如下：
require(["math"],function(math){
return math.add(2,3);
})
require(["a"],function(){
alert("load finished");
})如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。
define(['mylib'],function(){
function foo(){
return mylib.getInfo();
}
return {
foo:foo
}
})当require()函数加载上面这个模块的时候，就会先加载mylib.js文件。
加载非规范的模块
理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？
比如定义一个hello.js的模块：
function hello(){
alert("hello");
}它就按最普通的方式定义了一个函数，我们能在requirejs里使用它吗？它并不是一个AMD规范的模块，因为并没有通过define定义。假如我们还是先前的方法把它当作一个普通的模块。在config.js利用path定义路径。
require.config({
paths:{
"hello":"hello",
}
})
require(["hello"],function(){
alert("test hello");
})
此时会报错：
Uncaught TypeError: undefined is not a function
原因是最后调用 hello() 的时候，这个 hello 是个 undefined . 这说明，虽然我们依赖了一个js库（它会被载入），但requirejs无法从中拿到代表它的对象注入进来供我们使用。
在这种情况下，我们要使用 shim ，将某个依赖中的某个全局变量暴露给requirejs，当作这个模块本身的引用。
这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。
再举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；
其中deps数组，表明该模块的依赖性。比如，jQuery的插件(这里是滚动插件)可以这样定义：
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}require.js插件
require.js还提供一系列插件，实现一些特定的功能。
domready插件，可以让回调函数在页面DOM结构加载完成后再运行。
require(['domready!'], function (doc){
// called once the DOM is ready
});再比如jquery.form插件（插件形式的非AMD模块，我们经常会用到jquery插件，而且这些插件基本都不符合AMD规范，比如jquery.form插件，这时候就需要将form插件”垫”到jquery中）
require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : ["jquery"]
}
})
require(["jquery", "jquery.form"], function($){
$(function(){
$("#form").ajaxSubmit({...});
})
})总结
大致知道了requireJS是什么东西，以及基本的如何使用。希望以后能够多多用于项目。要不估计过不久又忘记了。
感谢和推荐阮一峰的文章和此文档