马黑黑老师-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><script src="JS文件地址"></script></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&tid=92530" title="点击访问">酬天问</a>，</p>
</div>
支持发布，内容超有质量 感谢分享，收获满满感悟 赞，顶帖真的太精彩啦 支持分享，文章十分出彩 感谢分享，带来满满惊喜 顶起很好的帖 支持分享，内容超级棒呢 赞，顶帖超有启发作用 必须支持。。。。。。。