概述

这是我在单页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. 如何将R中的data frame对象的数据导入到DB

    在使用ARIMA模型来预测我们的销量的时候,如果保存预测版本进DB,以供后续分析呢 1. 在定义变量阶段我们定义了dfResult      <- data.frame() 这是一个data f ...

  2. 让openvpn自启动的命令笔记(windows)

    "C:\Program Files\OpenVPN\bin\openvpn.exe" --client-config-dir "C:\Program Files\Open ...

  3. 吴裕雄 python深度学习与实践（16）

    import struct import numpy as np import matplotlib.pyplot as plt dateMat = np.ones((7,7)) kernel = n ...

  4. 常用的stm32库函数

    //初始化的方式:先定义初始化机构体.再打开时钟使能.在对每一组GPIO口进行初始化. GPIO_InitTypeDef LED_GPIO; RCC_APB2PeriphClockCmd(RCC_AP ...

  5. db2 SQL6036N解决办法

    问题背景: 数据库在进行大量的运算和数据处理的过程中,IO.CPU等资源消耗非常高的时候,强制停止数据库.db2stop force 结果数据库命令迟迟没有响应.这个时候对数据库进行其他操作均无响应, ...

  6. 【Django】重定向

    view函数中使用重定向方法 return HttpResponseRedirect('redir2.html')的时候不自觉的在前面加了request参数,结果报错: TypeError at /b ...

  7. Python设计模式 - UML - 类图(Class Diagram)

    简介 类图是面向对象分析和设计的核心,用来描述系统各个模块中类与类之间.接口与接口之间.类与接口之间的关系,以及每个类的属性.操作等特性,一般在详细设计过程中实施. 类图本身就是现实世界的抽象,是对系 ...

  8. flutter 自己整理

    2018-05 资料 常见问题解决处 https://flutter.io/flutter-for-android/ 起步 api widget https://flutter.io/docs/ 其他 ...

  9. 698. Partition to K Equal Sum Subsets 数组分成和相同的k组

    ［抄题］: Given an array of integers nums and a positive integer k, find whether it's possible to divide ...

  10. Myisam 和 Innodb 区别

    MySQL默认采用的是MyISAM. MyISAM不支持事务,而InnoDB支持.InnoDB的AUTOCOMMIT默认是打开的,即每条SQL语句会默认被封装成一个事务,自动提交,这样会影响速度,所以 ...