js中外部js如何引入

javascript 中引入外部 js 文件有六种方式：script 标签、defer 属性、async 属性、import() 函数、模块定义和 amd 模块。选择合适的方式取决于需求和浏览器兼容性。

JS 外部 JS 引入方式

在 JavaScript 中，引入外部 JS 文件主要有以下几种方式：

1. script 标签

这是最简单的引入方式，只需在 HTML 文件中添加

<script src="external.js"></script>

2. defer 属性

如果需要延迟执行外部 JS 文件，可以添加 defer 属性：

<script defer src="external.js"></script>

这样，外部 JS 文件将在页面加载完成后才执行。

3. async 属性

async 属性可以异步加载外部 JS 文件，不会阻塞页面渲染：

<script async src="external.js"></script>

4. import()

ES6 中引入了 import() 函数，用于动态加载外部 JS 模块：

import('external.js')
  .then((module) => {
    // 使用模块
  })
  .catch((error) => {
    // 处理错误
  });

5. 模块定义

对于现代浏览器，可以使用 ES6 模块定义来引入外部 JS 文件：

<script type="module" src="external.js"></script>

6. AMD 模块

AMD（Asynchronous Module Definition）规范是一种用于按需加载模块的方法：

require(['external'], function(external) {
  // 使用模块
});

选择合适的引入方式取决于特定需求和浏览器兼容性。对于较新的浏览器，推荐使用 async 属性或模块定义的方式。

以上就是js中外部js如何引入的详细内容，更多请关注其它相关文章！