常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数

1. 常用js、css文件统一加载方法的实现

为了加快网页的加载速度，我们可以采用常用js、css文件统一加载方法。这种方法可以将多个js、css文件打包成一个文件，从而减少HTTP请求次数。以下是一种实现这种方法的方式：

function loadResources(urls, callback) {
  var resources = urls.length, loadedResources = 0;
  var script, style;

  function onLoad() {
    loadedResources++;
    if (loadedResources == resources) {
      callback();
    }
  }

  for (var i = 0; i < resources; i++) {
    if (/\.js$/.test(urls[i])) {
      script = document.createElement('script');
      script.src = urls[i];
      script.onload = onLoad;
      document.head.appendChild(script);
    } else if (/\.css$/.test(urls[i])) {
      style = document.createElement('link');
      style.rel = 'stylesheet';
      style.href = urls[i];
      style.onload = onLoad;
      document.head.appendChild(style);
    }
  }
}

上面的代码定义了一个函数 loadResources，接收两个参数：urls 和 callback。urls 是一个数组，包含要加载的js、css文件的URL地址；callback 是一个回调函数，用于在所有js、css文件加载完成后执行。该函数内部会遍历 urls 数组，根据文件的类型动态创建 script 或 link 标签，并将其添加到文档头部。同时，还定义了一个内部函数 onLoad，用于统计已加载的资源数量，当所有资源加载完成后，调用回调函数callback。

1. 示例

以下是使用 loadResources 函数的示例代码：

loadResources([
  'https://code.jquery.com/jquery-3.5.1.min.js',
  'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css',
  'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js'
], function () {
  console.log('All resources are loaded');
  // Code to be executed after all resources are loaded
});

这个示例演示了如何使用 loadResources 函数加载 jQuery 和 Bootstrap 的样式和脚本。在所有资源加载完成后，将会执行回调函数 console.log('All resources are loaded')。

另外一个示例是，当页面需要使用打包后的 Vue、Vuex、Vue Router 库时，可以将它们打包成一个文件（例如 app.js），并通过 loadResources 函数加载。示例代码如下：

loadResources([
  '/path/to/app.js'
], function () {
  console.log('App is loaded');
  // Code to be executed after the app is loaded
});

上面的代码会先加载 app.js 文件，然后执行回调函数 console.log('App is loaded')。这样可以让页面加载速度更快，同时也有利于代码的维护和管理。