JS-require.js

最新推荐文章于 2024-08-04 03:29:52 发布

Just______

最新推荐文章于 2024-08-04 03:29:52 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/Just______/article/details/77881694

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了require.js的优势，如模块化和无需关注脚本加载顺序。详细讲解了如何引入require.js，包括在HTML中设置src、defer和data-main属性。此外，还演示了在main.js中通过define和require来定义和引入模块，以及require.js的config配置的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、require的优点：

模块化、不用关心JS声明的顺序

二、如何使用

2.1 下载require.js，在html中引入，并指定入口JS

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

src:指定require.js的目录
defer async=”true”:异步加载，防止JS文件的加载导致页面失去响应
data-main=”main”：指定一个入口main文件，.js后缀名可以省略，require会在后面自动加上，如果不在同一级目录，需要注意指定路径

2.2 main中 require的写法

例如在main.js中，依赖Tools.js。调用Tools.js弹窗一个对话框
首先，利用define 定义一个Tools.js

define([],function () {
    var toolObj = {};
    toolObj.showDialog = function (message) {
        alert(message);
    };

    return toolObj;
});

然后，运用require 在main中引入Tools.js

require(['Tools'],function (tool) {
        tool.showDialog();
});

define ,require函数都接受两个参数。
第一个参数是一个数组，表示所依赖的模块；
第二个参数是一个回调，依赖的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
所有依赖的模块都加载完成，才会响应回调函数

三、config配置

equirejs.config({

    /**
     * 以html所在目录为根起点，指定同级的js目录为相对路径
     */
    baseUrl: '../js',

    /**
     * 可以在这里指定所有模块的路径，并定义个名称
     */
    paths: {
        Tools: './Tools', //name : path
        Test: './Test', //name : path
    },
    /**
     * 这里可以设置模块的依赖
     * 和对非标准的JS做兼容
     */
    shim: {
        /**
         *  对非标准的Test.js里面的consoleLog和consoleError方法做兼容
         */
        'Test': {
            init: function () {
                return {
                    log:consoleLog,
                    err:consoleError
                }
            }
        },

        /**
         * 设置bootstrap的依赖
         * 引入bootstrap会先加载依赖的jquery和css
         */
        'bootstrap':{
            'deps':['jquery','css!../css/bootstrap.min.css']
        }
    }
});