在前端开发中，有时候会需要在加载一个依赖库之前先加载另一个依赖库。这种情况下，我们可以使用 chainloading 技术来解决这个问题。本文将介绍如何使用 chainloading 技术以及如何在你的项目中使用相关的 NPM 包。
什么是 chainloading？
简单来说，chainloading 就是在加载一个依赖库之前先加载另一个依赖库的过程。这种技术通常用于在加载依赖库时解决依赖关系问题。比如，当你的项目需要依赖库 A 和依赖库 B，但是依赖库 A 又依赖于依赖库 B，那么你需要先加载依赖库 B 再加载依赖库 A。
如何实现 chainloading？
在 JavaScript 中，我们可以通过以下几种方式来实现 chainloading：
- 使用
<script>标签按照顺序加载多个脚本文件。 - 调用
XMLHttpRequest对象或者fetchAPI 来异步加载脚本文件，并在加载完成后执行回调函数。 - 使用专门的 NPM 包来实现
chainloading。
其中，第一种方式比较简单，但是不够灵活。第二种方式虽然可以解决异步加载的问题，但是比较麻烦。因此，本文将重点介绍第三种方式。
使用 NPM 包 chainloading
在 NPM 中，有很多可以用来实现 chainloading 的包，比如 loadjs、scriptjs、headjs 等等。这些包都提供了异步加载脚本文件的功能，并且支持加载多个脚本文件并按照顺序执行。
下面以 loadjs 包为例，介绍如何使用它来实现 chainloading。
安装 loadjs 包
首先，在你的项目中安装 loadjs 包：
npm install loadjs --save
加载多个脚本文件
然后，在你的 JavaScript 代码中，使用 loadjs 函数来加载多个脚本文件。例如，假设你的项目需要加载 jQuery 和 Bootstrap，而且 Bootstrap 依赖于 jQuery，那么你可以按照以下方式来加载这两个库：
-- -------------------- ---- -------
--------
----------------------------------------------
------------------------------------------------------------------------------
-- ------------ -
-------- ---------- -
---------------- ------- ---- ---- ----------
-- ------------
--
------ -----
---上面的代码中，我们使用 loadjs 函数来加载 jQuery 和 Bootstrap 两个脚本文件。loadjs 函数的第一个参数是一个数组，包含了要加载的脚本文件的 URL；第二个参数是一个字符串，用来标识这些脚本文件的组名；第三个参数是一个对象，包含了一些配置信息。
在这个例子中，我们设置了 success 回调函数，在所有脚本文件都加载完成后执行。此外，我们将 async 参数设置为 false，以便保证脚本文件按照顺序加载和执行。
更多高级用法
除了基本的加载脚本文件功能之外，loadjs 包还提供了很多高级用法，比如：
- 通过
before和after参数来指定某个脚本文件的加载顺序； - 通过
returnPromise参数来返回一个 Promise 对象，并在所有脚本文件加载完成
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/39326