JavaScript 加载 JS354

在 JavaScript 中，加载外部 JavaScript 文件是件非常常见的事情，我们可以通过多种方式实现。接下来，我们将一一介绍这些方式，并提供相关的示例代码供大家参考。

`` 标签

最简单的方法就是使用 `` 标签。`` 标签可以用来加载外部 JavaScript 文件，语法如下：```html

```

例如，要加载 `` 文件，可以这样写：```html

```

需要注意的是，`` 标签会阻塞页面渲染，这意味着 JavaScript 文件将在页面加载完成之前加载。如果您希望在页面加载完成后再加载 JavaScript 文件，可以使用以下方法。

`` 标签的 `defer` 属性

`` 标签提供了一个 `defer` 属性，可以推迟 JavaScript 文件的执行，直到页面加载完成。语法如下：```html

```

使用 `defer` 属性加载 `` 文件：```html

```

`` 标签的 `async` 属性

`` 标签还提供了一个 `async` 属性，可以异步加载 JavaScript 文件，这意味着 JavaScript 文件可以在页面加载的同时加载，而不会阻塞页面渲染。语法如下：```html

```

使用 `async` 属性加载 `` 文件：```html

```

需要注意的是，`async` 属性和 `defer` 属性不能同时使用。

`` 标签

`` 标签也可以用来加载 JavaScript 文件，语法如下：```html

```

例如，使用 `` 标签加载 `` 文件：```html

```

`` 标签的 `rel` 属性指定了加载资源的类型，`href` 属性指定了资源的 URL，`as` 属性指定了资源的类型，这里指定为 `script`。

`fetch()` 方法

`fetch()` 方法可以用来异步加载 JavaScript 文件，语法如下：```javascript
fetch("path/to/").then(response => ()).then(text => {
// 加载成功的回调函数
// 将 text 作为参数传递
});
```

使用 `fetch()` 方法加载 `` 文件：```javascript
fetch("").then(response => ()).then(text => {
// 加载成功的回调函数
// 将 text 作为参数传递
});
```

`fetch()` 方法返回一个 Promise 对象，我们可以使用 `.then()` 方法来处理响应。在成功的回调函数中，我们可以将 JavaScript 代码作为参数传递，并使用 `eval()` 函数执行它。例如：```javascript
fetch("").then(response => ()).then(text => {
eval(text);
});
```

需要注意的是，使用 `fetch()` 方法加载 JavaScript 文件时，需要手动执行它。另外，`fetch()` 方法支持跨域请求，而 `` 标签不支持跨域请求。

以上就是 JavaScript 中加载外部 JavaScript 文件的不同方法。每种方法都有其优缺点，开发者可以根据自己的需求选择合适的方法。一般来说，如果需要在页面加载完成前加载 JavaScript 文件，可以使用 `` 标签。如果需要在页面加载完成后再加载 JavaScript 文件，可以使用 `` 标签的 `defer` 属性或 `` 标签。如果需要跨域加载 JavaScript 文件，可以使用 `fetch()` 方法。

2025-01-19

上一篇：JavaScript 垃圾回收机制深入浅出

下一篇：JavaScript 字体设置：提升网络文本的视觉体验