requirejs学习-3-配置文件编写

在“requirejs学习-1”中提到，页面中已经引入了requirejs，代码如下：

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

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

这个main.js该写什么内容呢？

这里写的是main.js文件，但是也有同仁喜欢命名为config.js。因为这个文件主要作用就是2个：

1、配置各个模块路径

2、加载主代码模块

1、配置各个模块路径

// 配置模块
require.config({
    baseUrl:"assets/js", // 相对与HTML的路径
    // 模块加载最大等待时间
    waitSeconds: "20",
    paths:{
        // jquery
       "jquery" : ["https://cdn.bootcss.com/jquery/1.12.4/jquery.min",
                    "../utils/jquery/jquery-1.12.4.min"]  // 本地库是相对 baseUrl的路径
    }
});

模块配置的时候，可以写多个。比如，这里对jquery加载的时候，优先加载网络jquery文件；加载失败（超过20s），再加载本地jquery文件。

2、加载主代码模块

require(["jquery","app1"],function($,app){
    $("body").css({
        background:"red"
    });
});

加载 jquery和app1 模块。jquery配置了路径，app1没有配置，那么就默认在 baseUrl 的路径去找app1.js。
因为 baseUrl 属性统一了路径，这里加载jquery模块的时候，就不用再写路径了。

把这段代码写在config代码的后面，这样，它在对应模块加载完毕后，会立即执行回调函数。

让require的回调函数执行还有另外两种方式：

方式之二：

把 requirejs 和 main.js 分别用script引入

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

把 app1 模块的加载代码写在后面：

<script src="js/require.js"></script>
<script src="js/main.js"></script>
<script>
require(["jquery","app1"],function($,app){
    $("body").css({
        background:"red"
    });
});
</script>

方式之三：

requirejs 还是通过 data-main属性配置main模块。

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

然后，把require请求模块的代码写进函数中，通过事件调用该函数。

<button  onclick="testFun()">
    测试
</button>

<script>
    function testFun(){
        require(["jquery","app1"],function($){
            $("body").css({
                background:"red"
            });
        });
    }
</script>

虽然，后面两种方式也可以执行require的回调函数，但是笔者还是推荐第一种方式，毕竟那是官方推荐的。在某些场合下，也可以使用事件调用的方式来执行特定的模块代码，也就是方式三（笔者也会这么用）

requirejs学习-3-配置文件编写

猜你喜欢