require.js笔记

笔记参考来源：阮一峰  http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

 

1. 浏览器端的模块只能采用“异步加载”方式 ==> AMD

形式：require([module],callback)

 

2. require.js

2.1 require.js解决两个问题

　　1.实现js文件的异步加载，避免网页失去响应；

　　2.管理模块之间的依赖性，便于代码的编写和维护。

2.2 require.js的使用

2.2.1 加载js代码

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

    data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

2.2.2 主模块写法

    当主模块依赖其他模块时，采用AMD规范的require()函数

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
});

    例如，

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　　　// some code here
});

    主模块代码在callback中。

2.2.3 模块的加载

    在上述代码前，还需对模块的加载行为进行自定义。采用require.config()函数

require.config({
    baseUrl: "js/lib", //可选，不写的话默认main.js目录
    paths: {
        "jquery": "jquery.min",
        "underscore": "underscore.min",
        "backbone": "backbone.min"
    }
});        

    当然，也可以对非本地文件进行加载。

2.2.4 AMD模块写法

    require.js加载的模块，必须得采用AMD规范。

    用一个普通的js举例，如果它不依赖于其他模块

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

    如果它还依赖其它模块，则

define(['myLib'], function(myLib){
　　function foo(){
　　　　myLib.doSomething();
　　}
　　return {
　　　　foo : foo
　　};
});

    对该js的加载如下

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

    其中，第一个数组参数指明其依赖

2.2.5 加载非AMD规范的依赖

    很多库并不不符合AMD规范，以underscore和backbone为例，如果要加载它们的话，必须先定义它们的特征

require.config({
    path: {
     ... //同上省略
    }
    shim: {
        'underscore':{
            exports: '_'
　　 },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});

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