在“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的回调函数,但是笔者还是推荐第一种方式,毕竟那是官方推荐的。在某些场合下,也可以使用事件调用的方式来执行特定的模块代码,也就是方式三(笔者也会这么用)