其他分享
首页 > 其他分享> > Promise的回顾及SPA路由实现

Promise的回顾及SPA路由实现

作者:互联网

Promise

return 在对应的promise的函数中

在promise里面的then函数(catch函数中)return相当于调用resolve 。 throw new Error相当于调用reject

Promise.resolve('第一个值').then((res) => {
   console.log(res)
   return '第二个值' //resolve
}).then(res => {
   console.log(res)
})
Promise.resolve('第一个值').then((res) => {
   console.log(res)
   throw new Error('异常') //reject
}).catch(err => {
   console.log(err)
})

then函数里面传递俩个参数(then和catch里面参数为函数)


Promise.reject()
  .then(function success1 (res) {
   console.log('成功');//抛异常
}, function fn (e) { //处理错误的函数 不会处理前面的函数抛出的错误
   console.error('错误') //相当于同级的catch
})
如果对应的then或者catch里面的参数不是函数那么就会发生值穿透

Promise.resolve('我是值')
.then(1)
.then(2)
.then(3)
.then(console.log) //===> .then(res=>console.log(res))

setImmediate 立即执行(没事做先执行你)

他也是一个宏任务 而且他这个宏任务只排在setTimeout之前

nextTick (类似于setTimeout 宏任务 又是一个微任务 (他可以是宏任务也可以微任务))

当你没有进行dom操作的时候 (没有进行插入或渲染)他是一个微任务

反之他就是一个宏任务(也就是说它需要等待dom完成相关操作以后才执行)

路由实现

路由概念

前端路由:根据对应的请求地址渲染对应的组件(页面)

根据BOM里面的history和location对象实现(前端路由分俩种模式 hash模式 history模式)

后端路由:根据对应的请求地址和请求方式来访问对应的接口(restful风格接口)

前端路由

前端路由的俩种实现方式

hash模式的原理

通过监听location.hash的变化 来控制对应的渲染变化(onhashchange)

history模式的原理

通过监听对应的state的变化 来控制对应的渲染变化 (onpopstate)

pushstate 添加state数据 同时会改变对应的url路径

replacestate 替换state的数据 同时将对应的路径替换为对应的路径

onpopstate事件 必须利用history.back history.go history.forward

单页应用

前面提到了对应的hash模式或者是history模式都不会进行页面的跳转(不会进行刷新操作)也就是说对应的页面不能进行跳转也就意味着对应的页面只有一个。只有一个页面的应用(SPA 单页应用)

基于单页应用实现路由

hash模式实现代码
// 利用hash实现的路由
class Router {
   constructor() {
       //路由配置存储的列表 地址 渲染什么
       this.routes = []
  }
   add(path, commponent) { //添加路由配置 path表示对应的路由路径 commponent表示需要渲染的内容
       this.routes.push({
           path,
           commponent
      })
  }
   listener(el) { //监听函数 监听对应的hash变化的 做对应的处理 el表示你需要渲染的内容
       window.onhashchange = this.hashChange(el)
       this.hashChange(el)() //第一次需要调用
  }
   hashChange(el) {
       let that = this
       return function () {
           //location.hash
           let hash = location.hash //获取当前的hash值
           //把第一个#删除
           hash = hash.substring(1)
           //根据获取的hash值取数组里面匹配出来
           that.routes.forEach(route => {
               if (route.path == hash) { //匹配出来了
                   //进行相关的渲染
                   el.innerHTML = route.commponent()
              }
          })
      }
  }
}
let router = new Router()
//先添加对应的地址
router.add('/', function () {
   return '<h1>我是主页</h1>'
})
router.add('/list', function () {
   return '<h1>我是列表页</h1>'
})
router.add('/user', function () {
   return '<h1>我是用户页</h1>'
})
//打开页面就加#
window.onload = () => {
   //获取router-view
   let view = document.querySelector('router-view')
   //跟对应的name存在关系
   let path = view.getAttribute('name')
   let box = document.createElement('div')
   document.querySelector('#app').replaceChild(box, view)
   // 判断是否存在#
   if (!location.href.includes('#')) {
       location.href += '#' + path
  }
   //做渲染
   //监听调用
   router.listener(box)
}
html代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>单页应用的主页</title>
</head>
<body>
   <div id="app">
       <!-- vue里面显示路由视图的标签 name里面填写是地址 -->
       <router-view name="/"></router-view>
   </div>
   <script src="./hash.js"></script>
</body>
</html>
history模式

// 利用history实现的路由
class Router {
   constructor() {
       this.routes = [] //存储对应的路由配置
       this.callback
  }
   add(path, commponent) { //添加的方法
       this.routes.push({
           path,
           commponent
      })
  }
   listener(callback) { //传递一个函数 专门用于渲染
       this.callback = callback
       history.pushState('/','','/') //第一次进入/
       this.render()
       window.onpopstate = () => {
           this.render()
      }
  }
   render() {
       let that = this
       //获取对应的路径地址
       let path = location.pathname
       //比对 拿对应的routes去进行遍历比对
       this.routes.forEach(route => {
           if (route.path == path) {
               // 进行渲染
               that.callback(route.commponent())
          }
      });
  }
}
//构建一个路由对象
let router = new Router()
router.add('/', () => '<h1>主页</h1>')
router.add('/user', () => '<h1>用户页</h1>')
router.add('/list', () => '<h1>列表页</h1>')
router.listener(renderHtml => {
   //获取router-view
   let view = document.querySelector('router-view')
   view.innerHTML = renderHtml
})
//获取所有的router-link 变成a标签
let links = document.querySelectorAll('router-link')
//保存所有的创建的a
let aArr = []
//读取对应的属性 需要遍历
Array.from(links).forEach(link => {
   //获取to属性加给对应的a的href
   //创建a标签替换对应的router-link
   let a = document.createElement('a')
   a.href = link.getAttribute('to')
   a.innerHTML = link.innerHTML //将link的内容拿出赋值给对应的a
   document.querySelector('#app').replaceChild(a, link)
   aArr.push(a)
})
//给a添加点击事件
aArr.forEach(a => {
   a.onclick = function (e) {
       e.preventDefault(); //禁止a的默认事件
       //点击的时候 pushState加东西
       history.pushState(this.href, '', this.href)
       //重新渲染
       router.render()
  }
})
html代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div id="app">
       <!-- 改成a标签 -->
       <router-link to="/">主页</router-link>
       <router-link to="/user">用户页</router-link>
       <router-link to="/list">列表页</router-link>
       <router-view name="path"></router-view>
   </div>
   <script src="./histroy.js"></script>
</body>
</html>

 

标签:hash,Promise,router,SPA,path,let,对应,路由
来源: https://www.cnblogs.com/bigBossKiss/p/16637044.html