• 前端路由以及浏览器回退,hash & history & location


    一、前言

    其实不止一次想监听浏览器的回退方法,比如

    在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页

    H5 有背景音乐的,跳页就得重新放,体验实在不妙,等等

    再其他就是体验上的优化了,虽然可以添加返回按钮,但手机的回退键还是很常用的。

    再加上 ajax 的无刷新体验,单页面应用可谓是一大装逼利器。

    二、前端路由的好处

    (伪)换页面时还可以添加动画,丝滑流畅的操作体验实在不能更棒,另外相较后端路由,前端路由也算是减轻了服务区负荷...

    也正基于此,根据不同 url 渲染不同视图这种路由的概念被提上台面,让渲染哪一个可以得到方便的管理。

    三、前端路由的坏处

    前端路由也是有利有弊,它的不足在于

    1. 安全性,改改路由就能跳到某页面,肆意进入不同流程,想想还是有点瘆人的

    2. 状态恢复,比如第一页添了表单,跳到第二页再返回,这些表单可能得清空之类的问题

    四、实现前端路由

    其实路由也就两步,实现 url 变化 & 捕捉变化进行不同的页面逻辑

    1. 改变 url

    location api 的 reload / replace 方法,修改 href / hash / search 等属性等,

    history api 的 back / go 方法,以及比较新的 pushState / replaceState 方法...

    改变 url 的方式太多了,

    需要注意的是哪些是会刷新页面的,哪些是会改 url 但不刷新页面的...

    2. 捕捉 url 变化

    主要得靠 window 的事件 hashchange 和 popstate

    用 setInterval 持续监听(每 100ms 比较 oldUrl 和 nowUrl)也不是不可以,但你也懂得性能是个好东西

    注意:pushState / replaceState 不会触发 popstate 事件,其他是否触发问题你可以继续尝试

    3. 简单的实现与封装

    易懂的封装:

    function Router() {
        this.routes = {};
        window.addEventListener('load', this.resolve.bind(this), false);
        window.addEventListener('hashchange', this.resolve.bind(this), false);
    }
    Router.prototype.route = function(path, callback) {
        this.routes[path] = callback || function(){};
    }
    Router.prototype.resolve = function() {
        this.curHash = location.hash.slice(1) || '/';
        typeof this.routes[this.curHash] === 'function' && this.routes[this.curHash]();
    }

    简单的案例:

    <ul>
        <li><a href="#blue">蓝色</a></li>
        <li><a href="#yellow">黄色</a></li>
    </ul>
    <ul>
        <li><a href="#red">红色</a></li>
    </ul>
    
    var router = new Router();
    router.route('blue', function(){
        document.body.style.background = 'lightblue';
    });
    router.route('yellow', function(){
        document.body.style.background = 'yellow';
    });
    router.route('red', function(){
        document.body.style.background = 'red';
    });
    

    DEMO1: https://foreverz133.github.io/demos/single/router.html 

    DEMO2: https://foreverz133.github.io/demos/single/history.html

    五、其他

    1. 不是所有页面都需要改变 url,因为它会牵扯到回退

    2. 浏览器的回退在体验上对前端是道比较难回答的题,比如回退两页,不返回登录/支付等

    3. 在转场之间加上动画,当然要完成这效果就得使用 click 和 transitionEnd 等事件了

    4. 状态控制,最便捷(并非最佳)的办法是全局一个对象去保存这些状态,每次进行判断和初始化操作

    5. 当然如果你会 ReactJS 等模块化渲染的话,路由还可以更厉害

    6. 还要比往常遇到更多优化上的问题,比如资源加载/数据更新/操作流畅度等

    7. 梳理逻辑和确定状态,这些前期的事远比书写更重要,不然你会被改死的,讲真!

    本文所提路由还太狭隘,毕竟路由是前后端都有的东西,url 也仅仅是指向某资源,所以它还会涵盖处理数据/数据传递等更多方面

    六、总结

    单页面应用(SPA)对前端的要求成倍增加,对开发者来说其实是好事,

    有挑战进度会更快,不过和后端/策划的契合度也要相应提高才行。

  • 相关阅读:
    ODBC数据源选项卡中的系统DNS,用户DNS和文件DNS
    Oracle学习的零散问题
    【今日CV 计算机视觉论文速览】Thu, 7 Mar 2019
    【图像风格转换】项目参考资料总结
    【今日CV 计算机视觉论文速览】Thu, 28 Feb 2019
    【今日CV 计算机视觉论文速览】Tue, 26 Feb 2019
    【今日CV 计算机视觉论文速览】Wed, 27 Feb 2019
    【python】set集合基础与使用
    hdu 4259 Double Dealing
    hdu 1538 A Puzzle for Pirates 博弈论
  • 原文地址:https://www.cnblogs.com/foreverZ/p/6398704.html
Copyright © 2020-2023  润新知