Vue2.0和3.0(一)

一.前端模块化

1.1分类

ES6诞生以前，js社区提出了AMD、CMD、CommonJS等模块规范。由于这些模块化标准存在

一定的差异性与局限性，不是浏览器与服务器通用的模块化标准。

● AMD和CMD适用于浏览器

● CommonJS适用于服务端

ES6模块化规范是浏览器端与服务器端通用的模块化规范。

1.2ES6中模块化规范中定义

● 每个js文件都是一个独立的模块

● 导入其它模块使用import关键字

● 向外共享模块使用export关键字

在node中体验ES6模块化，在package.json中的根节点中添加"type":"module"节点。

1.3ES6模块化的基本语法

1）默认导出与默认导入

• 默认导出：

export default 默认导出的成员

每个模块只能使用唯一的一次export default，否则会报错。

• 默认导入：

import 接收名称 from ‘模块标识符’（模块标识符：导入模块的路径）
接收名称可以任意名称，只要合法的成员名即可。

2） 按需导出与按需导入

• 按需导出：export 按需导出的成员
• 按需导入：

import {需导入的名称} from ‘模块标识符’
①每个模块中可以使用多次按需导出
②按需导入的成员名称必须和按需导入的成员名称保持一致
③按需导入时，可以使用as关键字进行重命名
④按需导入可以和默认导入（export default）一起使用

3）直接导入并执行模块中的代码

• 直接导入：import ‘模块标识符’

二.回调地狱和Promise

2.1回调地狱

1.定义：多层回调函数的相互嵌套。

2.缺点：

● 代码耦合性太强，牵一发而动全身，难以维护

● 大量冗余的代码相互嵌套，代码的可读性变差

3.解决：Promise

2.2Promise

1）Promise是一个构造函数

• 通过new来创建Promise实例
• new出来的Promise实例对象，代表一个异步操作

2）Promise.prototype上包含一个.then()方法

• 每一次new Promise()构造函数得到的实例对象
• 都可以通过原型链的方式访问到.then()方法

3）then()方法用来预先指定成功和失败的回调函数

• p.then(成功的回调函数,失败的回调函数)
• 调用.then()方法时，成功的回调函数必选，失败可选

2.2.1基于then-fs读取文件内容

由于node.js官方提供defs模块仅支持以回调函数的方式读取文件，不支持Promise的调用方

式。因此需要借助第三包then-fs。

2.2.1.1then-fs基本使用

● 调用then-fs提供的readFile()方法，它的返回值时Promise的实例对象。

import thenFs from 'then-fs'
thenFs.readFile('./filse/a.txt','utf-8').then((r1)=>{
  console.log(r1)
})
thenFs.readFile('./filse/b.txt','utf-8').then((r2)=>{
  console.log(r2)
})
thenFs.readFile('./filse/c.txt','utf-8').then((r3)=>{
  console.log(r3)
})
// 以上代码无法保证文件的读取顺序

● 如果上一个.then()方法中返回一个新的Promise实例对象，则可以通过下一个.then()继续进行

处理。通过.then()方法的链式调用。

thenFs.readFile('./filse/a.txt','utf-8').then((r1)=>{
  console.log(r1)
  return thenFs.readFile('./filse/b.txt','utf-8')
})
.then((r2)=>{
  console.log(r2)
  return thenFs.readFile('./filse/c.txt','utf-8')
})
.then((r3)=>{
  console.log(r3)
})

2.2.2.2通过.catch捕获错误

在Promise的链式操作中如果发生了错误，可以使用Promise.prototype.catch()方法及逆行捕获

和处理。

thenFs.readFile('./filse/a.txt','utf-8').then((r1)=>{
  console.log(r1)
  return thenFs.readFile('./filse/b.txt','utf-8')
})
.then((r2)=>{
  console.log(r2)
  return thenFs.readFile('./filse/c.txt','utf-8')
})
.then((r3)=>{
  console.log(r3)
})
  //catch放在最后可以捕获前面所有的错误 
.catch((err)=>{
  console.log(err)
})

如果不希望.catch()不影响后续的.then()，可以将.catch()提前。

2.2.2Promise.all()方法

Promise.all()方法会发起并行的Promise异步操作，等所有的异步操作全部结束后才会执行下一

步的.then操作(等待机制)。

注意：promise数组的顺序即是最后执行结果的顺序。

const promiseArr = [
  thenFs.readFile('./filse/a.txt','utf-8')
  thenFs.readFile('./filse/b.txt','utf-8')
  thenFs.readFile('./filse/c.txt','utf-8')
]
Promise.all(promiseArr).then?(result =>{
console.log(result)
})

2.2.3Promise.race()方法

promise.race()方法会发起并行的Promise异步操作，只要任何一个异步操作完成，就立即执行

下一步的.then操作。