js动态引入的四种方法

JavaScript动态引入外部脚本文件的四种方法如下：

Method 1 - 使用 document.createElement() 动态创建 script 元素并添加到 DOM 中

这是最基本的方法，在 JavaScript 中使用 document.createElement('script') 方法动态创建 script 元素，然后设置其 src 属性为外部 JavaScript 脚本文件的地址，最后将其添加到 head 或 body 标签中。

以下是一个简单的示例：

var script = document.createElement('script');
script.src = 'example.js';
// 添加 script 元素到 head 标签中
document.head.appendChild(script);

其中，example.js 是外部 JavaScript 脚本文件的地址。

Method 2 - 使用 document.write() 方法写入 script 标签

这种方法不常用，但它可以在页面加载时直接向 HTML 文档中写入带有 src 属性的 script 标签。可以使用 document.write() 方法在 HTML 文档中写入 script 标签，然后设置其 src 属性为外部 JavaScript 脚本文件的地址。

document.write('<scr' + 'ipt type="text/javascript" src="example.js"></scr' + 'ipt>');

注意：在使用 document.write() 方法时需要格外注意，如果该方法在页面加载后被调用，则会覆盖整个 HTML 文档，因此必须在页面加载前调用。

Method 3 - 使用 AJAX 技术获取 JavaScript 文件内容，然后将其作为内联脚本添加到 head 或 body 标签中

这种方法通过 AJAX 技术从服务器获取 JavaScript 文件的内容，然后使用 document.createElement('script') 方法动态创建 script 标签，并将 JavaScript 代码作为内联脚本添加到 script 标签中，最后将其添加到 head 或 body 标签中。

以下是一个简单的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.js', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.text = xhr.responseText;
        // 添加 script 元素到 head 标签中
        document.head.appendChild(script);
    }
};
xhr.send(null);

其中，example.js 是外部 JavaScript 脚本文件的地址。

Method 4 - 使用 jQuery 的 $.getScript() 方法获取 JavaScript 文件内容并运行

这种方法需要在页面中引入 jQuery 库，然后使用其提供的 $.getScript() 方法获取 JavaScript 文件的内容，并直接运行其代码。

以下是一个简单的示例：

$.getScript('example.js', function() {
    // example.js 中的代码已经被直接执行了，这里可以做一些后续工作
});

其中，example.js 是外部 JavaScript 脚本文件的地址。

以上四种方法都可以实现在 JavaScript 中动态引入外部脚本文件，但各自的优缺点也是显而易见的。建议根据自己的需求和具体情况选择合适的方法。