看到这个问题,先说下自己的理解到的程度,再去参考做修正,争取这一次弄懂搞清楚

  自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过ajax请求获取数据达到异步更新视图的按钮,原理的实现由两种,

  其一,通过hash值的变化,绑定onhashchange的回调函数更新视图,因为hash值的变化不会让页面失去响应,不会向服务器发送请求。下面列出几种可能改变hash值的方法,改变url中的hash。浏览器回退按钮可能出现历史记录中的url包含的hash值不一样,都将触发该事件;还有触发带瑁点的链接改变,再通过js直接获取location.hash来改变导致事件触发。

  其二,通过同H5 historyAPI 来添加向浏览器的历史栈中添加记录。过去的方法只有通过back,forward,go三个方法来实现前进后退和跳转。到H5多了pushState,replaceState方法。pushState只是单纯的添加并不跳转到该记录,而replaceState,替换记录整个历史记录的length长度不变化。 hitstory.pushState(data,title,url),向url里写入第一个参数数据,并指定title的值。执行完历史栈中添加了一条记录,通过执行一次popstate事件其中popstate用来监听历史记录的变化,可以理解为监听浏览器后退、前进的操作。绑定onpopstate事件后执行location.reload(); 因为兼容性问题,History.js用于修补。

SPA 单页面应用程序。的更多相关文章

  1. 通过Blazor使用C#开发SPA单页面应用程序(3)

    今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...

  2. 通过Blazor使用C#开发SPA单页面应用程序(1)

    2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...

  3. 通过Blazor使用C#开发SPA单页面应用程序(2)

    今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...

  4. 通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design Button

    前面学习了Blazor的特点.环境搭建及基础知识,现在我们尝试的做个实际的组件. Ant Design是蚂蚁金服是基于Ant Design设计体系的 UI 组件库,主要用于研发企业级中后台产品.目前官 ...

  5. 单页面应用程序(SPA)

    一.概念 ①在一个页面上实现网站的大部分功能,就是单页面应用程序,是一种常见的网页开发模式. ②整个网站就只有一个Html文件,每次在切换页面时,不需要请求服务器,只要通过本地的js来切换即可.这样可 ...

  6. 单页面应用程序(SPA)的优缺点

    我们通常所说的单页面应用程序通常通过前端框架(angular.react.vue)进行开发,单页面应用程序将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScr ...

  7. Ember.js实现单页面应用程序

    1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...

  8. Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布

    JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...

  9. 只需要4步就可以将asp.net mvc变成SPA(单页面)应用,实现无刷新页面切换!

    SENNA.js Senna.js是一个超快速的单页面应用程序引擎,轻松构建基于Web的现代应用程序,只有大约8KB的JavaScript而没有任何依赖性.还提供非常酷炫的动画效果.想要详细了解的朋友 ...

随机推荐

  1. Houdini Distributed Simulations and Render

    1.HQueue是我最早搭建到本地农场.经过测试,效率极其低下.基本上是个玩具,离真正的管理软件差的十万八千里. 不是说Hqueue不行,因为发现了用 农场管理软件API调用Houdini Rende ...

  2. python把列表前几个元素提取到新列表

    需要添加几个就循环几次   list = ['a','b','c','d','e'] new_list = [] for i in range(3): print(list[i]) new_list. ...

  3. NOI2004郁闷的出纳员

    传送门 题目看起来玄乎,但其实只需要一点点小 trick 就可以了. 我们可以用一个全局的 delta 来维护工资的调整记录 对于每一个新加入的员工,先判断是否低于最低工资下限,如果是,直接踢出,不做 ...

  4. centOS6.5 mysql-community-server安装失败

    卸载mysql,重新装 yum install mysql-server 图中没有放卸载的图 [root@cgrctenOS6 ~]# yum install mysql-community-serv ...

  5. Django之Orm的各种操作

    1.一般操作 ***必知必会13条*** <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 models.Cu ...

  6. Spring框架xml配置中属性ref与value的区别

    1.spring批量扫描mybatis的mapper,使用value 2.spring管理mybatis的单个mapper,用的是ref 虽然引用的是同一个bean,但两个对象的属相类型明显不一样,一 ...

  7. 使用JMeter的HTTP代理服务器录制app脚本

    1.添加一个线程组 2.添加一个HTTP代理服务器 3.设置手机网络连接 4.手机安装证书 a.进入jmeter安装目录,在bin目录下找到ApacheJMeterTemporaryRootCA.cr ...

  8. Net Framework 4.7.2 覆盖 Net Framework 4.5 解决办法

    场景:由于c盘空间不够,本机pc又安装了 vs2013 和 vs2017 : 所以通过,github上的一个工具,把vs2013 卸载完毕,只留下vs2017: 导致问题由于项目需要net frame ...

  9. 猎鱼达人_PC按键

    更新模式[强制] 更新版本[3.13] 更新链接[https://yunfei-1256035889.cos.ap-beijing.myqcloud.com/%E6%8C%89%E9%94%AE%E7 ...

  10. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...