HTML 和 JS 中的 ES9 模块化使用详解-JavaScript中文网-JavaScript教程资源分享门户

ES9（ECMAScript 2018）是 JavaScript 中的一种新版本，其中包含了一些新的语言特性和 API。其中，模块化是一个非常重要的特性。在前端开发中，我们常常需要将代码拆分成多个模块，以便于维护和复用。本文将详细介绍在 HTML 和 JS 中使用 ES9 模块化的方法和技巧。

ES9 模块化简介

ES9 模块化是一种将代码分割成多个模块的技术，每个模块可以独立地编写、测试和维护。模块之间通过导入和导出关键字进行交互。ES9 模块化可以用于浏览器端和 Node.js 等环境中，可以使代码更加模块化、清晰和易于管理。

在 HTML 中使用 ES9 模块化

在 HTML 中使用 ES9 模块化需要使用 type="module" 属性来告诉浏览器该脚本是一个模块。例如：

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

在模块中，我们可以使用 import 关键字来导入其他模块的对象、函数或变量。例如：

import { sum } from './math.js';

console.log(sum(1, 2)); // 输出 3

在导入模块时，我们可以使用相对路径或绝对路径来指定模块的位置。如果导入的模块是一个默认导出的模块，可以使用 import defaultName from './module.js' 的方式来导入。

在模块中，我们还可以使用 export 关键字来导出对象、函数或变量。例如：

export function sum(a, b) {
  return a + b;
}

在导出模块时，我们可以使用 export default 关键字来指定默认导出的内容。例如：

export default function sum(a, b) {
  return a + b;
}

在导出模块时，我们还可以使用命名导出和默认导出混合的方式。例如：

function sum(a, b) {
  return a + b;
}

export { sum as add };
export default sum;

在 JS 中使用 ES9 模块化

在 JS 中使用 ES9 模块化需要使用 import 和 export 关键字。例如：

import { sum } from './math.js';

console.log(sum(1, 2)); // 输出 3

export function sum(a, b) {
  return a + b;
}

在 JS 中使用 ES9 模块化的方式和在 HTML 中类似，只是不需要使用 type="module" 属性。在 Node.js 等环境中，可以使用 require 和 module.exports 来实现模块化，但是这里不再详细介绍。

总结

ES9 模块化是一种将代码分割成多个模块的技术，可以使代码更加模块化、清晰和易于管理。在 HTML 和 JS 中，我们可以使用 import 和 export 关键字来实现模块化。在 HTML 中需要使用 type="module" 属性来告诉浏览器该脚本是一个模块。在导入和导出模块时，可以使用相对路径或绝对路径来指定模块的位置。在导出模块时，我们还可以使用命名导出和默认导出混合的方式。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658bd59ceb4cecbf2d11aa9e