这是我参与「第四届青训营 」笔记创作活动的第8天
ES6模块化定义
ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。
回调地狱问题
多层回调函数的相互嵌套,就形成了回调地狱。示例代码如下
// 传统多个文件读取合并
fs.readFile('test1.md', (err, data1) => {
fs.readFile('test2.md', (err, data2) => {
fs.readFile('test3.md', (err, data3) => {
//出现回调地狱问题
const res = data1 + data2 + data3;
console.log(res);
})
})
})
回调地狱的缺点:
- 代码耦合性太强，牵一发而动全身，难以维护
- 大量冗余的代码相互嵌套,代码的可读性变差
解决方法
基于Promise按顺序读取文件的内容,链式调用读取文件
Promise支持链式调用，从而来解决回调地狱的问题。示例代码如下:
import thenFs from "then-fs";
thenFs.readFile('./test1.md', 'utf-8')
.then((r1) => {
console.log(r1);
return thenFs.readFile('./test2.md', 'utf-8')
})
.then((r2) => {
console.log(r2);
return thenFs.readFile('./test3.md', 'utf-8')
})
.then((r3) => {
console.log(r3);
})
原来是在回调函数中处理结果。
现在promise是，异步任务后面通过then方法来回调，结构比较清晰，而且不会出现回调地狱的问题
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
// reject('出粗了')
}, 1000)
})
//调用then方法
// then方法的返回结果也是一个promise对象
// 对象状态由回调函数的执行结果决定
// 1.如果回调函数中返回结果是一个非promise数据,状态为成功，返回值为对象的成功值123
const result = p.then(function (value) {
console.log(value);
// 1.非promise属性，返回为成功
// return 123;
// 2.是promise对象 返回的状态就是then方法返回的状态
// return new Promise((resolve, reject) => {
// // resolve('ok');
// reject('err');
// })
// 3.抛出错误
// throw new Error('出错了！');
// throw '出错啦'
}, function (reason) {
console.warn(reason);
})
console.log(result);
// 链式调用，可以解决回调地狱的问题
p.then(value => {
}).then(value => {
})
同步任务和异步任务
为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类:
1、同步任务(synchronous)
- 非耗时任务,指的是在主线程上排队执行的那些任务
- 只有前一个任务执行完毕, 才能执行后一个任务
2、异步任务(asynchronous)
- 耗时任务,异步任务由JavaScript委托给宿主环境进行执行
- 当异步任务执行完成后，会通知JavaScript主线程执行异步任务的回调函数
个人理解，同步任务可以相当于去银行同一个窗口排队办理普通业务，当一个客户办理普通业务时，需要有别的特殊业务继续办理，则另外进行特殊业务进程的排队，而原普通业务继续执行，等普通业务全部执行完成后再进行特殊业务办理。
总结
ES6可以使JS代码更加简洁易读，同时方便未来的维护与优化。
可以使用更简单的方式编写代码，使得编程更容易。
