概述

这是我在单页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. CentOS下安装Docker-CE

    1.安装最新版本的话可以使用阿里云的自动安装脚本: curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 2.安装指定的 ...

  2. 《Android Studio开发实战 从零基础到App上线》资源下载和内容勘误

    转载于:https://blog.csdn.net/aqi00/article/details/73065392 资源下载 下面是<Android Studio开发实战 从零基础到App上线&g ...

  3. SSM商城项目（六）

    1.学习计划 1.Redis服务器搭建 2.Redis持久化 3.Redis集群搭建 4.Jedis 5.Solr服务器安装 2.Redis的安装 2.1. Redis的安装 Redis是c语言开发的 ...

  4. MFC笔记3

    1. C6有默认的提示代码功能,但是其默认的快捷键是Ctrl + Space,这一般情况下是切换输入法快捷键,所以,只需重新设置一下快捷键就可以实现提示代码功能,具体设置位置如下: 工具(T) -&g ...

  5. 大数据入门到精通10--spark rdd groupbykey的使用

    //groupbykey 一.准备数据val flights=sc.textFile("data/Flights/flights.csv")val sampleFlights=sc ...

  6. 机器学习性能指标（ROC、AUC、召回率）

    混淆矩阵 构造一个高正确率或高召回率的分类器比较容易,但很难保证二者同时成立 ROC 横轴:FPR(假正样本率)=FP/(FP+TN) 即,所有负样本中被分错的比例 纵轴:TPR(真正样本率)=TP/ ...

  7. Python类继承（转发）

    目录 一.概述 二.类的继承 2.1 继承的定义 2.2 构造函数的继承 2.3 子类对父类方法的重写 三.类继承的事例 回到顶部 一.概述 面向对象编程 (OOP) 语言的一个主要功能就是“继承”. ...

  8. 【读书笔记】深入应用C++11代码优化与工业级应用 读书笔记01

    第一章 使用C++11让程序更简洁.更现代 1.1  类型推导 1.1.1  auto类型推导 1.auto关键字的新意义 不同于python等动态类型语言的运行时进行变量类型的推导,隐式类型定义的类 ...

  9. VUE项目小试牛刀

    首先安装webstorm:http://www.jetbrains.com/webstorm/  (推荐) 再安装node.js:https://nodejs.org/en/download/  (必 ...

  10. [leetcode]26. Remove Duplicates from Sorted Array有序数组去重(单个元素只出现一次)

    Given a sorted array nums, remove the duplicates in-place such that each element appear only once an ...