前端前进日志2020-10-30

1.promise
promise是异步编程的解决方案，

let fatherLoveTime = (time) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(`爸爸即将${time / 1000}秒后打我屁股`)
        }, time)
      })
    }
    let p1 = fatherLoveTime(5000)
    let p2 = fatherLoveTime(2000)

    Promise.all([p1, p2]).then(result => { console.log(result) }).catch(error => { console.log(error) }

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
Promise.race 顾名思义竞速，多个异步请求，挑选最快的显示
ps：promise有很多方法，因为promise本身算是个对象，所以需要看下
2.es6 中class

class BVueRouter{
  //  接收用户传进来的构造配置
   constructor(options){
     //以下是数据响应部分
     this.$options = options
     //vue自带方法
     Vue.util.defineReactive(this,'current','/')
     //addEventListener 添加window句柄
     window.addEventListener('hashchange',this.onHashChange.bind(this))
     window.addEventListener('load', this.onHashChange.bind(this))
     //路由映射表
     this.routeMap = {}
     options.routes.forEach(route =>{
       this.routeMap[route.path] = route
     })
   }
   //变更路由地址捕捉
   onHashChange(){
     //桌面地址栏中地址
     console.log(window.location.hash.slice)
     this.current = window.location.hash.slice(1)
   }
 }

class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

3.window

在这里插入代码片
 window.addEventListener('hashchange',this.onHashChange.bind(this))
 window.addEventListener('load', this.onHashChange.bind(this))

addEventListener添加window 句柄，句柄我的理解是给window事件找活儿干，引用标识。当然句柄有两个含义，这里只比比我用的

剩下就没了，自己实现vue-router有点心累。今天就这样吧