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

  自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过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. 使用Promise发送多个异步请求, 全部完成后再执行

    const datas = idList .map(id => url+'/id') .map(url => fetch(url).then(res => res.json())); ...

  2. python多任务抓取图片

    import re import urllib.request import gevent def download(image_download, images_path,i): headers = ...

  3. Large-Margin Softmax Loss for Convolutional Neural Networks

    paper url: https://arxiv.org/pdf/1612.02295 year:2017 Introduction 交叉熵损失与softmax一起使用可以说是CNN中最常用的监督组件 ...

  4. git知识总结-3.gitignore文件说明

    1.前言 一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表. 通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等. 在这种情况下,我们可以创建一个名 ...

  5. LVS节点健康检查及管理脚本

    在LVS负载均衡主节点上,模拟keepalived健康检查功能管理LVS节点,当节点挂掉从服务器池中剔除,好了再加到服务器池中来. 工具:yum install -y ipvsadm web03:10 ...

  6. dataguard丢失归档日志处理

    检查alert日志发现报错如下 Wed Mar 27 15:40:30 2019Managed Standby Recovery not using Real Time ApplyParallel M ...

  7. 逆向 make 打包错误解决方案 make: *** [internal-package] Error 2

    修改deb.mk文件第6行的压缩方式为gzip vim $THEOS/makefiles/package/deb.mk _THEOS_PLATFORM_DPKG_DEB_COMPRESSION ?= ...

  8. SP283 NAPTIME - Naptime

    SP283 NAPTIME - Naptime 题意: 在某个星球上,一天由N小时构成.我们称0-1点为第一个小时,1-2点为第二个小时,以此类推.在第i个小时睡觉能恢复Ui点体力.在这座星球上住着一 ...

  9. buaaoo_first_assignment

    四周之前,我不懂面向对象是什么:四周之后,我依然不懂面向对象是什么. 一.第一次作业 (1)实现 说起来,本次作业是最惨烈的一次. 虽然它很简单,但由于未熟悉正则表达式的应用,导致判断wrong fo ...

  10. 烽火2640路由器命令行手册-13-VPDN(L2TP,PPTP,PPPOE)配置命令

    VPDN(L2TP,PPTP,PPPOE)配置命令 目  录 第1章 VPDN配置命令... 1 1.1 VPDN配置命令... 1 1.1.1 accept-dialin. 1 1.1.2 doma ...