JS-Promise和SPA路由的实现

2022-09-16 18:01:42 阅读：242 来源： 互联网

标签：hash JS Promise router SPA path let 对应路由

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,JS,Promise,router,SPA,path,let,对应,路由
来源： https://www.cnblogs.com/orangeSky/p/16700802.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS-Promise和SPA路由的实现

Promise的回顾及SPA路由实现

Promise

return 在对应的promise的函数中

then函数里面传递俩个参数（then和catch里面参数为函数）

如果对应的then或者catch里面的参数不是函数那么就会发生值穿透

setImmediate 立即执行（没事做先执行）

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

路由实现

路由概念

前端路由：根据对应的请求地址渲染对应的组件（页面）

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

前端路由

前端路由的俩种实现方式

hash模式的原理

history模式的原理

单页应用

基于单页应用实现路由

hash模式实现代码

html代码

html代码

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