JS 动态加载脚本的4种方法

下面是JS动态加载脚本的4种方法的完整攻略。

1. 动态创建 script 标签并设置 src 属性

通过动态创建 script 标签并设置其 src 属性，可以实现动态加载脚本的效果。

const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js';
document.head.appendChild(script);

注：

1. 代码中创建了一个 script 标签，并设置了其 src 属性为 Vue.js 的 CDN 地址。
2. 将 script 标签插入 document.head 中，即可实现动态加载 Vue.js。

2. 使用 jQuery 的 getScript 方法加载脚本

使用 jQuery 的 getScript 方法，可以非常方便快捷地加载一个脚本。

$.getScript('https://cdn.jsdelivr.net/npm/vue/dist/vue.js', function () {
  console.log(Vue); // Vue 已经加载完成，可以使用
});

注：

1. 代码中使用 jQuery 的 getScript 方法，将 Vue.js 加载到页面中。
2. getScript 方法第二个参数为回调函数，当 Vue.js 加载完成后会执行该函数。

3. 使用 XMLHttpRequest 加载脚本

使用 XMLHttpRequest 对象，也可以实现动态加载脚本的效果。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
xhr.onload = function() {
  eval(xhr.responseText);
  console.log(Vue); // Vue 已经加载完成，可以使用
};
xhr.send();

注：

1. 代码中使用 XMLHttpRequest 对象，进行 Vue.js 的加载。
2. 当脚本加载完成后，将其内容通过 eval 函数执行，即可将 Vue.js 添加到全局变量中。

4. 使用 ES6 的 import 加载脚本

使用 ES6 的 import 关键字，可以方便地实现动态加载脚本的效果。

import('https://cdn.jsdelivr.net/npm/vue/dist/vue.js')
  .then((Vue) => {
    console.log(Vue); // Vue 已经加载完成，可以使用
  })
  .catch((err) => {
    console.log(err);
  });

注：

1. 代码中使用 ES6 的 import 关键字，进行 Vue.js 的加载。
2. 通过 then 方法可以获取到加载完成后的 Vue.js 对象。

以上就是 JS 动态加载脚本的4种方法的完整攻略了，希望可以帮助你更好地理解并掌握这个技巧。