ES6模块化实现

最新推荐文章于 2023-02-01 20:21:43 发布

#小蚂蚁

最新推荐文章于 2023-02-01 20:21:43 发布

阅读量204

点赞数 2

分类专栏：学习笔记文章标签： js

本文链接：https://blog.csdn.net/qq_44621891/article/details/109728342

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了ES6模块化的基础知识和语法，包括基本规则、导出与导入的方式。通过示例展示了如何在`aaa.js`和`bbb.js`两个模块间进行数据和函数的导出与导入。强调了每个模块只加载一次的特性，以及局部作用域、export和import的使用。此外，还提到了export default的用法，允许导入者自定义导入名称，并探讨了按需导入和默认导入的概念。

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

ES6模块化
基本规则

1：每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取。一个模块就是一个单例，或者说就是一个对象；
2：每一个模块内声明的变量都是局部变量，不会污染全局作用域；
3：模块内部的变量或者函数可以通过export导出；
4：一个模块可以导入别的模块

语法

 导出：return、exports、ES6->export
 导入：require、ES6->import

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
</body>
</html>

/*aaa.js*/
let name = "張三";
let age = 18;
let flag = true;
if (flag) {
    console.log(name + "-" + age);
}
export {
    name, age, flag
}
export function num(num1, num2) {
    return num1 * num2;
}
export class Person{
    run(name){
        return name+"在奔跑！";
    }
}

/*bbb.js*/
import {name,age,flag} from "./aaa.js";
import {num} from "./aaa.js";
import {Person} from "./aaa.js";

if(flag){
    console.log(name+"-"+age);
}

console.log(num(1,3));

const p1 = new Person();
console.log(p1.run(name));
/*导入所有，起别名aaa*/
import * as aaa from "./aaa.js";

console.log("aaa.name:"+aaa.name);

export default:某些情况下，一个模块中包含某个功能，我们并不想给此功能起名字，而让导入者自己来命名，这是就可以使用export default
注：同一个模块中只可存在一个export default

/*导入所有，起别名aaa*/
import * as aaa from "./aaa.js";

按需导入
默认导入
全部导入

#小蚂蚁

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6模块化实现

ES6模块化基本规则1：每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取。一个模块就是一个单例，或者说就是一个对象；2：每一个模块内声明的变量都是局部变量，不会污染全局作用域；3：模块内部的变量或者函数可以通过export导出；4：一个模块可以导入别的模块语法导出：return、exports、ES6->export 导入：require、ES6->import<
复制链接

扫一扫

专栏目录