模块化（Modules）

作用

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

优点：

• 1、防止命名冲突刻
• 2、代码复用
• 3、高维护性

ES6之前的模块化有：

• 1、CommonJS => NodeJS、Browserify

• 2、AMD => requireJS

• 3、CMD => seaJS

ES6模块化语法

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

export：规定模块的对外接口

import：输入其他模块提供的功能

// 1.js
export let name = 'squid-Xu';

// index.html
<script type="module">
    import * as m1 from './1.js';
    console.log(m1); // Module {Symbol(Symbol.toStringTag): 'Module'}
</script>

暴露方法汇总

• 1、分别暴露

// 1.js
export let name = 'squid-Xu';

export function change() {
	console.log('111');
}

// index.html
<script type="module">
    import * as m1 from './1.js';
    console.log(m1); //Module {Symbol(Symbol.toStringTag): 'Module'}
</script>

• 2、统一暴漏

// 1.js
let name = 'squid-Xu';

function change() {
	console.log('111');
}

export { name, change };

// index.html
<script type="module">
    import { name, change } from './1.js';
</script>

• 3、默认暴漏

// 1.js
let name = 'squid-Xu';

function change() {
	console.log('111');
}

export default {
	name,
	change,
};

// index.html
<script type="module">
    import m1 from './1.js';
    console.log(m1); // {name: 'squid-Xu', change: ƒ}
</script>