requireJS的基本用法（下）

requireJS配置项介绍

1、baseUrl:指定本地模块的基准目录，即本地模块的路径是相对于那个目录的，该属性通常有requireJS加载时的data-main属性指定。比如如下代码

<script src="RequireJS/require.js" defer async="true" data-main="RequireJS/app.js"></script>

app.js文件的内容：

requirejs.config({
    baseUrl: 'RequireJS/app'
});
requirejs(['a','b','c'],function(a,b,c){
});

我们在浏览器中看到如下请求路径：

如上可以看到，View.html和RequireJS是同一个目录下的，都是放在requireJS文件夹里面的，所以定义baseUrl:’RequireJS/app’ 会自动解析成 requireJSService/RequireJS/app/ 所以requirejs([‘a’,’b’,’c’])的话，会自动到requireJSService/RequireJS/app/目录下去查找a.js，b.js，c.js.找到了就可以加载出来.

如果未显示设置baseUrl,则默认值是加载require.js的html所处的位置，如果使用了data-main属性的话，则该路径变成了baseUrl.如下代码：

<span style="font-size:18px;"><script src="RequireJS/require.js" defer async="true" data-main="RequireJS/app.js"></script></span>

app.js文件的内容

requirejs(['a','b','c'],function(a,b,c){
});

如上显示：默认情况下是从data-main文件入口去加载RequireJS/app.js代码的，但是现在app.js中并没有设置config配置项，所以使用requirejs([‘a’,’b’,’c’],function(a,b,c))的时候会继续加载RequireJS下面的a.js,b.js,c.js，如果找到就加载，没有找到就显示404 not found，如上所示。

2、path:paths是映射那些不直接放在baseUrl指定的目录下的文件，设置paths的起始位置是相对于baseUrl的，除非该path设置是以”/”开头或含有URL协议(http://或者https://).

app.js文件的内容如下：

requirejs.config({
    baseUrl: 'RequireJS/lib',
    paths: {
        app: '../app'
    }
});
requirejs(['app/a'],function(a){
});

可以看到paths是相对于baseUrl配置项生成的，baseUrl:’RequireJS/lib’下的所有js文件，但是paths下的 app:’../app’是相对于js/lib下设置的，’..’的解析到js目录下，然后就解析成RequireJS/app下，再require([‘app/a’]),就解析到RequireJS/app/a.js了。

当我们把baseUrl注释掉的话，a.js可定就找不到了，此时加载的路径如下：

requirejs.config({
    //baseUrl: 'RequireJS/lib',
    paths: {
        app: '../app'
    }
});
requirejs(['app/a'],function(a){
})

3、skim参数：理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合，而skim解决了使用非AMD方式定义的模块(如jquery插件)及其载入顺序，为那些没有使用define()来声明依赖关系，设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。

app.js中的代码如下：

require.config({
    baseUrl: 'RequireJS/lib',
    paths: {
        'app': '../app',
        'temp':'../app/depBase',
        'jquery':'../lib/jquery-1.7.1',
        'a':'../app/a'
    },
    shim: {
        'temp': { exports:'_',deps: ['jquery'] }
    }
});
require(['temp','a'],function(base){
    console.log(base);
});

文件加载顺序及加载结果

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

4、map参数：对于给定的模块前缀，使用一个不同的模块ID来加载该模块。这个手段在大型项目中是非常重要的，比如我们不同的模块需要加载不同版本的jquery文件，这就需要我们用到这个map来给我们解决了，比如我们a.js文件需要依赖jquery-1.7.1，而我们的b.js文件需要依赖jquery-1.8.0。请看下面例子：app.js文件中的代码：

requirejs.config({
    map: {
        'app/a': {
            'jquery': 'RequireJS/lib/jquery-1.7.1.js'
        },
        'app/b': {
            'jquery': 'RequireJS/lib/jquery-1.8.0.min.js'
        }
    }
});
/*require(['app/a'],function(jq){
});*/
require(['app/b'],function(jq){
});

a.js文件和b.js文件中的内容如下：

define(function (require, exports, module) {
    var a = require(['jquery']);
});

define(function (require, exports, module) {
    var b = require(['jquery']);
});

我们只加载b.js文件的时候的文件加载结果：

如果我们只加载a.js文件，那么我们会看到加载的是jquery-1.7.1.js文件。

5.config参数：这个和我们c#中的配置文件一样，我们一般将易变的或者application级别的信息配置在config里面，同样这个东西在requireJS中也是支持的，但是这就需要我们提供一种手段将里面的配置的信息传递到每一个模块中，基于requirejs.config()的config配置项来实现。要获取这些信息的模块可以加载特殊的依赖 ”moudle” ,并调用module.config().

app.js文件中的代码：

requirejs.config({
    config: {
        'app/c': {
            name: '郑浩'
        },
        'app/d': {
            age: 18
        }
    }
});
require(['app/c'],function(c){
    console.log(c);
});
require(['app/d'],function(d){
    console.log(d);
});

c.js文件和d.js文件中的代码如下：

define(function (require, exports, module) {
//其值是'郑浩'
    var size = module.config().name;
    return size;
});

<span style="font-family:SimSun;font-size:18px;">define(['module'], function (module) {
    var color = module.config().age;
    return color;
});</span>

最后赠送

其实require和我们之前过的ajax或者$http有类似地方就是在回调函数上面，当我们在加载出错的时候会走第二个

回调函数，代码如下：

require(['b'], function ($) {
     //Do something with $ here
}, function (err) {
    alert(err)
});

小结

以上就是小编对requireJS的一些理解和总结，其中的例子都是对现在项目中一个缩影，上面讲解的一些属性和参数都在我们项目中出现过，也是我们在使用requireJS经常用到的一些基本知识，里面有一些东西还不是很明白，需要在项目中继续学习和研究，希望对读者有些帮助