ES6 模块化（一）

一.模块化

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>