【学习随记】动态加载多个js文件

最新推荐文章于 2023-04-23 16:05:52 发布

ahboa

最新推荐文章于 2023-04-23 16:05:52 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_46008251/article/details/107194914

版权

笔记专栏收录该内容

4 篇文章

订阅专栏

本文记录了使用JavaScript动态加载多个JavaScript文件的方法，详细介绍了如何通过创建script标签并设置其src属性来实现文件的异步加载，以及加载过程中的状态监控和错误处理策略。

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

        // 定义动态加载js的方法，以数组的形式加载多个js文件
        function dynLoadJs(urlArr, callback) {
            console.log('需要动态加载的js文件列表：', urlArr);
            var cb = callback || function () {}; // 加载完成后回调方法
            for (var i = 0, len = urlArr.length; i < len; i++) { // 遍历需要加载的列表
                var sp = document.createElement("script"); // 动态创建 script 标签
                sp.type = 'text/javascript'; // 设置 script 的ype类型
                if (i == len - 1) { // 判断最后一个文件
                    if (sp.readyState) { // IE 
                        sp.onreadystatechange = function () { // IE 加载完成
                            if (sp.readyState == 'loaded' || sp.readyState == 'complete') {
                                sp.onreadystatechange = null;
                                console.warn('IE 动态加载最后一个文件完成！');
                                cb(); // 执行回调
                            }
                        };
                    } else { //其他浏览器
                        sp.onload = function () { // 加载完成
                            console.warn('非IE 动态加载最后一个文件完成！');
                            cb(); // 执行回调
                        };
                    }
                }
                sp.src = urlArr[i]; // 设置 script 的src属性
                console.log(sp);
                document.getElementsByTagName('head')[0].appendChild(sp); // 把 script 标签 插入head头部
            }
        }


        // 使用方法
        dynLoadJs(['js/vue.js', 'js/axios.min.js', 'js/vconsole.min.js', 'js/jquery.js'], function () {
            console.log('动态加载js完成，开始执行回调');
            
            // 执行加载完成逻辑
            var vConsole = new VConsole(); 
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
            window.onresize = function () {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
            };



        });