马黑黑 发表于 2026-4-25 12:21

JS：动态加载多个JS文件

<style>
        .artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
        .artBox p { margin: 10px 0; }
        .artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
        .artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
        .artBox pre code { padding: 0; background: none; }
        .artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: #e7e5e3; }
</style>

<div class="artBox">
<p>Web页加载外部 .js 资源本来很容易：</p>
<blockquote>
<p>方法一：<code>&lt;script src="JS文件地址"&gt;&lt;/script&gt;</code><br>方法二：<code>import * from 'JS地址'; // ES6模块</code></p>
</blockquote>
<p>然而，一些场景并不支持上述方法或支持度不够理想。因此，动态加载JS文件成了解决问题的替代方法，本文在此前介绍的动态加载单个外部JS文件的基础上加以扩展，实现多个JS资源的动态加载。看代码和解释：</p>
<pre><code>function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}
</code></pre>
<p>loadJs() 函数并无太多区别，仅在 onload 事件中加了一个 if 条件语句，检测调用者是否提供传参（回调函数），若有，则执行它。这是关键语句，试看调用方法：</p>
<pre><code>loadJs('1.js', function() {
    loadJs('2.js', function() {
      loadJs('3.js', myFn);
    });
});

function myFn() {
    console.log('第三个JS文件加载完毕');
}
</code></pre>
<p>上面的调用 loadJs() 函数代码中，第一步是加载 <code>1.js</code> 文件，同时传入一个匿名函数 function()，该匿名函数实际上是继续调用 loadJs() 函数加载第二个JS文件即 <code>2.js</code>——如果第一个JS文件加载成功的话；第二步加载第二个JS文件，同样传入一个匿名函数，该匿名函数加载第三个JS文件；第三步，加载第三个JS文件 <code>3.js</code>，传入 myFn() 函数（函数没有形参时可以不要方括号 <code>()</code>）。myFn() 函数是JS文件都成功加载后的业务函数，这里 作为第三次调用外部JS文件后的回调函数，确保业务逻辑是在所有外部JS资源都成功加载后才开始投入工作进程——因为业务逻辑依赖第三方JS资源的支撑。</p>
<p>loadJs() 函数没有做出错处理，个人觉得也没有必要，毕竟层层调用加载函数本身就不能出错，任意一层加载出了问题，核心业务逻辑都无从施展，所加入的出错处理机制顶多方便查找到底是哪一个JS文件未能成功加载，而这个功能，浏览器自身的出错警告已经够明确了。</p>
<p>应用实例请查看 <a href="https://www.huachaowang.com/forum.php?mod=viewthread&amp;tid=92530" title="点击访问">酬天问</a>，</p>
</div>

梦江南 发表于 2026-4-25 15:03

谢谢黑黑老师辛苦，学习了。{:4_190:}

杨帆 发表于 2026-4-25 18:39

长知识了，谢谢马老师详细讲授动态加载多个JS文件的方法{:4_190:}

小辣椒 发表于 2026-4-25 20:58

感谢黑黑分享新的代码知识{:4_187:}

马黑黑 发表于 2026-4-25 22:44

小辣椒 发表于 2026-4-25 20:58
感谢黑黑分享新的代码知识

{:4_191:}

马黑黑 发表于 2026-4-25 22:44

梦江南 发表于 2026-4-25 15:03
谢谢黑黑老师辛苦，学习了。

晚上嚎

马黑黑 发表于 2026-4-25 22:44

杨帆 发表于 2026-4-25 18:39
长知识了，谢谢马老师详细讲授动态加载多个JS文件的方法

{:4_191:}

红影 发表于 2026-4-26 19:28

层层加载么，每次加载的匿名函数就是层层加载的敲门砖吧{:4_173:}
感谢黑黑的详细讲解，学习了{:4_199:}

马黑黑 发表于 2026-4-26 20:30

红影 发表于 2026-4-26 19:28
层层加载么，每次加载的匿名函数就是层层加载的敲门砖吧
感谢黑黑的详细讲解，学习了

这时经典的嵌套加载，到了最里层运行核心业务函数

红影 发表于 2026-4-30 15:46

马黑黑 发表于 2026-4-26 20:30
这时经典的嵌套加载，到了最里层运行核心业务函数

嗯，被嵌套的相当于括号里的括号的括号吧{:4_173:}

马黑黑 发表于 2026-5-5 09:12

红影 发表于 2026-4-30 15:46
嗯，被嵌套的相当于括号里的括号的括号吧

大概就这么个意思

红影 发表于 2026-5-5 22:58

马黑黑 发表于 2026-5-5 09:12
大概就这么个意思

分层次的执行。

马黑黑 发表于 2026-5-5 23:12

红影 发表于 2026-5-5 22:58
分层次的执行。

好的
页: [1]
查看完整版本: JS：动态加载多个JS文件