jquery及js实现动态加载js文件的方法

深入 jQuery 与 JavaScript 实现动态加载 JS 文件的方法

在现代 Web 开发中，动态加载 JavaScript 文件已成为一种常见的技术需求。这种方法不仅可以按需加载代码，提高页面加载速度，还能优化应用性能。下面我们将详细介绍如何使用 jQuery 和纯 JavaScript 实现这一功能。

一、基于 jQuery 的动态加载 JS 文件

jQuery 提供了一个简单的方法来实现动态加载 JS 文件，这就是 `$.getScript()` 函数。使用这个函数，你可以轻松地从服务器加载并执行 JavaScript 文件。

示例代码如下：

```javascript

$.getScript("./test.js") // 加载 js 文件

.done(function(){ // 成功加载后执行的回调函数

console.log("JS 文件加载成功");

})

.fail(function(){ // 加载失败时执行的回调函数

console.log("JS 文件加载失败");

});

```

二、基于纯 JavaScript 的动态加载 JS 文件

如果你更倾向于使用纯 JavaScript 而不是 jQuery，下面是一种常见的方法。这种方法创建一个新的 script 元素，设置其 src 属性为你要加载的 JS 文件的 URL，然后将这个元素添加到 HTML 文档中。

示例代码如下：

```html

```

在这个例子中，我们首先创建了一个名为 `loadScript` 的函数，它接受一个 URL 和一个回调函数作为参数。这个函数创建一个新的 script 元素，设置其 src 为传入的 URL，并在文件加载完成后执行回调函数。通过这种方式，我们可以动态地加载并执行任何 JavaScript 文件。这种方法的兼容性较好，可以在大多数现代浏览器和 IE 中使用。