RequireJS中文网

http://www.requirejs.cn/

---

AMD

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

RequireJS优点

模块化加载 防止JS加载阻塞页面渲染

基本API

RequireJS会定义三个变量。define,require,requirejs，其中require === requirejs。

define用来定义模块require用来加载依赖模块，并执行加载后的回调函数 define(function(){ function fun1(){ alert(1); } fun1(); });

require依赖是一个数组，即使只有一个依赖也必须使用数组来定义。require第二个参数是一个callback,一个function,用来处理加载完毕后的逻辑。

require(["js/a"],function(a){ var A = a ; alert("load finish"); });

加载文件

require.config用来配置模块加载位置。可以配置多个路径，如果远程CDN库没有加载成功，可以加载本地库。

require.config({ paths:{ "jquery":["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a":"js/a" } }); require(["jquery","a"],function($,a){ $(function(){ alert("load finish"); }); }); 使用requirejs加载模块时候不用写.js后缀

RequireJS加载

下载requirejs,下载后，假定把它放在js子目录下面，就可以加载了。

　<script src="js/require.js"></script>

有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：

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

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

全局配置

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>

data-main指定的js将在加载完require.js后处理，我们把require.config的配置加载data-main后，就可以使用每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短域名。 data-main还有另一个功能。require会默认把data-main指向的js为根路径。如果data-main=”js/main”，那require([“jquery”])后会自动加载js/jquery.js这个文件。相当于默认配置了

require.cofig({ baseUrl:"js" })

map

对于给定的模块前缀，使用一个不同的模块ID来加载该模块。 该手段对于某些大型项目很重要：如有两类模块需要使用不同版本的”foo”，但它们之间仍需要一定的协同。 在那些基于上下文的多版本实现中很难做到这一点。而且，paths配置仅用于为模块ID设置root paths，而不是为了将一个模块ID映射到另一个。

requirejs.config({ map: { 'some/newmodule': { 'foo': 'foo1.2' }, 'some/oldmodule': { 'foo': 'foo1.0' } } });

如果各模块在磁盘上分布如下：

foo1.0.jsfoo1.2.jssome/ newmodule.jsoldmodule.js

当“some/newmodule”调用了“require(‘foo’)”，它将获取到foo1.2.js文件；而当“some/oldmodule”调用“`require(‘foo’)”时它将获取到foo1.0.js。

第三方模块

通过require加载的模块一般都要符合AMD规范，即使用define来申明的模块。但是部分需要加载非AMD规范的js，就需要使用到shim。exports值（输出的变量名），表明这个模块外部调用时的名称；deps数组，表明该模块的依赖性。

require.config({ shim:{ "underscore":{ exports:"_"; }, "jquery.form":{ deps:["jquery"] } } });

这样配置后，我们就可以在其他模块使用underscore模块了：

require(["underscore","jquery.form"],function(){ _.each([1,2,3],alert); }); 或者 require(["underscore"],function(Underscore){ Underscore.each([1,2,3],alert); });

RequireJS插件

domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

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); 　　　　} 　　);