es6之模块化（module）--绝对能看懂

103 阅读 0 评论 68 点赞

我是靠谱客的博主壮观机器猫，这篇文章主要介绍es6之模块化（module）--绝对能看懂，现在分享给大家，希望可以做个参考。

ES6的模块化的基本规则或特点：

1：每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取。一个模块就是一个单例，或者说就是一个对象；

2：每一个模块内声明的变量都是局部变量，不会污染全局作用域；

3：模块内部的变量或者函数可以通过export导出；

4：一个模块可以导入别的模块

实例
在这里插入图片描述
index.html

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>
    <!-- 声明模块化 type=module -->
    <script type="module" src="./aa.js"></script>
    <script type="module" src="./bb.js"></script>
</body>
</html>

aa.js：导出值

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var flag = true

function sum(num1, num2) {
  return num1 + num2
}

//导出sum方法和flag变量
export {flag,sum}

// 直接导出一个变量
export var num1 = 1000;
export var name = 'wei';

// 导出函数/类
export function mul(num1, num2) {
  return num1 * num2
}

export class Person {
  run() {
    console.log('在奔跑');
  }
}
// 默认导出的
export default function (argument) {
  console.log(argument);
}

bb.js:导入

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

import common,{sum,flag,num1,name as newname,mul,Person} from './aa.js';
common('获取aa模块化中导出的的default的数据');
console.log('获取aa中的sum函数：'+sum(20,30))
console.log('获取aa中 对象导出的flag变量值：'+ flag)
console.log('获取aa中 直接导出num1变量值：'+ num1)
console.log('获取aa中 直接导出name变量值并赋值给newname：'+ newname)
console.log('获取aa中 mul函数：'+ mul(3,4))
console.log('获取aa中 mul函数：'+ Person)
var obj = new Person()
obj.run()