ES6新特性--模块化

1.模块化概述

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

2.模块化的好处

   使用模块化有以下的几种优点:

   (1).防止命名冲突

   (2).代码复用

   (3).高维护性

3.ES6之前的模块化规范有:

  (1) CommonJS => NodeJS、Browserify

  (2) AMD => requireJS

  (3) CMD => seaJS

4.模块化相关的语法

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

   其中:

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

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

5.模块化应用示例--暴露数据汇总

(1).基本使用

创建一个名称为test.js的文件，如下所示:

//分别暴露
export let stu = '张三';

export function play() {
	console.log("we can playGame");
}

然后在页面中引入使用

<script type="module">
//模块化的引入
import * as st from "./js/test.js";
console.log(st);
			
</script>

(2).暴露的方式2

let stu = '李四';

function play() {
	console.log("wo should study hard");
}

//暴露方式2
export{stu,play}

 引入使用

<script type="module">
//模块化的引入
import * as st from "./js/test.js";
console.log(st);
			
</script>

(3).暴露方式3.把内容当作是一个对象default来使用

//默认暴露
export default {
	stu:'李四',
	play:function() {
		console.log("wo should study hard");
	}
}

引入使用

<script type="module">
//模块化的引入
import * as st from "./js/test.js";
console.log(st.default.stu);
			
</script>

6.模块化应用示例--引入数据汇总

(1).通用的导入方式

//模块化的引入
import * as st from "./js/test.js";

(2).使用解构赋值的形式来获取

//分别暴露
export let stu = '张三';

export function play() {
	console.log("we can playGame");
}

//使用解构赋值的形式获取
import{stu,play} from "./js/test.js";
console.log(stu);
console.log(play);

(3).使用解构赋值的形式获取默认暴露

export default {
	stu:'李四',
	play:function() {
		console.log("wo should study hard");
	}
}

//注意这里导入的时候需要把默认暴露取一个别名

import {default as stu} from "./js/test.js";
console.log(stu);

(4).简便形式(这里的简便形式是能够针对默认暴露）

import stu from "./js/test.js";