上一篇教程:RequireJS 简单使用教程(上) 主要写了 RequireJS 的 下载 & 引入加载文件和模块定义模块,考虑到内容可能会比较多,所以准备分开写。

配置

baseUrl

这个 baseUrl 就是 RequireJS 加载的根目录,默认和调用 requirejs.jshtml 文件在同一目录。例如 html 文件的位置在:xxx.com/index.htmlbaseUrl 的默认位置就是:xxx.com/baseUrl 可以手动更改,更改后加载的时候就不需要写很长的路径了,下面还是一个超简单的目录:

D:.
│  test1.html
│
└─js
    │  main.js
    │  require.js
    │
    └─module
            isemail.js

下面配置 baseUrl 目录为:js ,然后加载:js/module/isemail.js

requirejs.config({
    baseUrl: 'js'
});

requirejs(['module/isemail'], function (isEmail) {
    //  调用 isEmail 模块并在控制台输出执行结果
    console.log(isEmail('123@qq.com'));  //  判断邮箱地址的模块
});

手动配置的时候使用:config 方法,需要传入一个 JSON 对象,其中的:baseUrl: 'js' 就是配置:baseUrl 的位置,调用模块的时候不需要写 .js 后缀名。

paths

使用 paths 可以指定模块的路径,下面是一个超简单的目录:

D:.
│  test1.html
│
└─js
    │  main.js
    │  require.js
    │
    ├─lib
    │      jquery.js
    │
    └─module
            isemail.js

下面使用 paths 指定 jQuery 的路径:

requirejs.config({
    paths: {
        jquery: 'lib/jquery'
    }
});

requirejs(['jquery'], function ($) {
    //  按钮鼠标点击
    $('button').on('click', function () {
        alert('what\'s your problem');
    });
});

paths 也可以设置线上 CDN 的地址,如下:

requirejs.config({
    paths: {
        jquery: [
            'https://cdn.bootcss.com/jquery/3.4.1/jquery.min',
            'lib/jquery'
        ]
    }
});

requirejs(['jquery'], function ($) {
    //  按钮鼠标点击
    $('button').on('click', function () {
        alert('what\'s your problem');
    });
});

上面分别设置了一个线上的 jQuery CDN 地址和一个本地的 jQuery,如果 CDN 上的加载失败就会加载本地的 jQuery。

shim

在调用一些不支持 AMD 标准的模块的时候就需要配置 shim,还有一些涉及到依赖的非 AMD 模块,例如 Bootstrap 和 jQuery 的一些组件。

下面不配置 shim 调用 Bootstrap :

requirejs.config({
    paths: {
        jquery: 'lib/jquery',
        bootstrap: 'lib/bootstrap.min'
    }
});

requirejs(['jquery', 'bootstrap'], function ($) {
    //  按钮鼠标点击
    $('#btn').on('click', function () {
        $('dialog').modal('show');
    });
});

下面是浏览器报错信息:

不配置shim浏览器报错的截图

Bootstrap 需要依赖 jQuery,但是 Bootstrap 不是 AMD 标准的模块,不能在模块中直接配置依赖,所以在加载的时候顺序可能会出错。

下面使用 shim 配置依赖:

requirejs.config({
    paths: {
        jquery: 'lib/jquery',
        bootstrap: 'lib/bootstrap.min'
    },
    shim: {
        bootstrap: ['jquery']
    }
});

requirejs(['jquery', 'bootstrap'], function ($) {
    //  按钮鼠标点击
    $('#btn').on('click', function () {
        $('dialog').modal('show');
    });
});

上面的 Bootstrap 需要依赖 jQuery,使用 shim 配置后 加载的时候就会先加载 jQuery 然后加载 Bootstrap。

waitSeconds

配置加载超时,如果到达 waitSeconds 配置的时间还没有加载完成的话就会放弃加载,0 为无限期,默认为 7 秒。

urlArgs

可在 URL 后面增加额外的参数,就像:http://xxx.com?user=name 的参数,用法如下:

requirejs.config({
    paths: {
        jquery: 'https://code.jquery.com/jquery-3.4.1.min'
    },
    urlArgs: 'name=hello'
})

浏览器网络面板中的请求 URL 就是:https://code.jquery.com/jquery-3.4.1.min.js?name=hello


版权声明:本文为原创文章,版权归 Mr Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/804/
如果您对本文有什么疑问或问题都可以在评论区留言,我看到后会尽量解答。