前端require.js的基本用法

require.js是一个js脚本加载器（模块化加载），它遵循AMD(Asynchronous Module Definition)规范，实现js脚本的异步加载，不阻塞页面的渲染和其后的脚本的执行，并提供了在加载完成之后的执行相应回调函数的功能。官网下载地址：https://requirejs.org/docs/download.html

废话不多说，我们直接来看一个Demo，Demo的目录结构如下所示：

其中 require_config.js 代码如下：

//主要用来配置模块的加载位置（设置短模块名）
require.config({
    baseUrl: '/js/lib', //设置根目录
    paths: { //如果没有设置根目录则需要填写完整路径
        'vue': 'vue',
        'axios': 'axios',
        'jquery': 'jquery-3.6.3',
        //paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如下：
        //'jquery': ['http://libs.baidu.com/jquery/2.0.3/jquery', '/js/lib/jquery-3.6.3'],
    }
});

其中 base.js 代码如下：

//define用来自定义模块
//第一个参数：加载依赖模块，可以是require_config中定义的短模块名，也可以是完整的模块路径（去掉.js后缀名）
//第二个参数：执行加载完后的回调函数
define(['vue', 'axios'], function (vue, axios) {
    //TODO 此处可以处理一些公共的逻辑
    //vue.component('component-a', { /* ... */ }); //全局注册组件
    return {
        vue: vue,
        axios: axios,

        //Vue混入
        mixin: {
            //数据
            data: function () {
                return {
                    domain: '', //域名
                }
            },
            //组件
            components: {

            },
            //created钩子函数
            created: function () {
                console.log('This is base created');
            },
            //mounted钩子函数
            mounted: function () {
                console.log('This is base mounted');
            },
            //方法
            methods: {
                //测试
                doTest: function () {
                    console.log('This is base doTest');
                },
                //获取域名
                getDomain: function () {
                    var _this = this;
                    _this.domain = 'https://www.baidu.com';
                },
            }
        },
    };
});

其中 index.js 代码如下：

//第一个参数：加载依赖模块，可以是require_config中定义的短模块名，也可以是完整的模块路径（去掉.js后缀名，根目录为require_config中设置的baseUrl）
//第二个参数：执行加载完后的回调函数
require(['../common/base', 'jquery'], function (base, $) {
    let axios = base.axios;

    var vm = new base.vue({
        el: '#app', //挂载点
        mixins: [base.mixin], //混入，类似基类的概念
        data: {
            msg: 'Hello Vue!'
        },
        //created钩子函数
        created: function () {
            console.log('This is index created');
        },
        //mounted钩子函数
        mounted: function () {
            console.log('This is index mounted');
        },
        //方法
        methods: {
            //测试
            doTest: function () {
                console.log('This is index doTest');

                $('#myDiv').html('测试jquery模块是否加载成功');
            },
            //测试2
            doTest2: function () {
                var _this = this;
                console.log('domain：' + _this.domain);
                _this.getDomain(); //在混入的base.js中
                console.log('getDomain：' + _this.domain);
            }
        }
    });
});

其中对应的前端 HTML 代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端require的基本用法</title>
</head>

<body>
    <div id="app">
        <input type="button" value="doTest" @click="doTest">
        <input type="button" value="doTest2" @click="doTest2">

        <div id="myDiv"></div>
    </div>

    <script src="/js/lib/require.js"></script>
    <script src="/js/common/require_config.js"></script>
    <script src="/js/index.js"></script>
</body>

</html>

运行结果如下：

更多内容可参考博文：https://www.runoob.com/w3cnote/requirejs-tutorial-2.html

Demo源码：

链接：https://pan.baidu.com/s/1LKOJA4jKI4txO0wS8Vw8jw 
提取码：bye4

此文由博主精心撰写转载请保留此原文链接：https://www.cnblogs.com/xyh9039/p/17134885.html

posted @ 2023-02-19 19:31 谢友海阅读(663) 评论(0) 编辑收藏举报

刷新页面返回顶部

欢迎来到谢友海的博客

前端require.js的基本用法

公告