careteenl / blog Goto Github PK

Node读取文件

现在有一个场景，读取两个文件内容，赋值给一个对象，并打印。

在./static下新建了两个文件name.txt,age.txt，期望读取文件内容并赋值给一个对象，然后打印。

const fs = require('fs')

let schoolInfo = {}

fs.readFile('./static/name.txt', 'utf8', (err,data) => {
  schoolInfo['name'] = data
})
fs.readFile('./static/age.txt', 'utf8', (err, data) => {
  schoolInfo['age'] = data
})
console.log(schoolInfo) // {}

由于读取文件的过程是异步的，所以通过这种方式是无法满足预期的。

并且异步操作存在以下三个问题

1、异步没法捕获错误
2、异步编程中，可能存在回调地狱
3、多个异步操作，在同一时间内，如何同步异步的结果？

回调地狱大家应该非常熟悉了。

const fs = require('fs')

let schoolInfo = {}
fs.readFile('./static/name.txt', 'utf8', (err,data) => {
  schoolInfo['name'] = data
  fs.readFile('./static/age.txt', 'utf8', (err, data) => {
    schoolInfo['age'] = data
  })  
})

本例地址

并且两个文件读取时间是累加，不是并行的，如果文件很多并且很大，那等待时间将非常久，所以并不推荐。

这里针对第三个问题多个异步操作，在同一时间内，如何同步异步的结果？，可以采用发布订阅的方式解决

// 一个简易的方法订阅对象
let dep = {
  arr: [],
  emit () {
    this.arr.forEach((fn) => {
      fn()
    })
  },
  on (fn) {
    this.arr.push(fn)
  }
}

不了解发布订阅模式的请移步我的另一篇博客

通过以下操作即可达到预期

let schoolInfo = {}
const fs = require('fs')

// 一个简易的方法订阅对象
let dep = {
  arr: [],
  emit () {
    this.arr.forEach((fn) => {
      fn()
    })
  },
  on (fn) {
    this.arr.push(fn)
  }
}

// 订阅
dep.on(() => {
  // ��只有读取了两个文件的内容并赋值以后才会打印
  if (Object.keys(schoolInfo).length === 2){
    console.log(schoolInfo)
  }
})

// 读取触发
fs.readFile('./static/name.txt', 'utf8', (err, data) => {
  schoolInfo['name'] = data
  dep.emit()
})
fs.readFile('./static/age.txt', 'utf8', (err, data) => {
  schoolInfo['age'] = data
  dep.emit()
})

在每次读取文件时触发打印事件，事件中进行判断只有两次读取都完成的情况下才会打印。

以上方法看似解决了上面提到的第三个问题多个异步操作，在同一时间内，同步异步的结果，但是随着需求的变动，需要再读取一个address文件，就需作如下变动：

...
// 订阅
dep.on(() => {
  // ��只有读取了两个文件的内容并赋值以后才会打印
  if (Object.keys(schoolInfo).length === 3){ // 2改为3
    console.log(schoolInfo)
  }
})
...
// 新增一项adress
fs.readFile('./static/adress.txt', 'utf8', (err, data) => {
  schoolInfo['adress'] = data 
  dep.emit()
})

再新增多项的话，代码的扩展性就非常差了。

下面将将介绍如何实现一个promise然后解决上面提到的问题

node读取文件代码地址

为什么要用promise

那么接下来介绍promise的出现所解决的问题

回调地狱，如果多个异步请求，有连带关系，回调嵌套
多个异步实现并发的话，会出现无法同步异步的返回结果
错误处理不方便

promise用法

不跟你多BB

手摸手带你撸一个promise

首先需要提到promise/A+规范，我们自己编写的promise是需要一个标准的。可以根据此标准一步一步来。

需要三个状态

const PENDING = 'pending' // 等待态
const FULFILLED = 'fulfilled' // 成功态
const REJECTED = 'rejected' // 失败态

当状态为pending时
- 可能转换为fulfilled或rejected
当状态为fulfilled或rejected时
- 不能转为其他状态
- 必须有一个value或reason且不能改变

面试点：promise的三个状态之间的关系？

then方法

更详细请移步文档，这里说几个重点

处理executor函数中代码异常的情况
处理executor函数中代码为异步的情况
处理then的多次调用
处理then的链式调用

处理executor函数中代码异常的情况

对executortry-catch即可

class Promise {
  constructor(executor) {
    let self = this
    self.status = PENDING
    self.value = undefined
    self.reason = undefined    

    const resolve = (value) => {
      if(self.status === PENDING){
        self.value = value
        self.status = FULFILLED
      }      
    }

    const reject = (reason) => {
      if(self.status === PENDING){
        self.reason = reason
        self.status = REJECTED
      }      
    }

    try{
      executor(resolve, reject) // 如果执行这个executor执行时候抛出异常 应该走下一个then的失败
    }catch(e){
      reject(e)// 出错了 reason就是错误
    }    
  }

  then (onFulfilled, onRejected) {
    if (this.status === FULFILLED){
      onFulfilled(this.value)
    }
    if (this.status === REJECTED){
      onRejected(this.reason)
    }    
  }
}

如下使用

let Promise = require('./3.1.promise.js')

let p = new Promise((resolve,reject) => {
  resolve('xx')
})

p.then((data) => {
  console.log('p success',data)
}, (err) => {
  console.log(err)
})
// => p success xx

简易版1.0.0地址以及测试用例地址

虽然实现了一个很简易的promise，但还存在很多问题，比如下面

let Promise = require('./3.1.promise.js')
let p2 = new Promise((resolve,reject) => {
  setTimeout(() => {
    resolve('xxx')
  }, 1000)
})

p2.then((data) => {
  console.log('p2 success',data)
}, (err) => {
  console.log(err)
})
// => p success xx
//    p second success xx

对于异步的代码是不会处理的

处理executor函数中代码为异步的情况

使用发布订阅模式的**处理

class Promise {
  constructor(executor) {
    let self = this
    self.status = PENDING
    self.value = undefined
    self.reason = undefined
    self.onResolvedCallbacks = [] // 新增 一个数组存放成功处理
    self.onRejectedCallbacks = [] // 新增 一个数组存放失败处理

    const resolve = (value) => {
      if(self.status === PENDING){
        self.value = value
        self.status = FULFILLED
        self.onResolvedCallbacks.forEach((fn) => { // 新增 触发时遍历所有
          fn()
        })     
      }      
    }

    const reject = (reason) => {
      if(self.status === PENDING){
        self.reason = reason
        self.status = REJECTED
        self.onRejectedCallbacks.forEach((fn) => { // 新增 触发时遍历所有
          fn()
        })        
      }      
    }

    try{
      executor(resolve, reject) // 如果执行这个executor执行时候抛出异常 应该走下一个then的失败
    }catch(e){
      reject(e)// 出错了 reason就是错误
    }    
  }

  then (onFulfilled, onRejected) {
    if (this.status === FULFILLED){
      onFulfilled(this.value)
    }
    if (this.status === REJECTED){
      onRejected(this.reason)
    }    
    if( this.status === PENDING){ // 新增 处理异步
      // 默认当前 new Promise  executor中是有异步的
      this.onResolvedCallbacks.push(() => {
        onFulfilled(this.value)
      });
      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason)
      })
    }    
  }
}

使用

let Promise = require('./3.2.promise.js')

let p = new Promise((resolve,reject) => {
  setTimeout(() => {
    resolve('xxx')
  }, 1000)
})

p.then((data) => {
  console.log('p success',data)
}, (err) => {
  console.log(err)
})

p.then((data) => {
  console.log('p second success',data)
}, (err) => {
  console.log(err)
})
// 一秒以后打印
// => p success xxx
//    p second success xxx

简易版1.0.1地址以及测试用例地址

处理then的链式调用

和jQuery的链式调用一个套路，不过在这儿需要返回一个新的promise而不是当前，因为成功态和失败态是不能转为其他状态的

class Promise {
  constructor(executor) {
    let self = this
    self.status = PENDING
    self.value = undefined
    self.reason = undefined
    self.onResolvedCallbacks = []
    self.onRejectedCallbacks = []  

    const resolve = (value) => {
      if(self.status === PENDING){
        self.value = value
        self.status = FULFILLED
        self.onResolvedCallbacks.forEach((fn) => {
          fn()
        })     
      }      
    }

    const reject = (reason) => {
      if(self.status === PENDING){
        self.reason = reason
        self.status = REJECTED
        self.onRejectedCallbacks.forEach((fn) => {
          fn()
        })        
      }      
    }

    try{
      executor(resolve, reject) // 如果执行这个executor执行时候抛出异常 应该走下一个then的失败
    }catch(e){
      reject(e)// 出错了 reason就是错误
    }    
  }

  then (onFulfilled, onRejected) {
    let self = this
    let promise2 // 这个promise2 就是我们每次调用then后返回的新的promise
    // 实现链式调用主要的靠的就是这个promise
    promise2 = new Promise((resolve, reject) => {
      if (self.status === FULFILLED) {
        setTimeout(() => {
          try {
            // 这个返回值是成功函数的执行结果
            let x = onFulfilled(self.value)
            // 判断promise2 和 x 也是then函数返回的结果和promise2的关系 如果x 是普通值 那就让promise2成功 如果 是一个失败的promise那就让promise2 失败
            self._resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      }

      if (self.status === REJECTED) {
        setTimeout(() => {
          try {
            // 这个返回值是失败函数的执行结果
            let x = onRejected(self.reason)
            // 判断promise2 和 x 也是then函数返回的结果和promise2的关系 如果x 是普通值 那就让promise2成功 如果 是一个失败的promise那就让promise2 失败
            self._resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e)
          }
        }, 0)
      }   
      
      if (self.status === PENDING) {
        // 默认当前 new Promise  executor中是有异步的
        self.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulfilled(self.value)
              self._resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)          
        });
        self.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(self.reason)
              self._resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0)          
        })
      }       
    })
    return promise2
  }

  // 内部核心方法 处理 成功或者失败执行的返回值 和promise2的关系
  _resolvePromise (promise2, x, resolve, reject) {
    // 这个处理函数 需要处理的逻辑韩式很复杂的
    // 有可能这个x 是一个promise  但是这个promise并不是我自己的
    resolve(x) // 目前只做一个简单处理
  }
}

使用

let Promise = require('./3.3.promise.js')

let p = new Promise((resolve,reject) => {
  setTimeout(() => {
    resolve('xxx')
  }, 1000)
})

// promise 中 每次调用then 都应该返回一个新的promise 
// promise的实例只能成功或者失败  不能既成功又失败
p.then((data) => {
  console.log('p success', data)
}, (err) => {
  console.log(err)
}).then((data) => {
  console.log('success then', data)
}, (err) => {
  console.log(err)
})
// 一秒以后打印
// => p success xxx
//    success then undefined

简易版1.0.2地址以及测试用例地址

面试点：如何实现promise的链式调用？

如代码中只是简单处理_resolvePromise方法

完善_resolvePromise

再移步规范文档处理_resolvePromise

需要考虑以下几种情况

_resolvePromise (promise2, x, resolve, reject)

x为一个普通值
x为promise2时会导致循环调用
x为一个对象或者函数
- x为一个promise

考虑以上进行完善

  // 内部核心方法 处理 成功或者失败执行的返回值 和promise2的关系
  _resolvePromise (promise2, x, resolve, reject) {
    // 这个处理函数 需要处理的逻辑韩式很复杂的
    // 有可能这个x 是一个promise  但是这个promise并不是我自己的
    if (promise2 === x) {
      return reject(new TypeError('Chaining cycle detected for promise '))
    }
    // 不单单需要考虑自己 还要考虑 有可能是别人的promise
    let called // 文档要求 一旦成功了 不能调用失败
    if ((x !== null && typeof x === 'object') || typeof x === 'function') {
      // 这样只能说 x 可能是一个promise
      try {
        // x = {then:function(){}}
        let then = x.then // 取then方法
        if (typeof then === 'function') {
          then.call(x, y => { // resolve(new Promise)
            if (called) return
            called = true
            resolvePromise(promise2, y, resolve, reject) //  递归检查promise
          }, reason => {
            if (called) return
            called = true
            reject(reason)
          })
        } else { // then方法不存在
          resolve(x); // 普通值
        }
      } catch (e) { // 如果取then方法出错了，就走失败
        if (called) return
        called = true
        reject(e)
      }
    } else { // 普通值
      resolve(x)
    }
  }

使用

let Promise = require('./3.4.promise.js')

// 普通返回值
let p = new Promise((resolve,reject) => {
  setTimeout(() => {
    resolve('xxx')
  }, 1000)
})
p.then((data) => {
  console.log(`p success ${data}`)
  return 'first result'
}, (err) => {
  console.log(err)
}).then((data) => {
  console.log(`p success then ${data}`)
}, (err) => {
  console.log(`p error ${err}`)
})
// 一秒以后打印
// => p success xxx
//    p success then first result

// 抛错
let p2 = new Promise((resolve,reject) => {
  setTimeout(() => {
    resolve('p2 xxx')
  }, 1000)
})
p2.then((data) => {
  throw new Error('just happy')
}, (err) => {
  console.log(err)
}).then((data) => {
  console.log(`p2 success then ${data}`)
}, (err) => {
  console.log(`p2 error ${err}`)
})
// 一秒以后打印
// => p2 error Error: just happy

// promise
let p3 = new Promise((resolve,reject) => {
  setTimeout(() => {
    resolve('p3 xxx')
  }, 1000)
})
p3.then((data) => {
  return new Promise((resolve, reject) => {
    resolve('p3 data')
  }).then(data => {
    return data
  })
}, (err) => {
  console.log(err)
}).then((data) => {
  console.log(`p3 success then ${data}`)
}, (err) => {
  console.log(`p3 error ${err}`)
})

// 循环引用 - 例子待改
let p4 = new Promise((resolve,reject) => {
  let circleP = new Promise((resolve, reject) => {
    resolve(circleP)
  })  
  return circleP
})
p4.then((data) => {
  console.log(data)
})

简易版1.0.3地址以及测试用例地址

面试点：如何判断并解决promise循环引用的问题？

以上一个符合Promise/A+规范的promise基本完成

那怎么验证自己写的promise是否正确呢？

追加以下deferred方法以供检查

// 基于Promise实现Deferred 也提供给`promises-aplus-tests`做检查
static deferred () {
  let dfd = {}
  dfd.promise = new Promise((resolve, reject) => {
    dfd.resolve = resolve
    dfd.reject = reject
  })
  return dfd    
}

安装检查工具promises-aplus-tests

npm i -g promises-aplus-tests

执行检查

promises-aplus-tests your-promise.js

都是绿色表示检查通过

代码地址

promise周边

以上只是一个简易的promise，我们期望完善更多功能：

catch方法
静态方法
finally方法
all方法
race方法

下面实现的地址在简易版1.1.1以及测试用例

catch方法

实现

// 用于promise方法链时 捕获前面onFulfilled/onRejected抛出的异常
catch (onRejected) {
  return this.then(null, onRejected)
}

使用

let Promise = require('./3.6.promise.js')

// catch
let p = new Promise((resolve,reject) => {
  setTimeout(() => {
    resolve('xxx')
  }, 1000)
})
p.then((data) => {
  console.log(`p success then ${data}`)
}).then((data) => {
  throw new Error('just happy')
}).catch(err => {
  console.log(`p ${err}`)
})
// => p success then xxx
//    p Error: just happy

静态方法

实现

static resolve (value) {
  return new Promise(resolve => {
    resolve(value)
  })
}

static reject (reason) {
  return new Promise((resolve, reject) => {
    reject(reason)
  })
}

使用

let Promise = require('./3.6.promise.js')

// static resolve reject
let p2 = Promise.resolve(100)
p2.then(data => {
  console.log(`p2 ${data}`)
})
let p3 = Promise.reject(999)
p3.then(data => {
  console.log(`p3 ${data}`)
}).catch(err => {
  console.log(`p3 err ${err}`)
})
// => p2 100
//    p3 err 999

finally方法

实现

// finally 也是then的一个简写
finally (cb) {
  // 无论成功还是失败 都要执行cb 并且把成功或者失败的值向下传递
  return this.then(data => {
    cb()
    return data
  }, err => {
    cb()
    throw err
  })
}

使用

let Promise = require('./3.6.promise.js')

// finally
let p4 = Promise.resolve(100)
p4.then(data => {
  throw new Error('error p4')
}).finally(data => {
  console.log(`p4 ahhh`)
}).catch(err => {
  console.log(`p4 err ${err}`)
})
// => p4 ahhh
//    p4 err Error: error p4

面试点：如何实现promise的finally方法？

all方法

实现

/**
 * @desc 当这个数组里的所有promise对象全部变为resolve状态的时候，才会resolve。
 * @param {Array<Promise>} promises promise对象组成的数组作为参数
 * @return 返回一个Promise实例
 */
static all (promises) {
  return new Promise((resolve, reject) => {
    let arr = []
    // 处理数据的方法
    let i = 0
    const processData = (index, data) => {
      arr[index] = data //数组的索引和长度的关系
      if (++i === promises.length){ // 当数组的长度 和promise的个数相等时 说明所有的promise都执行完成了
        resolve(arr)
      }
    }
    for (let i = 0; i < promises.length; i++){
      let promise = promises[i]
      if (typeof promise.then == 'function'){
        promise.then(function (data) {
          processData(i, data) // 把索引和数据 对应起来 方便使用
        }, reject)
      }else{
          processData(i,promise)
      }
    }
  })    
}

使用

let Promise = require('./3.6.promise.js')

// all & race
const fs = require('fs')
const path = require('path')
const resolvePath = (file) => {
  return path.resolve(__dirname, '../callback/static/', file)
}
const read = (file) => {
  return new Promise((resolve, reject) => {
    fs.readFile(resolvePath(file), 'utf8', (err, data) => {
      if(err) reject(err)
      resolve(data)
    })    
  })
}
// all
Promise.all([
  read('name.txt'),
  read('age.txt')
]).then(data => {
  console.log(`all ${data}`)
}).catch(err => {
  console.log(`all err ${err}`)
})
// => all Careteen,23

面试点：如何实现promise的all方法？

race方法

实现

/**
 * @desc 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理(取决于哪一个更快)
 * @param {Array<Promise>} promises 接收 promise对象组成的数组作为参数
 * @return 返回一个Promise实例
 */
static race (promises) {
  return new Promise((resolve, reject) => {
    promises.forEach((promise, index) => {
      promise.then(resolve, reject)
    })
  })    
}

使用

let Promise = require('./3.6.promise.js')

// all & race
const fs = require('fs')
const path = require('path')
const resolvePath = (file) => {
  return path.resolve(__dirname, '../callback/static/', file)
}
const read = (file) => {
  return new Promise((resolve, reject) => {
    fs.readFile(resolvePath(file), 'utf8', (err, data) => {
      if(err) reject(err)
      resolve(data)
    })    
  })
}
// race
Promise.race([
  read('name.txt'),
  read('age.txt')  
]).then(data => {
  console.log(`race ${data}`)
}).catch(err => {
  console.log(`race err ${err}`)
})
// => race Careteen/23 不一定 得看读取速度

generator用法

在理解generator之前先看一个例子。

实现一个可传任意个参数的加法函数

老司机们三下五除二就能得出求和函数

const sum = () => {
  return [...arguments].reduce((ret, item) => {
    return ret + item
  }, 0)
}
sum(1, 2, 3, 4) // => 10
sum(1, 2, 3, 4, 5) // => 15

使用ES6的展开运算符...可枚举出所有参数，再用数组包裹，即可将一个类数组转换为一个数组。利用reduce实现累加，方可得出求和函数。

那展开运算符能否操作对象佯装的类数组呢？那就来试一试

let obj = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
}
console.log([...obj]) // => TypeError: obj[Symbol.iterator] is not a function

可得知对象是不能被迭代的，根据报错信息，我们再改进代码

let o = { 0: 1, 1: 2, 2: 3, length: 3, [Symbol.iterator]: function () {
  let currentIndex = 0
  let that = this
  return {
    next(){
      return {
        value: that[currentIndex++],
        done: currentIndex-1 === that.length
      }
    }
  }
}}
let arr = [...o] // [1, 2, 3]

再使用generator实现

let o = {0: 1, 1: 2, 2: 3, length: 3, [Symbol.iterator]: function* () {
    let index = 0
    while (index !== this.length) {
      yield this[index]
      index++
    }
  }
}
let arr = [...o] // [1, 2, 3]

生成器可以实现生成迭代器，生成器函数就是在函数关键字中加个*再配合yield来使用，并且yield是有暂停功能的。

function * say() {
  yield 'node'
  yield 'react'
  yield 'vue'
}

那如何遍历迭代器呢？

let it = say ()
let flag = false
do{
  let {value, done} = it.next()
  console.log(value)
  flag = done
}while(!flag)
// => node
//    react
//    vue
//    undefined

迭代器提供next方法，可得出迭代的value和是否已经迭代完成done，用一个循环即可遍历。

yield的返回值的使用场景

function * say() {
    let a = yield 'hello'
    console.log('a', a)
    let b = yield 'careteen'
    console.log('b', b)
    let c = yield 'lanlan'
    console.log(c)
}
let it = say()
it.next(100) // 第一次next传递参数 是无意义的
it.next(200)
it.next(300)
// => a 200
//    b 300

generator执行流程大体如下图

可看出第一次next传递参数是无意义的，所以输出结果为 a 200 b 300

以上均为同步的情况，接下来看下yield后面是异步的场景。

再通过一个例子来深入理解。

通过读取文件1.txt的内容为2.txt，再读取2.txt的内容为3.txt，最后读取3.txt中的内容Careteen

首先需要准备三个文件，放置在./static目录下，再准备读取文件的函数，

const fs = require('fs')
const path = require('path')

const resolvePath = (file) => {
  return path.resolve(__dirname, './static/', file)
}

function read (file) {
  return new Promise((resolve, reject) => {
    fs.readFile(resolvePath(file), 'utf8', (err, data) => {
      if (err) reject(err)
      resolve(data)
    })
  })
}

在使用generator实现读取函数

function * r() {
   let r1 = yield read('1.txt')
   let r2 = yield read(r1)
   let r3 = yield read(r2)
  return r3
}

期望的过程是通过读取文件1.txt的内容为2.txt，再读取2.txt的内容为3.txt，最后读取3.txt中的内容Careteen，进行返回。

首先我们能想到使用回调的方式解决，因为yield后面是一个promise

let it = r()
let {value,done} = it.next()
value.then((data) => { // data->2.txt
  let {value,done} = it.next(data)
  value.then((data) => {
    let { value, done } = it.next(data)
    value.then((data) => {
      console.log(data) // data-> 结果
    })
  })
})
// => Careteen

但这又会产生回调地狱，所以需要优化，我们需要一个迭代函数，通过递归可以实现

function co (it) {
  return new Promise((resolve, reject) => {
    // next方法  express koa  原理 都是这样的
    function next (data) { // 使用迭代函数来实现 异步操作按顺序执行
      let { value, done } = it.next(data)
      if(done){
        resolve(value)
      }else{
        value.then((data) => {
          next(data)
        },reject)
      }
    }
    next()
  })
}

使得异步可以按顺序来执行，最后看一下执行

co(r()).then((data) => {
  console.log(data)
})
// => Careteen

非常完美的实现了，但是如果yield的后面是一个同步操作，没有then方法，在co方法中我们还需要特殊处理，也比较简单。

牛逼的TJ大神的CO库就对此做了很完善的处理，感兴趣的可前往仓库看看源码，只有200多行。

generator的应用：

如何实现generator

function * careteen() {
  yield 100
  yield 200
}

可查看babel编译后的结果

async-await

写起来是同步的，语法糖很甜不腻。
bluebird
- promisify
- promisifyAll
async-await
- 串行情况
- 并行情况
async-await内部机制
- 在babel中的编译结果，实质上就是generator+co
例子
- 三个小球滚动
  - 回调实现回调地狱
  - promise实现也不是很美观
  - generator实现需要co库
  - async-await实现

async function careteen() {
  await 100
  await 200
  return 300
}
careteen.then(_ => {
  console.log(_)
})

通过babel编译后可看出实质上是通过generator+co的方式实现的。

解析字符串

前言

写一个程序parse，解析下面的queryString，返回一个对象

console.log(parse('a=1&b=2&c=3')) // => { a: '1', b: '2', c: '3' }
console.log(parse('a&b&c')) // => {}
console.log(parse('a[name][second]=careteen&a[company]=sohu&b=y')) // => { a: { name: { second: 'careteen' }, company: 'sohu' }, b: 'y' }
console.log(parse('color=Deep%20Blue')) // => { color: 'Deep Blue' }
console.log(parse('a[0]=1&a[1]=2')) // => { a: [ '1', '2' ] }

分析

首先要先了解url参数的规则

以&或其他字符进行分割，且以=分割键值对
&和=分割时可能没有值
=后面的值可能已经encodeURIComponent转码，需要解码
可能会是一个多层级的对象a[name][second]=careteen&a[company]=sohu&b=y，需要按层级设置对象
对象的键可能为一个数字a[0]=1&a[1]=2，此时应该处理返回成数组

实现

针对上述分析其规则，解析一个URL需要考虑诸多情况。

具体代码和测试用例实现

下面给出具体实现

/**
 * @desc 解析URL
 * @param {String} str 
 * @param {Object} options 
 * @param {String} options.delimiter // 分隔符
 */
const parse = (str, options = {}) => {
  let config = Object.assign({
    delimiter: '&'
  }, options)

  return str.split(config.delimiter).reduce((ret, cur) => {
    let [key, value] = cur.split('=')
    if (!value) return ret
    // ret[key] = value
    deepSet(ret, key, value)
    return ret
  }, {})
}

辅助函数

/**
 * @desc 辅助函数 深层级设置
 */
const deepSet = (ret, key, value) => {
  /* eslint-disable */
  let path = key.split(/[\[\]]/g).filter(item => !!item)
  // console.log(path)
  let i = 0
  for (; i < path.length - 1; i++) {
    if (ret[path[i]] === undefined) {
      if (path[i + 1].match(/^\d+$/)) {
        ret[path[i]] = []
      } else {
        ret[path[i]] = {}
      }
    }
    ret = ret[path[i]]
  }
  ret[path[i]] = decodeURIComponent(value)
  // console.log(ret)
}

测试用例

console.log(parse('a=1&b=2&c=3')) // => { a: '1', b: '2', c: '3' }
console.log(parse('a&b&c')) // => {}
console.log(parse('a[name][second]=careteen&a[company]=sohu&b=y')) // => { a: { name: { second: 'careteen' }, company: 'sohu' }, b: 'y' }
console.log(parse('color=Deep%20Blue')) // => { color: 'Deep Blue' }
console.log(parse('a[0]=1&a[1]=2')) // => { a: [ '1', '2' ] }

总结

解析字符串看似简单，实则考察诸多知识点

使用reduce去简化流程
考虑URL规则满足各种需求
检验对正则的掌握
深层级对象的设置需要使用循环去合理设置
区分数组和对象两种场景
别忘了解码

实现分页复选

背景

后台管理系统中，使用表格展示数据时，可能的需求是多项选择然后进行批量操作，也期望能翻页多选。

实现

页面结构如下

<el-table
  class="table"
  :data="tableData"
  border
  style="width: 100%"
  @selection-change="handleSelectionChange"
  ref="asTable"
>
  <el-table-column
    width="50"
    type="selection"
    fixed="left"
  >
  </el-table-column>
  <el-table-column
    prop="id"
    label="ID"
  >
  </el-table-column>
  <el-table-column
    prop="name"
    label="名字"
  >
  </el-table-column>

  <el-table-column
    label="操作"
    width="100"
  >
    <template slot-scope="scope">
      <el-button type="primary" plain size="small" @click="handleEdit(scope.row)" >编辑</el-button>
    </template>
  </el-table-column>
</el-table>
<el-pagination
  background
  @current-change="handleCurrentChange"
  :current-page.sync="pagination.currentPage"
  :page-size="pagination.size"
  layout="total, prev, pager, next, jumper"
  :total="pagination.total"
  slot="pagination"
>
</el-pagination>

模拟数据实现分页

data () {
  return {
    tableData: [],
    multipleSelection: [],
    pagination: {
      currentPage: 1,
      size: 10,
      total: 1000
    }
  }
},
beforeMount () {
  this.fetchData()
},
methods: {
  fetchData () {
    this.tableData = []
    let start = (this.pagination.currentPage - 1) * this.pagination.size
    let end = this.pagination.currentPage * this.pagination.size
    setTimeout(_ => {
      for (let i = start; i < end; i++) {
        this.tableData.push({
          id: i,
          name: `王${i}兰`
        })
      }
    }
  },
  handleCurrentChange () {
    this.fetchData()
  },
  handleSelectionChange (val) {
    this.multipleSelection = val
  },
}

展示已选择项

<div class="result">
  已选：{{ allMultipleSelection }}
</div>

allMultipleSelection: [],

在复选事件中对所选项进行存储

主要思路就是：

将当前页已选数据放入所有已选项
将所有已选项数据中当前页没选择的项移除

handleSelectionChange (val) {
  this.multipleSelection = val
  // @tip 实现分页复选
  console.log(val, 'selection')
  setTimeout(_ => {
    this.resolveAllSelection()
  }, 50)
},
resolveAllSelection () {
  let currentPageData = this.tableData.map(item => item[this.uniqueKey]) // 当前页所有数据
  let currentPageSelected = this.multipleSelection.map(item => item[this.uniqueKey]) // 当前页已选数据
  let currentPageNotSelected = currentPageData.filter(item => !currentPageSelected.includes(item)) // 当前页未选数据
  // 将当前页已选数据放入所有已选项
  currentPageSelected.forEach(item => {
    if (!this.allMultipleSelection.includes(item)) {
      this.allMultipleSelection.push(item)
    }
  })
  // 将所有已选项数据中当前页没选择的项移除
  currentPageNotSelected.forEach(item => {
    let idx = this.allMultipleSelection.indexOf(item)
    if (idx > -1) {
      this.allMultipleSelection.splice(idx, 1)
    }
  })
  console.log(this.allMultipleSelection, 'all')
},

此时还需要在切换页面时将之间选择项进行重新选中，即遍历当前页所有数据如果存在于所有已选项中，则将其置为已选择。

fetchData () {
  // ...
  setTimeout(_ => {
    // ...
    // @tip 实现分页复选
    setTimeout(_ => {
      this.setSelectedRow()
    }, 50)
  }, 200)
},
setSelectedRow () {
  // 设置当前页已选项
  this.tableData.forEach(item => {
    if (this.allMultipleSelection.includes(item[this.uniqueKey])) {
      this.$refs.asTable.toggleRowSelection(item, true)
      console.log(item[this.uniqueKey], 'set')
    }
  })
},

以上实现了分页复选功能。

所有代码存放在@careteen/lan-vue

查看DEMO

clone仓库并引入依赖

git clone [email protected]:careteenL/lan-vue.git
npm install
npm run serve

浏览器打开 http://localhost:8080/#/examples/pagingCheck 即可看到效果

事件循环机制

先了解下任务队列

所有同步任务都在主线程上执行，形成一个执行栈
主线程之外，还存在一个任务队列。只要异步任务有了运行结果，就在任务队列之中放置一个事件。
一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

此时区分为浏览器的事件循环和Node端的事件循环。下面将一一详解。

浏览器的事件循环

主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop(事件循环)

上图过程是一个宏观的表述，实际上callback queue任务队列是分为macro task宏任务和micro task微任务两种。

在一个事件循环当中，执行的步骤如下：

首先将同步代码放入执行栈进行执行，若存在异步事件则将其的返回结果会被放到一个任务队列中。任务队列又分为宏任务队列和微任务队列。
当执行栈为空时，会优先查看微任务队列中是否有事件存在

若存在，则依次执行队列事件中的对应回调，直到微任务队列为空，再进入下一步
若不存在，跳往下一步

查看宏任务队列中是否有事件存在

若存在，则将队列中的事件的对应回调放入执行栈执行
若不存在，跳往下一步

若执行栈中又有异步代码，则放入下一个任务队列。如此反复循环前三个步骤

从以上我们得知重点是执行栈为空后优先处理微任务再处理宏任务。

浏览器中的宏任务和微任务有哪些

写过vue的同学应该熟悉一个方法this.$nextTick(() => { ... })，此时对于宏任务和微任务的分类我们不知所措，那就看看vue源码中是如何处理的。

next-tick.js传送门

其中定义的很清楚

宏任务
- setImmediate
- MessageChannel
- setTimeout
微任务
- promise的then方法
- MutationObserver (vue2.0已经废弃使用此API)

setImmediate/setTimeout

setImmediate为IE特有的，我们可以在IE浏览器环境下做测试

setImmediate(() => {
  console.log('setImmediate')
})
setTimeout(() => {
  console.log('setTimeout')
}, 0) // 延迟设置为0，实际上是会有4ms的延迟。
// => setImmediate
//    setTimeout

MessageChannel

H5的API，兼容性不怎么好，前往mdn查看使用

再做如下测试

let channel = new MessageChannel()
let port1 = channel.port1
let port2 = channel.port2
port1.postMessage('hello careteen ~')
port2.onmessage = function (e) {
  console.log(e.data)
}
// => hello careteen ~

promise的then方法

Promise.resolve(100).then(data => {
  console.log(data)
})
// => 100

MutationObserver
这也是一个属于微任务的异步方法，前往mdn查看使用

此方法在vue1.0中有使用到，但是再2.0以后则废弃了。

下面简单介绍下使用，场景为为页面创建多个节点，当节点创建完成后告诉我们。

html

<div id="box"></div>

let observer = new MutationObserver(function() {
  console.log('dom 更新完了')
  console.log(box.children.length)
})
// 监听后代的变化
observer.observe(box, {
  childList: true
})
for (let i = 0; i < 5; i++) {
  box.appendChild(document.createElement('sapn'))
}
for (let i = 0; i < 10; i++) {
  box.appendChild(document.createElement('p'))
}

// => 当节点创建完成后
//    dom 更新完了
//    15

面试题详解

case1:

Promise.resolve().then(() => {
  console.log('then1')
  setTimeout(() => {
    console.log('timer1')
  }, 0)
})
console.log('start')
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(() => {
    console.log('then2')
  })
}, 0)
// => start -> then1 -> timer2 -> then2 -> timer1

根据上面的执行流程可得知结果。

先执行同步代码start，
promise的then方法里面放进微任务队列，
- 然后执行同步代码then1
- 将setTimeout放入宏任务队列
setTimeout的回调放入宏任务队列
等到setTimeout2时间到了
- 执行setTimeout2回调的同步代码timer2
- promise的then方法里面放进微任务队列，然后执行then2
- 等到setTimeout1的时间到了，执行里面同步代码

Node的事件循环

V8引擎解析JavaScript脚本。
解析后的代码，调用Node API。
libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个Event Loop（事件循环），以异步的方式将任务的执行结果返回给V8引擎。
V8引擎再将结果返回给用户。

以上也只是宏观上的一个描述，和浏览器一样，异步事件方法的队列也细分了几个。前往Node官网可查看详细说明

下面摘自Node官网

   ┌───────────────────────────┐
┌─>│           timers          │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │
│  └─────────────┬─────────────┘      ┌───────────────┐
│  ┌─────────────┴─────────────┐      │   incoming:   │
│  │           poll            │<─────┤  connections, │
│  └─────────────┬─────────────┘      │   data, etc.  │
│  ┌─────────────┴─────────────┐      └───────────────┘
│  │           check           │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │
   └───────────────────────────┘

从上面的模型中我们可以得知机制的执行顺序：

外部输入数据-->轮询阶段(poll)-->检查阶段(check)-->关闭事件回调阶段(close callback)-->定时器检测阶段(timer)-->I/O事件回调阶段(I/O callbacks)-->闲置阶段(idle, prepare)-->轮询阶段...

细分的几个异步队列：

timers阶段
- setTimeout方法
- setInterval方法
pending callbacks阶段
- I/O读写操作。如fs.readFile()方法
idle, prepare阶段
- 仅在内部使用，我们暂时不用关注
poll阶段
- 检索新的I/O事件，执行与I/O相关的回调(除了关闭回调、计时器调度的回调和setimmediation()之外，几乎所有回调都是如此);节点将在适当的时候在这里阻塞。
check阶段
- setImmediate()的回调会在这个阶段执行
close callbacks阶段
- 例如socket.on('close', ...)这种close事件的回调

和浏览器的事件循环机制有所不同：

首先会在poll阶段
- 先查看poll queue中是否有事件
  - 若有，则按先进先出的顺序依次执行回调
  - 若无，则会检查是否有setImmediate的回调
    - 若有此回调，则会进入下面check阶段去执行这些回调
  - 于此同时，检查是否有到期的timer
    - 若有，则将这些到期的timer的回调按照调用顺序放到timer queue，然后循环进入timer阶段执行队列中的回调
  - setImmediate和timer的判断顺序不是固定的，受代码运行环境的影响
  - 如果setImmediate和timer的队列都是空的，那么循环会在poll阶段停留，直到有一个I/O事件返回，循环会进入I/O callback阶段并立即执行这个事件的回调
check阶段
- 此阶段专门执行setImmediate的回调，当poll阶段进入空闲状态，并且setImmediate队列中有callback时，事件循环进入这个阶段
close阶段
- 当一个socket连接或者一个handle被突然关闭时（例如调用了socket.destroy()方法），close事件会被发送到这个阶段执行回调。否则事件会用process.nextTick()方法发送出去
timer阶段
- 这个阶段以先进先出的方式执行所有到期的timer加入timer队列里的callback，一个timer callback指得是一个通过setTimeout或者setInterval函数设置的回调函数
I/O callback阶段
- 如上文所言，这个阶段主要执行大部分I/O事件的回调，包括一些为操作系统执行的回调。例如一个TCP连接生错误时，系统需要执行回调来获得这个错误的报告。
如此反复循环
特别的：process.nextTick()这个方法虽然没有在上面列入，但是却在每个阶段执行完毕准备进入下一个阶段时优先调用
- 与执行poll queue的任务不同的是，这个操作在队列清空前是不会停止的。也就是说错误使用会导致node进入一个死循环，直到内存泄露

面试题详解

上面说了一大推，看起来很枯燥，那么下面来几个case深入理解

case1:

Promise.resolve().then(() => {
  console.log('then1')
  setTimeout(() => {
    console.log('timer1')
  }, 0)
})
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(() => {
    console.log('then2')
  })
}, 0)
// => then1 -> timer2 -> then2 -> timer1
// or then1 -> timer2 -> timer1 -> then2

上面代码的结果有两种可能，then2执行后，timer1可能还没到时间也可能到时间了，因为setTimeout方法第二个参数如果设置为0，实际执行时会有4ms的延迟。

case2:

setTimeout(() => {
  console.log('timeout')
}, 0)
setImmediate(() => {
  console.log('setImmediate')
})
// => setImmediate -> timeout
// or timeout -> setImmediate

多运行几次，运行结果是不一定的，这取决于运行代码的环境。运行和环境中的各种复杂情况会导致在同步队列里两个方法的顺序随机决定。

再来看一个例子case3:

let fs = require('fs')
fs.readFile('1.setImmediate.html', () => {
  setTimeout(() => {
    console.log('timeout')
  }, 0)
  setImmediate(() => {
    console.log('setImmediate')
  })
})
// => setImmediate -> timeout