10分钟精通require.js

require.js的诞生，就是为了解决这两个问题：
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。

 实例下载：require.js应用实例

一、require.js的加载文件

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

 
由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

二、主模块的写法
main.js，我把它称为"主模块"，所有代码都从这儿开始运行。

require(['模块依赖'],, function (回调函数){});

 
实例：
require(['jquery'], function ($){ })

三、config配置

require.config({
        baseUrl: '路径',
　　　　paths: {
            '标识':'路径'
　　　　}

});

 

 四、AMD模块的写法

define(function (){ }); 

 如果模块存在依赖，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['lib'], function(myLib){ });

 
当require()函数加载上面这个模块的时候，就会先加载依赖文件lib.js。

五、require.js插件
require.js还提供一系列插件，实现一些特定的功能。 插件下载地址：
https://github.com/jrburke/requirejs/wiki/Plugins

 

 

实际开发应用

文件：

require.js

jquery.js

 

main.html

 

main.js

one.js

three.js

two.js

 

文件代码:

init.html

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

 

main.js

require.config({
    //baseUrl: ".",
    paths: {
        "jquery": "/script/jquery"
    }
}); 

//main.js 调用依赖模板，次处为入口程序main()
require(['one', 'two', 'three'], function (one, two, three) {
    document.write(one.add(1, 2));
    document.write('</br>');
    document.write(two.add(3, 4));
    document.write('</br>');
    document.write(three);
}); 

 one.js

//定义非依赖模板
define(function () {
    var add = function (x, y) {
        return "one.js模板，实现x+y=" + x + y;
    };
    return {
        add: add
    };
}); 

 two.js

//定义依赖模板
define(['one'], function (one) { 
    var add = function (x, y) {
        return "two.js模板，依赖one.js模板，x+y=" + one.add(x, y);
    };
    return {
        add: add
    };
}); 

 three.js

define(['jquery'], function ($) {
    return "three.js模板，实现调用jquery.js类库：" + $.trim('jquery trim');
});