ES6模块化&ES8 async和await

ES6模块化

将一个人大的程序文件拆分成许多小的文件，然后将小文件组合起来

好处

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

规范产品

1. CommonJS => NodeJS、Browserify
2. AMD => requireJS
3. CMD => seaJS

语法

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

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

暴露数据方式：
分别暴露

export let name = "Tome"
export function learn () {
	console.log("xixi");
}

统一暴露

let name = "Tome"
function learn () {
	console.log("xixi");
}
export {name,learn}

默认暴露

export default {
	//里面写要暴露的数据
	name:"Tome"
	learn: function () {
		console.log("xixi");
	}
}

引入数据：
通用引入：

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

解构赋值形式

import {name, learn} from "./src/js/m1.js"
import {name as n} from "./src/js/m2.js"
import {default as m} from "./src/js/m3.js"

简便形式：只能针对默认暴露

import m3 from "./src/js/m3.js"

入口文件

一直在script标签中去引入模块，会导致代码体积很大。我们可以把引入放入单独的文件中。创建app.js作为js代码的入口。
app.js:

import m3 from "./src/js/m3.js"

在使用的时候，引入app.js即可

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

Babel

实际项目中考虑兼容性的问题不会用上述方法引入，而是使用另外一种方式——Babel。
Babel可以将比较新的es语法转化为浏览器容易识别的es5语法。

1. 安装工具，使用npm安装
   babel-cli babel的命令行工具
   babel-preset-env 预设包
   browserify(或者webpack) 打包工具

npm i babel-cli babel-preset-env browserify -D

2. 转换

npx babel src/js -d dist/js --presets=babel-preset-env

3. 打包

npx browserify dist/js/app.s -o dist/bundle.js

ES8 async和await

async和await结合可以让异步代码像同步代码一样。

async

1. 返回值为promise对象
2. promise对象的结果由async函数执行的返回值决定

async function fn() {
	//返回的结果只要不是一个promise对象，返回的结果就是一个成功Promise对象
	//抛出错误，返回结果是一个失败的Promise
	//返回结果如果是一个Promise对象（这种情况居多）
	return new Promise((resolve,reject) => {
		resolve('成功的数据');
		//reject('失败的错误');//内部失败外部也失败
	});
	//调用resolve之后，内部的promise就是一个成功的promise，
	//那么外部的promise返回的结果也是成功的，并且返回值就是内部的返回值
}
	const result = fn();
	result.then(value => {
		console.log(value);
	},reason => {
		console.log(reason);
	})

await

1. await必须写在async函数中
2. await右侧的表达式一般为promise对象
3. await返回的是promise成功的值
4. await的promise失败了，就会抛出异常，需要通过try catch捕获处理