RequireJS

文档引用：

官方网站 RequireJs 博客：Snandy 、尐 / 妖

Require 配置Note：

<script defer async=”true/false”> 用于配置 是否使用异步加载

IE不支持async属性，只支持defer，所以把defer也写上。

要演示的requireJS的文档结构:

 

Data-Main

app.html 内容

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

指定页面程序的主模块，由于require.js的默认的文件后缀名是js，所以可以主模块可以省略后缀。

Note：你在data-Main设置的脚本是异步加载的，如果你在页面中配置了其他的JS加载，则不能保证它们所依赖的JS已经加载成功。

Require（）函数

 

main.js 内容

require(["jquery", "./jquery.alpha", "./jquery.beta"], function(_,_,beta) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $(‘body‘).alpha();
        console.log(beta.color);
    });
});

该函数接受两个参数 ，第一个参数为 当前页面依赖的模块 格式[“模块名”,… ] 。第二个参数是一个回调函数，当前指定的模块加载成功以后，它将会被调用，加载的模块会以参数行式传入该函数，从而在回调函数内部就可以使用这些模块。 (模块名可以是具体的文件名,或者在require.config中配置的js文件的别名)

Require（）中模块加载方式：

     1. Require.js 默认需要加载的模块和当前require.js文件在同一个目录中。

     2. 在require.config（） 中使用paths 属性指定各个模块的加载路径。（参考图 1）

          a) 与调用require（） 的js 在同一目录中写法{“path”:{“jquery”:”jquery-1.41”} { “jquery” : 模块名。”Jquery-1.4.1” : 应用的具体js名称。这里不能使用文件的后缀[.js]，不然会加载不上文件，加载不上的原因参考d节 }。

           b) 与调用的require（） 的js 不在同一个目录中 写法 {“path”:{“apple”:” ../app/main”}。上面的main.js 的路径为require.config() 配置的baseUrl 路径的相对路径。

          c) Summary： require.js 以一个相对于require.Config（）中的 baseUrl的地址来加载所有的代码。通常baseUrl设置的地址和调用Require.js的页面<script> 标签属性 data-main 在相同的目录下。

           d) 有时候你想避开”baseUrl + paths”的解析过程，而是直接指定加载某个目录下的脚本，可以这样做：以.js 结束、以”/”开始、包含URL协议，如”http:” or “https: ”。

使用BaseUrl 及 paths 的优点：

通过 require.config()的baseUrl及paths 去设置模块 会给你带来额外的灵活性，如便于脚本的重命名、重定位等 ，同时为了避免凌乱的配置，最好不要使用多级嵌套的目录层次来组织代码，而是要么将所有的脚本都放置到baseUrl中，要么分置为项目库、第三方库的一个扁平结构。

Define（） 定义模块

模块不同于传统的脚本文件，它良好的定义了一个作用域来避免全局名称控件的污染。

它显示地列出其他依赖关系，并以函数

理想情况下，每个加载的脚本都是通过define（） 来定义的一个模块，但是有些“浏览器全局变量注入”型的传统js、遗留库并没有使用defing（）来定义他们的依赖关系， 你必须使用require. config（） 的Shim config来指明它们的依赖关系，如果没有指明依赖关系，加载可能报错。这是基于速度的原因，requireJs 会异步地以无序的形式加载这些库。

使用方式

      简单的值对

      如果一个模块仅含值对，没有任何依赖，则在define（）中定义这些值对就好了：

      define({ color: "black", size: "unisize"});

函数式定义

       如果一个模块没有任何依赖，但需要一个setup工作的函数 ，则在define（）中的定义该函数，并将其传给define（）：

       define(function () { [do…] return { color: "black", size: "unisize" } }); 初始化的工作在do 中完成，return 的结果为初始化后的对象结果。

存在依赖的函数式定义

      Define（）函数中第一个参数为 依赖的名称数组，第二个参数是函数， 在所有依赖加载完毕后，该函数会被调用来定义该模块的object 。依赖关系会以参数哦的形式注入到该函数上，参数列表与依赖名称一一对应。

my/shirt.js now has some dependencies, a cart and inventory module in the same directory as shirt.js

define(["cart", "inventory"], function(cart, inventory) {

return an object to define the "my/shirt" module.

return {

color: "blue",

size: "large",

addToCart: function() {

         inventory.decrement(this);

         cart.add(this);

          }

} });

遵循此处的定义模式，可以使得同一模块的不同版本并存于同一个页面上。

上面返回的objce 是一个定义为”my/shirt”模块，这种定义模式下，”my/shirt”不作为一个全局变量而存在。同时该模块可以在别的requie（） 函数中调用。

define() 、 require() 直接调用文件 ，即调用未通过require.Config（）配置的文件时， 可以使用 ./name 或 name 来配置路径。但是在require.Config（） 时，如果不是在相同文件夹中，就需要 ../ 来配置路径。

声明模块时的注意事项：

一个文件一个模块：每个javascript 文件应该只定义一个模块，只是模块名-至-文件名查找机制的自然要求。多个模块会被优化工具组织优化，但你在使用优化工具时应该将多个模块放置到一个文件中。

Define（）中的相对模块名：为了可以在define（）内部使用诸如require（”./relative/name”）的调用以正确解析相对名称，记得将”require” 本身作为一个依赖注入到模块中：define([“require”,”./relative/name”],function(require)){ var mod = require(“./relative/name”) }

生成相对模块的URL地址： 在define（） 中将 ”require” 作为一个依赖注入进来，然后调用require.toURL（）以生成该URL:

Define([“require”] , function(require) { var cssUrl = require.toUrl( “./style.css” ); } )

控制台获取一个已通过require（“module/name“,function(){}）加载的模块，可以通过模块名作为字符串参数的require（）来获取：

Require（“module/name“）.callSomeFunction() 这种方式只能在define内部使用形如”./module/name”的相对路径。

JSONP服务依赖

requireJS中使用JSONP服务，须要将CallBack 参数的值指定为”define”，这意味这你将获取的JSONP ULR 的值看成是一个模块定义。即”callback=define”告诉API将Json 响应包裹到一个”define()”中。

require(["http://example.com/api/data.json?callback=define"], function (data) {

          //The data object will be the API response for the

          //JSONP data call.

          console.log(data);

});

JSONP的这种用法应仅限于应用的初始化中。一旦JSONP服务超时，其他通过define（）定义了的模块也可能得不到执行。且仅支持返回值类型为JSON object的JSONP服务。其他返回类型如数组、字符串、数字都不能支持。

清除Module

通过require.undef()用来undefine 一个模块。他会重置loader的内部状态使其忘记之前定义的一个模块。

如果该模块被其他模块依赖使用，该模块就不会被清除，所以该功能仅在无其他模块持有该模块的清理中。

加载非规范的模块

理论上，require.js加载的模块，必须是按照AMD规范、用define（）函数定义的模块。但是实际上有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。

通过require.config（） 方法，定义他们的一些特征。

Require.config( { shim:{ ‘underscore’:{ exports:’_ ’ } , ‘backbone’: { deps:[ ‘underscore’ , ‘jquery’] ,exports : ’Backbone’ } } } });

Require.config()接受一个配置对象，这个对象除了有前面说过的paths属性外，还有一个shim属性，专门用来配置不兼容的模块，具体来说，每个模块要定义：

1. Exports值 （输出变量名），表明这个模块外部调用时的名称。

2. Deps数组，表明该模块所依赖的模块。比如 jQuery 插件定义方式：shim:{ ‘jquery.scroll’:{ deps:[‘jquery’ ] , exports:’jQuery.fn.scroll’ } }

Require.js插件

Require.js 还提供一系列插件，实现一些特定的功能。

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

     Require（[‘domready!’ ],function (doc) { // 文档加载完成以后调用函数 }）；

Test 和 image插件 ，允许require.js 加载文本和图片文件。

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