ES6模块化

JAY.LIN 收录于网页 Javascript

2025-03-12 约 490 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=146217583

【ES6】模块化

概述

模块功能主要有两个命令， export 和 import 。

一个js文件就是一个模块。

参考视频

【一小时速通JavaScript模块化，涵盖CommonJS与ES6模块化-哔哩哔哩】

导出成员

在正常变量、函数前加 export 关键字。

导入模块

在另一个模块中导入

万能导入

import * as xxx from "xxx.js"

在HTML页面导入

<script type="module" src="">

模块化的优点

防止命名冲突，每个模块都有自己的命名空间

代码复用，每个模块可以被其他多个模块引用
高维护性，修改一个模块其他引用该模块的地方都改变
确保引入顺序的正确性，使用模块化之后一般都是在自己的中引入所依赖的模块，所以避免了依赖顺序的引入问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Point.js"></script>
</head>
<body>
    
</body>
    <script src="run.js"></script>
</html>

引入 Point.js ，再在 run.js 中创建实例和执行其他代码。

而通过模块化，可以直接在 run.js 中导入和使用 Point.js 中定义的类。

import {Point,ColorPoint} from "./Point.js";

let cp = new ColorPoint(100,100,"red");

console.log(cp);

HTML代码也就可以简化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
    <script type="module" src="run.js"></script>
</html>

需要注意的是，模块功能貌似需要服务器，可以使用Live Server插件，以本地静态服务器形式运行网页。