SPA 单页面应用程序。
看到这个问题,先说下自己的理解到的程度,再去参考做修正,争取这一次弄懂搞清楚
自己的理解: 单页面应用程序,解决浏览器获取数据刷新页面的尴尬,通过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 单页面应用程序。的更多相关文章
- 通过Blazor使用C#开发SPA单页面应用程序(3)
今天我们来看看Blazor开发的一些基本知识. 一.Blazor组件结构 Blazor中组件的基本结构可以分为3个部分,如下所示: //Counter.razor //Directives secti ...
- 通过Blazor使用C#开发SPA单页面应用程序(1)
2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Co ...
- 通过Blazor使用C#开发SPA单页面应用程序(2)
今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...
- 通过Blazor使用C#开发SPA单页面应用程序(4) - Ant Design Button
前面学习了Blazor的特点.环境搭建及基础知识,现在我们尝试的做个实际的组件. Ant Design是蚂蚁金服是基于Ant Design设计体系的 UI 组件库,主要用于研发企业级中后台产品.目前官 ...
- 单页面应用程序(SPA)
一.概念 ①在一个页面上实现网站的大部分功能,就是单页面应用程序,是一种常见的网页开发模式. ②整个网站就只有一个Html文件,每次在切换页面时,不需要请求服务器,只要通过本地的js来切换即可.这样可 ...
- 单页面应用程序(SPA)的优缺点
我们通常所说的单页面应用程序通常通过前端框架(angular.react.vue)进行开发,单页面应用程序将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScr ...
- Ember.js实现单页面应用程序
1.1.1 摘要 单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序,不会经常 ...
- Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布
JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...
- 只需要4步就可以将asp.net mvc变成SPA(单页面)应用,实现无刷新页面切换!
SENNA.js Senna.js是一个超快速的单页面应用程序引擎,轻松构建基于Web的现代应用程序,只有大约8KB的JavaScript而没有任何依赖性.还提供非常酷炫的动画效果.想要详细了解的朋友 ...
随机推荐
- CentOS7.6搭建redis4.0.1 cluster集群
1. 操作系统信息: $ uname -a Linux iZbp11d57wmumnwuihb2czZ -.el7.x86_64 # SMP Fri Feb :: UTC x86_64 x86_64 ...
- 使用SpringSecurity体验OAUTH2之一 (入门1)
OAUTH2是一种安全的授权框架,其原理在网上有许多文章上可以看到.但从实践角度,好的文章比较少.SpringSecurity框架本身是支持OAUTH2的,所以下面通过使用SpringSecurity ...
- JUC--volatiley&CAS
public class VolatileTest { public static void main(String[] args) { ThreadDemo td = new ThreadDemo( ...
- ThinkPHP 2053错误
这个报错是调用存储过程的时候产生的,用的是5.1的代码是根据官方文档写的,我怀疑5.0也有这个问题.去官方查了一下发现不少人有这个问题,但是官方都没有回应过,只能自己动手一步步调了. $center ...
- js 字符串切割
对于字符串的切割截取平时所用可能不是特别多,而且分的比较细,所以自备自查.有备无患. 由于之前所有均在一个demo测试,若是哪里打错了,敬请谅解.一些其余属性找时间继续添加. 1.函数:split() ...
- 依赖背包——cf855C好题
比较裸的依赖背包,但是想状态还是想了好久 转移时由于边界问题,虽然可以倒序转移,但当容量为0|1的时候,由于有初始值的存在 很难再原dp数组上进行修改,所以额外用tmp数组来保存修改后的值 #incl ...
- Django报错:OSError: raw write() returned invalid length 4 (should have been between 0 and 2)
在使用Django时Django报错:Django报错:OSError: raw write() returned invalid length 4 (should have been between ...
- python 上台阶
题目描述: 有一楼梯共m级,刚开始在第一级,若每次只能跨上一级或两级,要走上第m级,共有多少走法? 注:规定从一级到一级有0种走法 ''' 有一楼梯共m级,刚开始在第一级,若每次只能跨上一级或两级,要 ...
- git 仓库中删除历史大文件
git 仓库中删除历史大文件 在git中增加了一个很大的文件,而且被保存在历史提交记录中,每次拉取代码都很大,速度很慢.而且用删除 提交历史记录的方式不是很实际. 以下分几个步骤介绍如何减小.git文 ...
- html_Dom
Document: 每个载入浏览器的HTML文档都会成为一个Document对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 并且Document 对象是 Wi ...