动态加载JavaScript文件的3种方式

当我们开发一个网站时，经常需要用到Javascript代码来处理交互逻辑和动态效果。通常，为了让代码更清晰、易于维护，我们会将Javascript代码分离到一个或多个独立的文件中。这时就需要用到动态加载Javascript文件的功能。下面介绍3种常用的方式：

1. 通过DOM创建script元素

动态加载Javascript文件最常用的方式就是通过DOM创建script元素。创建script元素时，利用其src属性来指定需要加载的Javascript文件的URL地址。

var script = document.createElement('script');
script.src = 'example.js';

document.head.appendChild(script);

上面的代码会在head标签内动态创建一个script元素，并将其src属性设置为example.js的URL地址。这个URL地址可以是绝对路径，也可以是相对路径。

2. 使用XMLHttpRequest请求Javascript文件

除了使用script元素动态加载Javascript文件，还可以通过XMLHttpRequest对象载入Javascript文件。这种方法的优点是可以利用XMLHttpRequest的高级特性，如请求失败后自动重试等。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.js');

xhr.onload = function() {
  var script = document.createElement('script');
  script.textContent = xhr.responseText;
  document.head.appendChild(script);
};

xhr.send();

上面的代码先通过XMLHttpRequest对象请求example.js文件，然后在请求成功后将文件内容编译成Script元素，并添加到head标签内。

3. 使用ES6的import语句

最后一种方式是使用ES6的import语句（需要支持ES6语法的浏览器才能使用）。这种方式需要服务端支持模块加载。

import { example } from './example.js';

上面的代码会从example.js模块中导入example变量。

总的来说，以上三种方式均可用于动态加载Javascript文件，它们各有优缺点。我们需要根据具体情况灵活选择，以最佳方式载入我们需要的Javascript文件，提高网站的性能和效率。