前言
在前端开发中，我们经常需要引入外部库或资源文件。通常情况下，我们会将这些文件下载并放入项目中，然后在 HTML 中使用 script 标签来引入这些文件。但是，这种方式存在一些问题：
- 可能存在脚本依赖关系，如果依赖关系不正确，会导致代码无法正常执行。
- 脚本文件比较大，需要等待很长时间才能下载完成。
- 如果某些脚本只在某些页面使用，那么在其它页面加载这些脚本会浪费带宽和资源。
为了解决这些问题，我们可以使用一些 JavaScript 资源加载库，例如 fg-loadjs。
什么是 fg-loadjs
fg-loadjs 是一款轻量级、无依赖的 JavaScript 资源加载库，可以方便地管理 JavaScript 依赖关系、提前预加载资源、按需延迟加载资源等。
fg-loadjs 提供了简洁明了的 API，可以很容易地使用。在此，我们将通过示例来介绍其使用方法。
安装
fg-loadjs 可以使用 npm 进行安装：
npm install fg-loadjs --save
使用方法
加载单个脚本
首先，我们来看如何加载单个脚本。例如，我们需要加载 jQuery：
loadjs('https://code.jquery.com/jquery-3.6.0.min.js', function() {
// 在该回调函数中，jQuery 已经加载完成，可以使用了
})上述代码通过 loadjs 方法加载了 jQuery，当 jQuery 加载完成后，该方法的回调函数就会执行。注意，由于网络环境等因素，加载可能需要一些时间，因此，我们需要等待回调函数执行后才能使用 jQuery。
加载多个脚本
有时候，我们需要加载多个脚本文件。如果使用 loadjs 方法单独加载，可能会存在依赖关系的问题。为了解决这个问题，我们可以使用 loadjs([files], [callback]) 方法，将多个文件作为数组传递给 files 参数：
loadjs(['jquery.min.js', 'bootstrap.min.js'], 'app.js', function() {
// 在该回调函数中，jQuery 和 Bootstrap 都已经加载完成，可以使用了
})上述代码将会先加载 jquery.min.js 和 bootstrap.min.js，然后再加载 app.js。当所有脚本加载完成后，回调函数就会执行。
如果这些脚本存在依赖关系，可以使用以下方式指定依赖关系：
loadjs(['jquery.min.js'], function() {
loadjs(['bootstrap.min.js'], 'app.js', function() {
// 在该回调函数中，jQuery 和 Bootstrap 都已经加载完成，可以使用了
})
})预加载资源
在某些情况下，我们需要在代码中实时加载某些资源，例如图片、CSS 等。如果这些资源比较大且需要等待较长时间，会导致用户体验不佳。为了解决这个问题，我们可以采用预加载的方式。
loadjs(['https://example.com/img1.jpg', 'https://example.com/img2.jpg'], function() {
// 图片已经预加载完成
})上述代码通过 loadjs 方法预加载了两张图片。当图片预加载完成后，回调函数就会执行。
按需延迟加载资源
在某些情况下，我们需要在某个操作之后才加载某个资源，例如用户在点击按钮后才会展开一个弹窗，那么在弹窗展开之前加载相关脚本可能会浪费资源。为了解决这个问题，我们可以采用按需延迟加载的方式。
例如，我们需要在点击按钮后才加载某个脚本：
document.getElementById('button').onclick = function() {
// 用户点击按钮后，加载脚本
loadjs('https://example.com/script.js', function() {
// 脚本加载完成后的回调函数
})
}上述代码通过用户点击按钮的方式来触发加载脚本操作，可以避免在页面加载时就加载该脚本。
总结
通过上述示例，我们可以看出，fg-loadjs 是一款非常实用的 JavaScript 资源加载库，可以有效提高页面加载速度和用户体验。如果您需要管理 JavaScript 依赖关系、预加载资源、按需加载资源等功能，不妨尝试使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/fg-loadjs