JavaScript 学习笔记【Modules模块化编程】_后盾人代码 js模块化开发-CSDN博客

本文深入探讨JavaScript模块化编程的核心概念与实践技巧，包括模块的特性、导出与导入方式，以及动态导入的实现。通过具体示例，读者将学会如何在HTML中声明模块，理解预解析、独立作用域等特性，并掌握具名、默认及混合导入的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 学习笔记【Modules模块化编程】

模块特性
使用模块
- 1. HTML
- 2. xxx.js
export 模块导出
import 模块导入
动态导入
参考资料

模块特性

模块会自动延迟加载。总是会在所有html解析后才执行。
模块都有独立的顶级作用域，各模块不能互相访问。
预解析：模块只在导入时执行一次解析。
模块自动使用严格模式。

使用模块

1. HTML

HTML中使用 type="module" 来声明此脚本是一个模块

<script type="module">
	。。。
</script>

2. xxx.js

一个js文件就可以当成一个模块

export 模块导出

export要放在最外层

测试用模块：test.js

const name = "笨笨";
const hi = function() {
  console.log("大家好，我是笨笨，笨笨的笨，笨笨的笨，谢谢！");
};
class Echo{
  static send(msg) {
    console.log(msg);
  }
}
export { name, hi, Echo as default };

导出方式	name	hi	Echo
具名导出	是	是	否
匿名导出	否	否	是

import 模块导入

html与js在同一目录下，浏览器中地址需要加./

默认导入

默认导入不需要花括号。（default导出的）

import foo from "./test.js";
foo.send("喂！！！有人吗？");

具名导入

导入时也可以使用as定义别名。

import { name, hi as hello } from "./test.js";
hello();
console.log('你好：' + name);

混合导入

import foo from "./test.js";
import { name, hi as hello } from "./test.js";

foo.send("喂！！！有人吗？");
hello();
foo.send('你好：' + name);

全部导入

import * as api from './test.js';

api.default.send("喂！！！有人吗？");
api.hi();
api.default.send('你好：' + api.name);

动态导入

这种是静态导入：import foo from "./test.js";
可用import()函数实现动态导入模块，返回一个 promise 对象。

import('./test.js')
.then(module => {
   console.log(module.name);
});

参考资料

MDN JavaScript modules 模块
 MDN import 模块导入
 MDN export 模块导出
 后盾人视频教程 —— 第十三章来来来！掌握JS模块化开发，编写高可用代码
 后盾人文档 —— JavaScript 模块化