一.模块化
1.耦合
高耦合---牵一发而动全身
低耦合---关联性相对低
二.模块化写法
1. 一个js文件就是一个模块
2. 模块中的变量是不会被外界所访问到的
3. 导出数据需要用export命令，export导出数据的时候要加花括号
let a = 123;
let b = 456;
export{a,b};
4. 用import命令可以导入其他模块中的数据
import {a,b} from './b.js';
console.log(a);
console.log(b);
5.引入有模块化语法的js文件的时候，需要在script标签中加上type='module'属性
<script type = "module" src = "a.js"></script>
三.别名
1.可以用as关键字起别名
- import{xxx as xxx} from 'xxx';更改新的名字后，旧名就不好使了
- 如下例中，将引入的num变量改名为cele
-->a.js文件
let num = 123;
export{num};
-->b.js文件
import {num as cele} from './a.js';
console.log(cele);
//输出123
-->index.html文件
<script type = "module" src = "b.js"></script>
四.export default命令
1.接收export default命令导出的数据，可以直接重命名引入，引入的名字就是该变量的新别名
- export default命令，最多只能导出一个数据。（不影响其他数据导入导出）
- 如下例，直接将num改名为aaa引入
-->a.js文件
let num = 123;
let foo = x => x*x;
let url = 'www.baidu.com';
export default num;
export {url, foo};
-->b.js文件
import aaa,{foo, url} from './a.js';
console.log(aaa);
//输出123
-->index.html文件
<script type = "module" src = "b.js"></script>
五.导出数据特点
1.export语句输出的接口，与其对应的值是动态绑定关系。通过该接口，可以取到模块内部的实时数据。
- 导出的不是具体数据，而是变量数据对应的储存地址
-->a.js文件
let num = 123;
setTimeout(()=>{
num = 456;
},2000);
export{num};
-->b.js文件
import {num} from './a.js';
console.log(num);
//输出123
setTimeout(()=>{
console.log(num);
},4000);
//输出456
-->index.html文件
<script type = "module" src = "b.js"></script>
