在前端开发中，很多时候需要动态加载 JavaScript 脚本。这个过程可能涉及到跨域问题、脚本依赖关系等，如果手写代码实现起来复杂而且容易出错。针对这个问题，我们可以使用 load-script 这个 npm 包，它提供了一种简单、可靠的方式来动态加载 JavaScript。
安装和引入
使用 npm 安装 load-script:
npm install load-script
在项目中引入 load-script：
import loadScript from 'load-script';
基本使用
loadScript 方法接收两个参数：要加载的脚本的 URL 和一个回调函数。回调函数在脚本加载完成后执行。
loadScript('https://example.com/script.js', function (err, script) {
if (err) {
console.error('Failed to load script:', err);
} else {
console.log('Script loaded:', script.src);
}
});高级用法
加载多个脚本
如果需要加载多个脚本，可以在回调函数中判断当前加载的脚本是否为最后一个，然后执行相应操作。
-- -------------------- ---- -------
----- ---- - -
---------------------------------
---------------------------------
---------------------------------
--
------------------ -- -
--------------- ----- ------- -- -
-- ----- -
--------------------- -- ---- --------- -----
- ---- -
------------------- --------- ------------
-- ---- --- ---------------- - --- -
---------------- ------- ---------
-
-
---
---加载依赖脚本
如果需要加载一个或多个依赖脚本，可以使用 load-script 的 queue 方法来实现。
-- -------------------- ---- -------
------------------
-------------------------------------
-------------------------------------
-- ----- -------- -- -
-- ----- -
--------------------- -- ---- ---------- -----
- ---- -
-------------------- --------- -------------------- -- -------------
----------------------------------------- ----- ------- -- -
-- ----- -
--------------------- -- ---- --------- -----
- ---- -
------------------- --------- ------------
-
---
-
---注意事项
在 IE9 及更早版本的浏览器中，
onload事件可能不会触发。在这种情况下，可以使用如下代码：-- -------------------- ---- ------- ----- ------ - --------------------------------- ---------- - ---- ------------ - ----- ------------------------- - ------------- - -------- -- - -- ------ -- ----------------- -- --------------- --- -------- -- --------------- --- ------------ - ---- - ----- -------------- -------- - -- -------------------------------------------------------------如果要加载的脚本已经被浏览器缓存，
onload事件可能不会触发。在这种情况下，可以将回调函数放在setTimeout中执行。
总结
load-script 是一个方便实用的 npm 包，可以帮助我们动态加载 JavaScript 脚本，并提供了丰富的高级用法。在实际开发中，我们可以根据具体需求选择合适的方法来实现动态加载脚本的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50324