ES6模块化

模块化介绍、优势以及产品

优势：

1.防止命名冲突

2.代码复用

3.高维护性

产品：

ES6之前的模块化规范：

1.CommonJS => NodeJS、Browserify

2.AMD => requireJS

3.CMD => seaJS

ES6模块化语法

模块功能主要由两个命令组成，export和import.

export命令用于规定模块的对外接口

import命令用于输入其他模块提供的功能

//m1.js  分别暴露
export let school = 'bilibili';
export function teach(){
    console.log('恭喜你达成在B站上大学成就');
}
//m2.js	统一暴露
let school = 'bilibili';
function teach(){
    console.log('恭喜你达成在B站上大学成就');
}
export {school,teach};
//m3.js 默认暴露
export default {
    school:'bilibili',
    change:function(){
        console.log('我们可以改变你!!');
    }
}
//使用时m3.default.change();

//index.html
<script type="module">
    import * as m1 from "./m1.js"
	console.log(m1);
</script>

ES6引入模块

//1.通用的导入方式
import * as m1 from "./m1.js"
//2.解构赋值形式
import {school,teach} from "./m1.js";
import {default as m3} from "./m3.js";
//当后续导入的数据与之前重复的时候可以使用as来区分
//eg:school as bili

//3.简便形式 针对默认暴露
import m3 from "./m3.js"

ES6引入模块2

//app.js
import * as m1 from "./m1.js"
import * as m2 from "./m2.js"

//index.html
<script src="./app.js" type="module"></script>