锚接口(上)——hashchange api 和 $.uriAnchor
概述
这是我在单页Web应用这本书上看到的方法，并深入的研究了一下，把结果记录在下面，供以后开发时参考，相信对其它人也有用。
说明一下，这个方法已经过时了，H5有更新的方法：history api，我们在锚接口(下)会讲到。
引子
自从接触单页面spa之后，我就对它的路由非常好奇：既然不是传统的利用文件夹存放路径的形式来路由的话，那到底单页面spa是怎么路由的呢？
更关键的是，复制url并在另一个页面打开，内容为什么不会变呢？
说明
- url的hash值改变的时候，页面并不会刷新，这是唯一改变url而不刷新页面的方法。
- 可以利用
window.location.hash给url添上hash值。 - url的hash值改变的时候，会触发一个hashchange事件，通过监听这个hashchange事件可以做一些处理。
- 监听这个hashchange事件的时候可以通过
window.location.hash获得url的hash值。
解决方案
SPA怎么路由
- SPA切换页面的时候，记录哪些模块需要渲染，哪些不需要渲染，然后做成hash值。
- SPA切换页面后，把这个hash值放在url中，生成一个新的url。
- 由于url的hash值改变的时候，页面并不会刷新，所以切换页面时，页面不刷新。
- 当浏览器按后退键的时候，url发生改变，因为是hash值改变，页面也不刷新。
- 此时会触发一个hashchange事件。
- 通过监听这个hashchange事件，获得此时的hash值。
- 通过这个hash值可以知道哪些模块需要渲染，从而渲染他们。
- 渲染时url没有发生改变，页面仍然不刷新。
- 路由完成，整个过程页面不刷新。
复制url并在另一个页面打开
由于页面加载的时候不触发hashchange事件，那复制url并在另一个页面打开的时候怎么获取hash里面的数据呢？
解决方案其实很简单，在页面加载的时候，用js触发一次hashchange事件即可。
例子
下面是我编写的一段测试代码供大家参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
//自动生成数组
function generateNum (num){
var ret = [];
for (var i = 0; i < num; i++) {
ret.push(Math.ceil(100*Math.random()));
};
return ret;
}
//hashchange事件，如果有hash值，则输出到oDiv。
function onHashchange() {
var oDiv = document.getElementById("div1");
console.log(window.location.hash.substring(1));
if(window.location.hash.substring(1)) {
oDiv.innerHTML = window.location.hash.substring(1);
}
}
//页面加载
window.onload=function (){
//加载时触发一次hashchange事件
$(window)
.bind( 'hashchange', onHashchange )
.trigger( 'hashchange' );
//点击事件，把数组装在hash里面
document.getElementById("input1").onclick=function(){
window.location.hash = generateNum (6);
}
}
</script>
</head>
<body>
这是数组：
<div id="div1"></div>
<input type="button" value="生成随机数组" id="input1" />
</body>
</html>
其它
- 这项技术不仅在SPA中有用处，而且在翻页，商城选购等地方也有用到，我就不一一举例了。
- jQuery封装了
window.location.hash方法，提供了更加便捷的方法：$.uriAnchor。主要是利用$.uriAnchor.setAnchor()方法来修改hash值，用$.uriAnchor.makeAnchorMap()方法来读取hash值。 - 由于
window.location.hash方法的初衷并不是做这个的，所以H5特别为这个写了一个api——history api，我会在锚接口(下)里面讲。
锚接口(上)——hashchange api 和 $.uriAnchor的更多相关文章
- 怎样调通微信支付及微信发货通知接口（Js API）
怎样调通微信支付及微信发货通知接口(Js API) 微信支付提供了一个支付測试页面,微信支付正式使用须要測通支付.发货通知接口 .告警接口.维权接口.告警接口.维权接口非常easy.支付界面调通也相对 ...
- java反射之获取所有方法及其注解（包括实现的接口上的注解），获取各种标识符备忘
java反射之获取类或接口上的所有方法及其注解(包括实现的接口上的注解) /** * 获取类或接口上的所有方法及方法上的注解(包括方法实现上的注解以及接口上的注解),最完整的工具类,没有现成的工具类 ...
- 优酷视频上传api及demo代码
1,优酷正常上传流程: 1). create:连接开放平台上传接口服务器,服务器端会返回upload_token以及upload_server_uri.2). create_file:连接上传服务器( ...
- 使用python或robotframework调multipart/form-data接口上传文件
这几天调一个multipart/form-data类型的接口,遇到点小阻碍.之前同事有使用urllib库写了个类似的方法实现,比较长,想要改的时候发现不太好使.在网上查找发现用requests库做这个 ...
- 常用函数式接口与Stream API简单讲解
常用函数式接口与Stream API简单讲解 Stream简直不要太好使啊!!! 常用函数式接口 Supplier<T>,主要方法:T get(),这是一个生产者,可以提供一个T对象. C ...
- spring boot:接口站增加api版本号后的安全增强(spring boot 2.3.3)
一,接口站增加api版本号后需要做安全保障? 1,如果有接口需要登录后才能访问的, 需要用spring security增加授权 2,接口站需要增加api版本号的检验,必须是系统中定义的版本号才能访问 ...
- jdbc java数据库连接 2）jdbc接口核心的API
JDBC接口核心的API java.sql.* 和 javax.sql.*(java2.0以后更新的扩展) |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接 ...
- 为什么开发者热衷在Stack Overflow上查阅API文档？
摘要:一项新研究跟踪了Android开发者的访问历史,发现开发者多达二分之一的文档是从Stack Overflow上获取到的,而Stack Overflow上的示例也多于官方指南,开发者通过搜索更多时 ...
- 为什么不能将客户端的连接请求跳转或转发到本机lo回环接口上？
一.为什么不能将本机的请求跳转/转发到回环接口上? 如上图一样,服务器对外只开放了一个80端口,但是web服务监听在了lo 接口上8080端口上,现在要实现外网通过访问服务器的80端口,来提供web服 ...
随机推荐
- Git如何在不提交当前分支的情况下切换到其它分支进行操作——git stash
假如现在的Bug你还没有解决,而上边又给你派了一个新的Bug,而这个Bug相比较现在正在苦思冥想的Bug比较容易解决. 你想先解决新的Bug,可是之前的Bug还没有解决完而不能提交.怎么办? 解决方法 ...
- vue.js建立一个简单的表格
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Hibernate 再接触 总结
- JDK中的注解简单了解
0.注解(注解是给编译器看的东东) 注解的定义方式是@Interface,注解属性定义是类似于普通类的方法定义的,注解属性赋值是使用default关键字完成的,如下图所示 注解在定义时可以给默认值,也 ...
- (vue.js)element ui 表单重置
el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...
- Android 查阅博客2_APT
https://mp.weixin.qq.com/s/3zrAzOUGpovRRbuYnce3uw APT(Annotation Processing Tool) 即注解处理器,是一种注解处理工具,用 ...
- python--第十三天总结（html ，css 语法）
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
- Django REST framework的分页
DRF分页组件 为什么要使用分页 我们数据表中可能会有成千上万条数据,当我们访问某张表的所有数据时,我们不太可能需要一次把所有的数据都展示出来,因为数据量很大,对服务端的内存压力比较大还有就是网络传输 ...
- vue组件之时间组件
效果图 主要有两个注意点,前面时分,通过定时器,1秒钟取一次,只要数据变了立刻让他展示,当然也可以1分钟取一次,我看了下定时器和真正的时间 其实有一定的偏差的,大约要1分多才会改变,所以我用了1秒取一 ...
- Spring Boot 整合mybatis 使用多数据源
本人想要实现一个项目里面多个数据库源连接,所以就尝试写一个demo,不多说,先贴结构,再贴代码,可以根据以下的顺序,直接copy解决问题. 首先,dao和resource下的mappers可以用myb ...