模块化（ export、import）

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处

模块化的优势有以下几点：

1）防止命名冲突

2）代码复用

3）高维护性

模块化规范产品

ES6 之前的模块化规范有：

1）CommonJS => NodeJS、Browserify

2）AMD => requireJS

3）CMD => seaJS

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import

• export 命令用于规定模块的对外接口
• import 命令用于输入其他模块提供的功能

export

1. 分别暴露

<script type="module">
    //引入 m1.js 模块内容
    import * as m1 from "./js/m1.js";
    console.log(m1);
</script>

//分别暴露
export let language = 'ES6';
export function teach() {
	console.log("ES6 模块化");
}

2. 统一暴露

<script type="module">
    //引入 m2.js 模块内容
    import * as m2 from "./js/m2.js";
    console.log(m2);
</script>

//统一暴露
let language = 'ES6';
function book() {
	console.log("ECMAScript 6 入门");
}

export {language,book};

3. 默认暴露

<script type="module">
    //引入 m3.js 模块内容
    import * as m3 from "./js/m3.js";
    console.log(m3);
    m3.default.teach();
</script>

//默认暴露
export default {
	book:'名著',
	teach:function(){
		console.log("我们可以学习到很多！！！");
	}
}

import

1. 通用的导入方式

//引入 m1.js 模块内容
import * as m1 from "./js/m1.js";
//引入 m2.js 模块内容
import * as m2 from "./js/m2.js";
//引入 m3.js 模块内容
import * as m3 from "./js/m3.js";

2. 解构赋值形式

<script type="module">
    import {language,teach} from "./js/m1.js";
    import {language as lan,book} from "./js/m2.js";
    console.log(language);
    console.log(teach);
    console.log(lan);
    console.log(book);
</script>

//导入默认暴露
import {default as m3} from "./js/m3.js";
console.log(m3);

3. 简便形式 针对默认暴露

import m3 from "./js/m3.js";
console.log(m3);

浏览器使用 ES6 模块化方式

html代码

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

app.js

//入口文件

//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";

console.log(m1);
console.log(m2);
console.log(m3);