es6之模块化（module）--绝对能看懂
ES6的模块化的基本规则或特点：
1：每一个模块只加载一次， 每一个JS只执行一次， 如果下次再去加载同目录下同文件，直接从内存中读取。 一个模块就是一个单例，或者说就是一个对象；
2：每一个模块内声明的变量都是局部变量， 不会污染全局作用域；
3：模块内部的变量或者函数可以通过export导出；
4：一个模块可以导入别的模块
实例
index.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>
<!-- 声明模块化 type=module -->
<script type="module" src="./aa.js"></script>
<script type="module" src="./bb.js"></script>
</body>
</html>
aa.js：导出值
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:导入
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()
