概述

这是我在单页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. lastIndexOf() 找出指定元素出现的所有位置（返回的是下标数组）---lastIndexOf() 这个方法是倒叙查找，正序的是indexOf()

    var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.las ...

  2. svn的下载及安装

    什么是SVN: SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. SVN的下载安装: 下载地址:https: ...

  3. [leetcode]84. Largest Rectangle in Histogram直方图中的最大矩形

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  4. Sublime Text3快捷键大全

    选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数 ...

  5. Python开发——【条件】语句

    单分支 # if 条件: # 满足条件后要执行的代码 if 2>1: print("2>1") 双分支 # if 条件: # 满足条件后要执行的代码 # else: # ...

  6. Hibernate Generic DAO的介绍安装和使用

    java 的包挺多,比c#多 . jar包一个名,解压缩出来又出来又叫另一个名 .搜索起来,内容都分散的很 http://mvnrepository.com  maven库搜索 com.googlec ...

  7. java【基础】日期操作

    主要是date类,SimpleDateFormat类以及Calendar类的使用. date表示日期,simpleDateFormat 表示日期格式化,Calendar一般用来做时间的操作,比如加减天 ...

  8. python发送邮箱

    一.Python发送邮件 import smtplib from email.mime.text import MIMEText def send(email_to,title,content): m ...

  9. virtual和abstract的区别

    virtual和abstract都是用来修饰父类的,前面不能用private私有,要不然就会出现编译错误:虚拟方法或抽象方法是不能私有的.  毕竟加上virtual或abstract就是让子类重新定义 ...

  10. scp复制文件到指定端口

    1.scp基本格式 scp file user@host:/dir 2.scp复制文件到指定端口 scp默认连接的端口是22端口,如果ssh不是使用标准的22端口则使用-P(P大写)指定: scp - ...