requireJs 初探

由于新开发的项目中需要使用到Javascript的模块化编程，自然而然我选择了目前比较流行的一个库require.js，我把require.js基本使用方法写下来方便与大家交流和以后回顾查阅。

---

1.为什么选择require.js

大家在开发一个较为复杂，js代码较多的页面的时候，需要把js代码拆分为多个文件，然后在页面中依次加载，就像这样：

　　<script src="1.js"></script>　　<script src="2.js"></script>　　<script src="3.js"></script>　　<script src="4.js"></script>　　<script src="5.js"></script>

这样写在加载的文件较多的时候有很大的弊端，加载的文件越多，网页失去响应的时间就越长。而且，必须的保证各个文件间的依赖关系，依赖性最大的模块一定要放在最后加载。这样在引入文件较多的时候局部便于项目的升级和维护。
而require.js解决了这些问题，它实现js文件的异步加载，避免网页失去响应把，并且管理模块之间的依赖性，便于代码的编写和维护。

2.加载require.js

<script src="js/require.js" data-main="js/main"></script>

data-main表示主模块，第一个被加载。main.js可以省略后缀，直接写成main,require.js会自动识别。

也可以写成下面这样，保证不会失去响应：

<script src="js/require.js" defer async="true" ></script>

async表示支持异步加载，而defer的作用是保证对于IE的支持（IE并不持支async属性）。

3.模块的写法

　require(['module1', 'module2', 'module3'], function (module1, module2, module3){　　　　// do something...　　});

require()方法有两个参数，一个是需要加载的模块，一个事回调方法。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块（上面的代码假定三个模块文件都与main.js处于相同目录下）。

4.模块的加载

使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。

　require.config({　　　　baseUrl: "js/lib",　　　　paths: {　　　　　　"jquery": "jquery.min",　　　　　　"underscore": "underscore.min",　　　　　　"backbone": "backbone.min"　　　　}　　});

baseurl指定当前三个模块所在的包路径。

　require.config({　　　　paths: {　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"　　　　　　"underscore": "lib/underscore.min",　　　　　　"backbone": "lib/backbone.min"　　　　}　　});

也可以不写baseurl，直接指定模块路径。

5.自定义模块

自定义模块必须按照AMD的规范来写，模块必须采用特定的define()函数来定义。
新建一个count.js文件：

// count.js　　define(function (){　　　　var add = function (x,y){　　　　　　return x+y;　　　　};　　　　return {　　　　　　add: add　　　　};　　});

在其他模块中可以如下加载:

// count.js　　require(['count'],function(count){        count.add(1,1);   })

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['count'],function(){    function fu(){        count.add(1,1);    }    return{        fu : fu;    } })

count模块会优先于本模块加载。

6.非规范的模块加载

require.config({　　　　shim: {　　　　　　'underscore':{　　　　　　　　exports: '_'　　　　　　},　　　　　　'backbone': {　　　　　　　　deps: ['underscore', 'jquery'],　　　　　　　　exports: 'Backbone'　　　　　　}　　　　}　　});

deps表示本模块所依赖的模块，exports表示暴露出来的模块名，在其他模块中调用时的名称。

以下示例一个完整的require.config配置

require.config({    baseUrl: 'lib',    paths: {        "options": "charts/options",                   "echarts": "charts/echarts.min",            "formatData": "charts/formatData",                "jquery": "bootstrap/js/jquery-2.1.4.min",        "bootstrap": "bootstrap/js/bootstrap.min",        "jquery-ui": "jquery-ui.min",        "lodash": "gridstack/js/lodash.min",        "gridstack": "gridstack/dist/gridstack"    },    shim : {        "bootstrap" : { "deps" :['jquery'] },        "gridstack" : { "deps" :['bootstrap', 'jquery-ui', 'lodash'] }    }});

本实例shim中并未为模块指定exports属性，则调用时直接使用原先的模块名称。

7.插件

domready插件：

require(['domready!'], function (doc){　　　　// called once the DOM is ready　　});

text和image插件，则是允许require.js加载文本和图片文件

define([　　　　'text!review.txt',　　　　'image!cat.jpg'　　　　],　　　　function(review,cat){　　　　　　console.log(review);　　　　　　document.body.appendChild(cat);　　　　}　　);

类似的还有json和markdown插件。