12【module的语法】

最新推荐文章于 2023-03-15 11:28:49 发布

DSelegent

最新推荐文章于 2023-03-15 11:28:49 发布

阅读量471

点赞数

分类专栏： ES6学习笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/DSelegent/article/details/126558676

版权

本文详细介绍了JavaScript的Module语法，包括模块的基本概念、Module的导入导出方式，如export default和export，以及import()的动态加载模块。通过实例解析了export与import的复合写法，并探讨了import()的适用场景和注意事项。

摘要由CSDN通过智能技术生成

module的语法

1.初识Module

（1）什么是模块

模块：一个一个的局部作用域的代码块。

（2）什么是模块系统

模块系统：系统的解决了模块化一系列问题。

模块化的写法（之前我们用立即执行函数模拟模块化，ES6 则实现了针对模块化的语法）
消除全局变量（模块中的变量都是局部的，不同模块之间不会相互干扰，可以通过特定语法暴露指定内容）
管理加载顺序（之前我们将一个总的 JavaScript 程序分几个文件写，但在最终合并调用时，js 的引入需要满足前后依赖关系。比如：被引用的 js 文件就一定要在引用它的 js 文件之前加载）

2.Module的基本用法

注意：Module 要生效，必须在服务器环境下才能执行。

普通的 HTML、JS 是本地文件环境，地址以 file 协议开头，服务器则以 http 或 https 开头。

方法：VSCode 中使用 Live Server 拓展，WebStorm 默认就是服务器环境。

一个 JS 文件就是一个模块
用 import 关键字导入模块
用 export 关键字导出模块需要暴露的部分
在使用 script 标签加载的时候，需要加上 type=“module”，否则就以普通 JS 文件的形式引入了，就不是模块了

3.Module的导入导出

导出的东西可以被导入（import），并访问到！

对于导入和导出有两种方法：

export default 导出，import 导入

export 导出，import 导入

3.1 export default 导出和对应的 import 导入

（1）一个模块没有导出，是否可以将其导入？

<!-- 一个模块没有导出，也可以将其导入 -->
<!-- 被导入的模块的代码都会执行一遍，并且同一个模块的导入只执行一遍！ -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Module</title>
</head>
<body>
<!-- script 标签需要加上 type="module" -->
<script type="module">
    import "./test.js";		// 浏览器控制台打印：test
    import "./test.js";		// 不执行
    import "./test.js";		// 不执行
    import "./test02.js";	// 浏览器控制台打印：test02
    import "./test.js";		// 不执行
    import "./test02.js";	// 不执行
</script>
</body>
</html>

----------------------------------------------------
<!-- test.js -->

console.log("test");

----------------------------------------------------
<!-- test02.js -->

console.log("test02");

（2）一个模块中只能有一个 export default。

【module.js】

// 模块中的变量都是局部的
const age = 18;
const sex = "male";

export default age;			// 通过 export default 导出（暴露）一个值
// export default sex;		// 报错！因为 export default 只能在一个文件中导出一次！！！

/*
export default 24;				// 可以导出值
export default {};				// 可以导出对象
export default function(){};	 // 可以导出函数
export default class{};			 // 可以导出class
*/

【index.html】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Module</title>
</head>
<body>
<!-- script 标签需要加上 type="module" -->
<script type="module">
    // import 之后跟一个模块的别名，推荐别名与导出时的名字相同，比如这里就用 age
    import age from "./module.js";
    console.log(age);	// 18
</script