RequireJS学习指南

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.js
• foo1.2.js
• some/
  
  • newmodule.js
  • oldmodule.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);　　　　}　　);