概述

这是我在单页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. java.io.Flushable 接口

    package java.io; import java.io.IOException; /** * 在什么情况下用呢? 缓冲输出到一个流中的情况下,这个流要刷新. */ public interfa ...

  2. BuildTool

    (一)BuildTool是什么 BuildTool 构建工具  ,是一个把源代码生成可执行应用程序的过程自动化的程序(例如Android app生成apk).构建包括编译.连接跟把代码打包成可用的或可 ...

  3. HLSL ddx / ddy

    [HLSL ddx / ddy] 在光栅化的时刻,GPUs会在同一时刻并行运行很多Fragment Shader,但是并不是一个pixel一个pixel去执行的,而是将其组织在2x2的一组pixels ...

  4. truecrype加密卷的使用

    truecrype7.1 文件加密 隐藏加密 密钥加密码双重保护

  5. 105. Construct Binary Tree from Preorder and Inorder Traversal根据前中序数组恢复出原来的树

    ［抄题］: Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume ...

  6. jameter一般关注的指标

    对于B/S架构软件,一般会关注如下web服务性指标. 1.Avg Rps:平均每秒钟的响应次数==总请求次数  /  秒数 2.Avg time to last byte per terstion ( ...

  7. MySQL数据查询之多表查询

    多表查询 多表联合查询 #创建部门 CREATE TABLE IF NOT EXISTS dept ( did int not null auto_increment PRIMARY KEY, dna ...

  8. 选择困难症的福音——团队Scrum冲刺阶段-Day 1领航

    选择困难症的福音--团队Scrum冲刺阶段-Day 1领航 各个成员在 Alpha 阶段认领的任务 小组成员 分工 任务量 严域俊 完成小游戏接口部分.小游戏编写部分 21 吴恒佚 决策判断部分.小游 ...

  9. HDU 3667.Transportation 最小费用流

    Transportation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  10. python基础之Day15

    一.函数递归 什么是函数递归: 函数递归调用是一种特殊的嵌套调用,在调用一个函数的过程中,又直接或间接地调用了该函数本身. 其中,函数的递归有明确的结束条件,不能无限制的调用,否则会撑破内存,在Pyt ...