SPA应用的核心在于使用无刷新的方式更改url,页面不会改变

  • 栏目:前端 时间:2020-01-04 12:57
<返回列表

问题:

本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理。SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变。从实现上来看,url的管理和页面内容的管理是其中的两个难点。就url的管理而言,主要有以下三方面的要求:

在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿

1)对于要采用单页跳转的链接,不能有页面刷新;
2)浏览器的前进和后退,都能像多页应用那样,显示之前访问地址对应的内容;
3)应用处于任何一个单页链接地址时,当用户刷新,依然能初始化显示该地址对应的内容。

解决方案:

假如要自己来实现一个能够满足以上三方面要求的功能,思路有2种。

利用 H5的 pushstate特性与onpopup事件

第一种是利用锚点链接及hashchange,将所有单页链接地址全部配置成锚点链接的形式,然后在hashchange事件里面,根据页面当前的锚点值,执行不同的回调函数,用于更改页面内容。这个思路在上一篇博客中《理解浏览器历史记录(2)-hashchange、pushState》给出了一个简单的实现(demo),代码虽然比较简陋,但是也说明思路是可行的。

分析:

第二种是利用pushState,详细步骤如下:

pushstate 从该方法名我们可以知道 是增加某种状态,会为history对象的length增加长度, 点击返回键的时候会触发onpopup事件;

1)在点击链接的时候,如果这个链接是单页形式的链接,可通过pushState或者replaceState的方式来改变url;由于pushState跟replaceState并不会触发popstate事件,所以在必要的条件下,还得在调用完pushState和replaceState调用完后,手动调用相应的回调函数;
2)监听浏览器的popstate事件,这样就能响应浏览器前进后退的操作,然后根据操作后的页面地址找到对应的回调函数执行;
3)页面初始化时,直接根据当前地址执行对应的回调函数即可。

onpopup触发返回,而 pushstate仅仅是从url上进行了改变,不会校验url的内容,页面不会改变,加入当前页面为 xxx/b.html,此时pushState(null,null,'a.html'),可以发现 url变了,而页面的内容并没有改变,我们可以通过这来造成一种无法返回的假象

上次也没有给出简单使用pushState实现SPA的例子,这次补上,功能与hashchange那个类似,就是写法稍微有点不同而已。demo地址(不可测刷新操作,如果使用pushState,单页地址刷新会报404,需在后台处理才能解决,此处毕竟只是个静态页):

实施:

//注意:Dialog是一款弹窗的插件mounted: function() {//当前页面挂载的时候调用 返回键的监听方法this.listeningBack()}//当页面销毁的时候我们也要将事件监听销毁,以免影响其他内容destroyed: function() {window.onpopstate = null},methods: {//监听返回键listeningBack() {var that = this; //window.onpopstate方法指向window,所以要储存一下当前的vue实例let route = ''; //根据业务逻辑的决定window.onpopstate = function() {//将当前页面window.location.href 放入页面栈当中history.pushState({}, null, window.location.href);Dialog.alert({title: '标题',message: '确认返回吗,你所填写的内容将保存为草稿'}).then(() = {that.$router.push({path: route})}).catch(console.log('取消返回,留在当前页面'));}},}

比较起来,用hashchange做spa的方法要简单一些,而且兼容性更好,加上mdn上给出的用定时器来模拟hashchange的方法,基本上用它是可以实现全浏览器兼容的SPA应用了。不过hashchange相比pushstate也有一些大的弊端:
一是url对自己不够友好,本来在多页应用里面,url可能都是绝对路径或者相对路径开头的形式,如果全换成#hash的形式,显然违背自己多年的使用习惯;
二是url对搜索引擎不够友好。
所以要是能够把hashchange,pushstate结合起来实现SPA里面的url管理,显然这个事情就变得很完美了。事实上已经有很多的所谓的路由框架做到这一点,我也没有去研究别的,加上一直对backbone这个框架的评价不错,所以就琢磨着怎么用它实现我所需要的SPA的url管理了。

下面的内容就是介绍如何使用backbone的history模块来实现spa的url管理。由于只是介绍方法,所以对相关的api的使用不会一一进行说明。感兴趣地可以查阅backbone的官方文档,主要是Router和History模块的部分。要是想详细了解浏览器如何管理历史记录,以及hashchange和pushstate使用要点的话,也可以看看我前面两篇博客写的一些基础知识总结,它们对于我理解Backbone的history模块还是很有帮助。

理解浏览器历史记录(2)-hashchange、pushState;
理解浏览器的历史记录;

history使用介绍

按照官方文档的说明,backbone的history模块可以实现从pushstate到hashchange到url直接跳转,这三种方式的优雅降级。为了验证这一点,我专门做了几个demo。

先来看demo1:

在正式介绍这个demo前,先要了解一点,网页里的a标签的href属性有多种形式:
1)http(s)形式的,如href="/index",href="../index",href=""
2)锚点形式,如href="#container"
3)脚本形式,如href="javascript:;"
4)拨打电话,如href="tel:95555"
5)邮件链接,如href="mailto:xxx@yyy.com"
6)其它自定义的形式等
a标签被点击时,浏览器都会有默认的行为,比如http(s)形式的链接会引发网页的跳转;锚点形式的链接会引发hashchange以及锚点内容的定位。在单页应用里面,大部分的http(s)形式的链接都要采用单页形式跳转,但也不是所有的链接都要使用单页形式跳转。在管理url的时候,要区分出哪些链接需要用单页形式的跳转。backbone的history模块可以解决的是url管理问题,但是不会解决如何区分哪些链接需要单页形式跳转的问题。当然实际上解决后面这个问题也很简单,后面的部分会详细说明,这里只是说明这个实现的要点。

接下来在chrome中新开一个选项卡,打开上面的demo1链接以及控制台,可看到下面类似的界面:

图片 1

做一些测试:点击列表链接;点击详情链接;点击关于链接;点击浏览器倒退;点击浏览器倒退;点击浏览器倒退;点击浏览器前进;点击浏览器前进;点击浏览器前进。观察浏览器地址栏以及控制台的变化(由于没有考虑在url更改的时候去更改页面内容,所以只能用控制台的打印的方式来简单代替一下url变化的页面内容更改的逻辑)

比如点击列表链接后,页面状态应该是这样的:

图片 2

在所有的操作中,不难发现整个页面都是满足SPA要求的(当然,这个demo不能做刷新操作测试,道理同上)。接下来看看这个demo的一些要点:

首先为了解决前面的提出的区分链接是否要做单页跳转的问题,在需要单页跳转的a元素上增加了一个spa的属性:

<li><a spa href="/">首页</a></li>
<li><a spa href="/list">列表</a></li>
<li><a spa href="/detail/1">详情</a></li>
<li><a spa href="/about">关于</a></li>

demo里面除了顶部的四个链接有加spa的标识,还给出了一些普通链接,点击之后会按照默认行为进行交互,用来对比单页链接的行为。观察这个html结构,也不难发现,尽管这些链接都是单页的,但是它们的href的形式还跟多页应用里的书写方式一样。

然后考虑如何自定义这些单页链接的行为。我的实现是通过事件委托的方式,在document对象上代理这些a元素的点击事件:

$(document).on('click', 'a[spa]', function (e) {
    var $a = $(this);
    var href = $.trim($a.attr('href'));

    var options = {
        trigger: $a.data('trigger') !== false,//默认点击链接后都要自动触发回调
        replace: Backbone.history.getFragment(href) == Backbone.history.fragment//如果链接地址与当前地址匹配就采用replace的方式
    };

    Backbone.history.navigate(href, options);

    e.preventDefault();
});

然后在这个代码的内部,取消浏览器的默认行为,然后很简单的调用Backbone.history.navigate方法来完成url的跳转,它会根据浏览器对pushState的支持情况以及history模块初始化的方式,来判断是用pushstate api更改url还是通过hash来更改url。这个方法的第二参数,是一个选项配置对象,trigger属性决定是否在url跳转完毕后,自动触发相应的回调函数;replace属性,决定了是否在浏览器历史记录栈中创建新的条目。考虑到这里是全局定义单页链接的行为,replace属性是否为true完全根据链接的地址是否与当前url匹配决定的,如果匹配那么replace就是true,意味着链接是重复点击,不需要创建新的历史记录条目,否则就是false,意味着当前链接点击后需要跳转到一个新的地址,所以需要创建新的历史记录条目;trigger属性,除非显示地在a元素上加了data-trigger=false,否则它传递到navigate始终是true。

trigger属性设置为true是比较关键的,尤其是当pushstate被使用的时候,navigate内部仅仅只是用pushstate api改变了页面地址,所以要手工地去触发相应的回调函数执行。

接着在demo里面还有下面一段简单的代码,用到了Backbone.Router模块,用来完成url规则与回调函数的定义:

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'index',
        'index': 'index',
        'list': 'renderList',
        'detail/:id': 'renderDetail',
        '*error': 'renderError'
    },
    index: function () {
        console.log('首页action');
    },
    renderList: function () {
        console.log('列表action');
    },
    renderDetail: function (id) {
        console.log('详情action, 详情id为: ' + id);
    },
    renderError: function (error) {
        console.log('URL错误, 错误信息: ' + error);
    }
});

var router = new AppRouter();

Router模块是一个很简单的模块,它就是一个url规则与回调函数的映射表,被History模块的实例所引用,当页面地址匹配到了Router里面定义的规则时,相应的回调函数就会执行。上面的用法已经比较全了,实际项目中,可以有多个AppRouter这样的模块定义,然后各自初始化一个Router实例,这样就能实现大量的url规则进行拆分管理。

最后通过下面的方式,来初始化启用了pushstate管理的history模块:

Backbone.history.start({pushState: true, root: ROOT_BASE + '/demo1.html/'});

(root的作用可以查看backbone官方文档了解)

以上就是本文要介绍的最重要的内容,它是一种比较简洁的进行spa的url管理的方法,尽管可能还有一些场景没有考虑到,但是按照以上思路,即使碰到一些使用不佳的场景,我们也能够想办法解决。

回到本部分开头的内容,来看看backbone是否真能做到url管理的优雅降级。为了验证这一点,需要模拟另外两种场景,分别是不支持pushState的场景和不使用pushState&hashchange的场景。

demo2:

demo2与demo1的区别仅仅在于最后面初始化history模块的方式,demo1是这样的:

Backbone.history.start({pushState: true, root: ROOT_BASE + '/demo1.html/'});

demo2是这样的:

Backbone.history.start({root: ROOT_BASE + '/demo2.html/'});

demo2的初始化代码,没有传递pushState属性,在backbone内部会被认为不需要使用pushstate,现在电脑上安的浏览器基本上都支持pushstate,所以在不更改backbone源码的前提下,只能采取这种形式来模拟一种pushstate不支持,降级到hashchange处理的场景。

好在这个demo里面,其它的代码形式都没有改变,最主要是单页链接的地址还是原来的那个形式:

<li><a spa href="/">首页</a></li>
<li><a spa href="/list">列表</a></li>
<li><a spa href="/detail/1">详情</a></li>
<li><a spa href="/about">关于</a></li>

接下来在chrome中新开一个选项卡,打开demo2的链接,按照demo1的测试操作,做一下测试:点击列表链接;点击详情链接;点击关于链接;点击浏览器倒退;点击浏览器倒退;点击浏览器倒退;点击浏览器前进;点击浏览器前进;点击浏览器前进。观察地址栏及控制台的变化。

最后会发现,控制台的打印情况跟demo1是一致的。但是浏览器的地址不再是demo1那种形式的地址,比如点击列表链接后,页面地址变成了这种hash形式:

图片 3

说明这个场景下的navigate方法,其实是通过改变hash来实现的。然后浏览器前进后退的时候也应该是通过hashchange事件来实现的。最后这个demo可以证明,backbone的history模块,确实可以完美地降级到hashchange来管理url,而且这个变化对于我们的业务代码来说是透明的。

demo3

这个demo用来模拟连hashchange都无法使用的场景。它与demo1的区别也仅仅在于history模块初始化的方式,它的是:

Backbone.history.start({hashChange: false, root: ROOT_BASE + '/demo3.html/'});

通过显示的配置hashChange为false,告诉backbone不使用hashchange管理url。在这个场景下backbone.history.navigate方法,会直接进行url跳转,而不会用到pushstate以及hash。正是如此,navigate最后并不会触发url的回调函数,毕竟页面已经重载了。但是backbone能做到的就是,当页面初始化的时候,与页面地址匹配的回调函数还是会被执行,这也就保证了它在这种场景下,url地址与页面内容的一致性。

不过这个demo3打开后,点击那些“单页链接”,最后都会报404,毕竟它只是用来模拟这个特殊情况而已。但是从它start方法的源码来看,backbone确实能做到在页面初始化的时候执行与它对应的回调。通过这个demo,最后完全证明了backbone在url管理时的兼容程度,确实很全面。实际工作中,可以考虑仅借鉴demo1的方法即可。

最后,还要再补充一下的就是如果是通过demo1那种方式初始化History模块,那么demo3这个场景应该在绝大部分浏览器都不会出现。因为即使在那些不支持hashchange的浏览器上,backbone内部也通过定时器加iframe的方式,来模拟hashchange。也就是说如果不手动把hashchange配置为false的话,backbone总会有一个模拟的hashchange作为备用。这样它就能让你的应用始终保持SPA的状态了。要想了解backbone内部管理url的细节,可以仅看backbone源码部分的router模块和history模块,最主要的就是history模块的start和navigate方法,这两个方法是url管理初始化和跳转控制的核心,从中也能学到一些关于location使用的技巧。

小结

这篇文章的目的就是为了介绍spa里面url管理的思路以及backbone来管理url的做法。由于我到目前为止,还没做过单页的应用,所以这里面有的方法或者观点不一定完全正确,希望有经验的朋友看到之后能帮忙指正,感谢~下一篇介绍如何管理SPA里面的页面内容,方法正在琢磨中…

上一篇:1)字蛛安装,将"huawen.ttf"字体文件 下一篇:韦德体育兼顾浏览器的通用方法,在什么时候你都还可以使用浮动来完成Web的布局

更多阅读

SPA应用的核心在于使用无刷新的方式更改

前端 2020-01-04
问题: 本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理。SPA应用的核心在于使用...
查看全文

韦德体育兼顾浏览器的通用方法,在什么

前端 2020-01-04
1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? ** 特征...
查看全文

首先先看下变量提升的规则,把所有变量

前端 2020-01-04
首先先看下变量提升的规则 from me: 1、变量提升 在ES6之前,声明变量都是用var,会出现变量提...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有