概述

这是我在单页Web应用这本书上看到的方法，并深入的研究了一下，把结果记录在下面，供以后开发时参考，相信对其它人也有用。

说明一下，这个方法已经过时了，H5有更新的方法：history api，我们在锚接口(下)会讲到。

引子

自从接触单页面spa之后，我就对它的路由非常好奇：既然不是传统的利用文件夹存放路径的形式来路由的话，那到底单页面spa是怎么路由的呢？

更关键的是，复制url并在另一个页面打开，内容为什么不会变呢？

说明

  1. url的hash值改变的时候，页面并不会刷新，这是唯一改变url而不刷新页面的方法。
  2. 可以利用window.location.hash给url添上hash值。
  3. url的hash值改变的时候，会触发一个hashchange事件，通过监听这个hashchange事件可以做一些处理。
  4. 监听这个hashchange事件的时候可以通过window.location.hash获得url的hash值。

解决方案

SPA怎么路由

  1. SPA切换页面的时候，记录哪些模块需要渲染，哪些不需要渲染，然后做成hash值。
  2. SPA切换页面后，把这个hash值放在url中，生成一个新的url。
  3. 由于url的hash值改变的时候，页面并不会刷新，所以切换页面时，页面不刷新。
  4. 当浏览器按后退键的时候，url发生改变，因为是hash值改变，页面也不刷新。
  5. 此时会触发一个hashchange事件。
  6. 通过监听这个hashchange事件，获得此时的hash值。
  7. 通过这个hash值可以知道哪些模块需要渲染，从而渲染他们。
  8. 渲染时url没有发生改变，页面仍然不刷新。
  9. 路由完成，整个过程页面不刷新。

复制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>

其它

  1. 这项技术不仅在SPA中有用处，而且在翻页，商城选购等地方也有用到，我就不一一举例了。
  2. jQuery封装了window.location.hash方法，提供了更加便捷的方法：$.uriAnchor。主要是利用$.uriAnchor.setAnchor()方法来修改hash值，用$.uriAnchor.makeAnchorMap()方法来读取hash值。
  3. 由于window.location.hash方法的初衷并不是做这个的，所以H5特别为这个写了一个api——history api，我会在锚接口(下)里面讲。

锚接口(上)——hashchange api 和 $.uriAnchor的更多相关文章

  1. 怎样调通微信支付及微信发货通知接口（Js API）

    怎样调通微信支付及微信发货通知接口(Js API) 微信支付提供了一个支付測试页面,微信支付正式使用须要測通支付.发货通知接口 .告警接口.维权接口.告警接口.维权接口非常easy.支付界面调通也相对 ...

  2. java反射之获取所有方法及其注解（包括实现的接口上的注解），获取各种标识符备忘

    java反射之获取类或接口上的所有方法及其注解(包括实现的接口上的注解) /** * 获取类或接口上的所有方法及方法上的注解(包括方法实现上的注解以及接口上的注解),最完整的工具类,没有现成的工具类 ...

  3. 优酷视频上传api及demo代码

    1,优酷正常上传流程: 1). create:连接开放平台上传接口服务器,服务器端会返回upload_token以及upload_server_uri.2). create_file:连接上传服务器( ...

  4. 使用python或robotframework调multipart/form-data接口上传文件

    这几天调一个multipart/form-data类型的接口,遇到点小阻碍.之前同事有使用urllib库写了个类似的方法实现,比较长,想要改的时候发现不太好使.在网上查找发现用requests库做这个 ...

  5. 常用函数式接口与Stream API简单讲解

    常用函数式接口与Stream API简单讲解 Stream简直不要太好使啊!!! 常用函数式接口 Supplier<T>,主要方法:T get(),这是一个生产者,可以提供一个T对象. C ...

  6. spring boot:接口站增加api版本号后的安全增强(spring boot 2.3.3)

    一,接口站增加api版本号后需要做安全保障? 1,如果有接口需要登录后才能访问的, 需要用spring security增加授权 2,接口站需要增加api版本号的检验,必须是系统中定义的版本号才能访问 ...

  7. jdbc java数据库连接 2）jdbc接口核心的API

    JDBC接口核心的API java.sql.*   和  javax.sql.*(java2.0以后更新的扩展) |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接 ...

  8. 为什么开发者热衷在Stack Overflow上查阅API文档？

    摘要:一项新研究跟踪了Android开发者的访问历史,发现开发者多达二分之一的文档是从Stack Overflow上获取到的,而Stack Overflow上的示例也多于官方指南,开发者通过搜索更多时 ...

  9. 为什么不能将客户端的连接请求跳转或转发到本机lo回环接口上？

    一.为什么不能将本机的请求跳转/转发到回环接口上? 如上图一样,服务器对外只开放了一个80端口,但是web服务监听在了lo 接口上8080端口上,现在要实现外网通过访问服务器的80端口,来提供web服 ...

随机推荐

  1. redis make编译失败的原因

    make clean redis编译失败可能是: 1.未安装gcc,gcc-c++ yum install gcc yum install gcc-c++ 2.未安装tcl yum install t ...

  2. react mobx 装饰器语法配置

    1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(我的项目执行上一句都会报错,所以都会执行) 1.git add . 2.git commit -m & ...

  3. mysql_day04

    MySQL-Day03回顾1.索引 1.普通索引 index 2.唯一索引(UNI,字段值不允许重复,但可以为NULL) 1.创建 1.字段名 数据类型 unique 2.unique(字段名), u ...

  4. db2开启监控monitor 查看快照snapshot

    ths   https://blog.csdn.net/huaishu/article/details/9671771 #查看监控器 db2 get monitor switches #打开监控器db ...

  5. IP路由配置之---------debugging调试

    实验设备:华三设备N台加一个PC 步骤一,打开屏幕输出开关,开启控制台对系统信息的监视功能 <H3C>terminal debugging #<H3C>terminal mon ...

  6. cacti的介绍、安装、配置、及维护

    一.cacti的介绍 Cacti 在英文中的意思是仙人掌的意思,Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.它通过snmpget来获取数据,使用 R ...

  7. windbg获取打印

    经常有QT MFC程序调用动态库无法查看内部打印 解决办法: 文件头部定义: #define UseDebugView #ifdef UseDebugView char g_Debug[256]; # ...

  8. py2和py3的区别总结

    1.编码 python2默认编码方式ASCII码(不能识别中文,要在文件头部加上  #-*- encoding:utf-8 -*-  指定编码方式) python3默认编码方式unicode(可识别中 ...

  9. js 原型链与继承

    var A = function(){ this.name="xiaoming"; } A.prototype.age=9; var a = new A(); console.lo ...

  10. ios 导航push跳转方向设置

    CATransition* transition = [CATransition animation]; transition.type = kCATransitionPush;//可更改为其他方式 ...