es6中的模块化

1、模块化

说明：模块化是指将一个很大的程序文件，拆分为许多个小的文件，然后将多个小文件组合起来
（1）模块化的好处：

① 阻止命名冲突； ② 代码复用； ③ 高维护性

（2）ES6 模块化语法：

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

（3）export 暴露方式，3种：

1、第一种暴露方式：分别暴露

	// 1. 分别暴露, m1.js, m1.js
	export let school = 'gc';

	export function teach() {
    	console.log("m1--我们可以教给你很多东西！");
	};

2、第二种暴露方式：统一暴露, m2.js

	// 2. 统一暴露, m2.js
	let school = 'gc';

	function findJob() {
    	console.log("m2---我们可以帮助你找工作!!");
	};

	export {school, findJob};

3、第三种暴露方式：默认暴露, m3.js

	// 3. 默认暴露, m3.js
	export default {
    	school: 'ATLUCA',
    	change: function(){
        	console.log("m3---我们可以改变你!!");
    	}
	}

（4）import 导入方式，3种

1、第一种导入方式：通用的导入方式

	// 1. 通用的导入方式
	// 引入 m1.js 模块内容
	import * as _m1 from "js/m1.js";
	_m1.teach();
	// 引入 m2.js 模块内容
	import * as _m2 from "js/m2.js";
	_m2.findJob();
	console.log(_m2.school);
	// 引入 m3.js
	import * as _m3 from "js/m3.js";
	console.log(_m3);
	_m3.default.change();

2、第二种导入方式：解构赋值形式

	// 2. 解构赋值形式
	// 引入 m1.js 模块内容
	import {school, teach} from "js/m1.js";
	console.log(school);
	// 引入 m2.js 模块内容
	// (1)如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，
	// (2)为了解决该问题， ES6为提供了重命名的方法。
	// (3)此处的school与m1.js的命名相同，所以此处的school改为gc
	import {school as gc, findJob} from "js/m2.js";
	console.log(findJob);
	// 引入 m3.js 模块内容
	import {default as _m3} from "js/m3.js";
	console.log(_m3);

3、第三种导入方式：简便形式, 只针对于默认暴露

	// 3. 简便形式, 只针对于默认暴露
	import _m3 from "js/m3.js";
	console.log(_m3);