SPA页面初试

之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location.hash是什么东西)

其实,SPA的原理就是,一开始将一些必要的页面都加载进来,当你在页面输入别的路由的时候,其实还是待在当前的页面,只不过是他识别出你想要去的地址,然后将那个页面的内容获取到,替代掉当前页面的内容,并且相应的改变url地址,这样给人看起来就好像到了另一个页面,实际上你还是在这个页面里,没有离开过.
比如,例如当前你在localhost:8080/index.html这个页面时,你想跳转到#list-view页面(使用hashChange),或者你点击某个跳转按钮要跳转到那个页面的时候,他先获取你那个#list-view页面的内容,然后将当前页面的内容清除掉,然后再把list-view的内容呈现出来,并没有跳转到别的页面,你从头到尾都是在这个页面里,不过url地址会变化,因此看起来就像你到了另一个页面,这样给人的用户体验特别好,因为不需要等待页面加载过程.

说了这么多,我们来根据他的原理做一个SPA的小应用吧(里面的html和css代码直接复制了我之前看的那个博客的作者的,因为懒得自己设计)

html代码如下:

    <!DOCTYPE html>
<html>
  <head>
    <title>SPA</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="spa.js"></script>
  </head>
  <body>
    <div class="pageview" style="background: #3b76c0" id="main-view">
      <h3>首页</h3>
      <div title="-list-view" class="right-arrow"></div>
    </div>
    <div class="pageview" style="background: #58c03b;display: none" id="list-view">
      <h3>列表页面</h3>
      <div class="left-arrow"></div>
      <div title="-detail-view" class="right-arrow"></div>
    </div>
    <div class="pageview" style="background: #c03b25;display: none" id="detail-view">
      <h3>列表详情页面</h3>
      <div class="left-arrow"></div>
    </div>
  </body>
</html>

在这里,我们先创建了三个div,第一个main-view的display不设置,其他的两个display设置为node,这样我们一开始进去就只能看到main-view这个页面

之后,我们可以通过js代码来模拟SPA对路由跳转的处理

var states ;
var currentState;
$(document).ready(function() {
  states = registState();
  currentState = init();
  //监听hash路由变化
  window.addEventListener("hashchange", function() {
    var nextState;
    console.log(window.location.hash);
    //判断地址是否为空,若为空,则默认到main-view页面
    if (window.location.hash == "") {
      nextState = "main-view";
    }
    else {
      //若不为空,则获取hash路由信息,得到下一个状态
      nextState = window.location.hash.substring(1);
    }
    //判断当前状态是否注册过(是有存在这个状态)0g
    var validState = checkState(states, nextState);
    //若不存在,则返回当前状态
    if (!validState) {
      console.log("you enter the false validState");
      window.location.hash = "#" + currentState;
      return;
    }
    $('#'+ currentState).css("display", "none");
    $('#'+ nextState).css("display", "block");
    currentState = nextState;
  })

})
//状态注册
function registState() {
  var states = [];
  //状态注册
  $(".pageview").map(function() {
    return states.push($(this)[0].id);
  })
  return states;
}
//初始化,对用户一开始输入的url进行处理
function init() {
  var currentState = window.location.hash.substring(1);
  if (currentState == "") {
    currentState = "main-view";
  }
  if (currentState != "main-view") {
    $('#main-view').css("display", "none");
    $('#'+ currentState).css("display", "block");
  }
  return currentState;
}
//判断状态是否存在
function checkState(states, nextState) {
  var tof = false;
  states.forEach(function(element) {
      if (element == nextState) {
        tof = true;
      }
    })
  return tof;
}

这里,我们首先将每一个div当做一个状态,当用户输入的地址匹配了某个状态之后,就呈现那个状态所代表的页面(每个div的状态名我们设置为他们的id名字)

代码我觉得还算比较清晰,首先,我们就先注册这三个div的状态(registState),然后根据用户输入的url地址来初始化页面,返回匹配的那个状态的页面(init)。

并且,注册一个hashchange事件,这个事件是当用户输入的hash地址变化后触发,我们在里面获取用户的输入地址,然后返回匹配的那个状态的页面,若没有匹配的状态,则返回上一个匹配的状态。以下的截图

值得一提的是,我里面替换页面的做法是:将当前状态的页面的display设置为none,然后将下一个状态的页面的display设置为block,这样就完成了页面的替换以及路由的变换,而且不会导致路由的变化

初始页面:

修改路由地址,修改为file:///C:/Users/chenjg/Desktop/Interest/SPA/index.html#list-view,可以看到页面发送了相应的变化

输入错的地址,没有匹配到合适的状态,则恢复到上一个状态:file:///C:/Users/chenjg/Desktop/Interest/SPA/index.html#list-vi

接下来打算继续试下路由的嵌套,以及动态加载html文件作为路由的模块。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏简书专栏

基于Excel2013的PowerQuery入门

所有要进行操作的文件下载链接: https://pan.baidu.com/s/10VtUZw8G-Ly-r4VypntjiA 密码: y5qu 下载成功后,...

3.8K5
来自专栏技术博文

php性能监测模块XHProf

一,什么是XHProf XHProf是一个分层PHP性能分析工具。它报告函数级别的请求次数和各种指标,包括阻塞时间,CPU时间和内存使用情况。一个函数的开销,可...

3778
来自专栏用户2442861的专栏

linux split join paste uniq tee sort 工作中文本操作常用方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/details...

1111
来自专栏流柯技术学院

Jmeter常用函数之__CSVRead使用

__CSVRead函数用于对脚本进行参数话,当脚本中不同变量需要不同参数值时,可以考虑__CSVRead函数。 以登录的用户名、密码为例:实际进行压力测试时,...

991
来自专栏企鹅号快讯

前端实现本地图片读取与简单压缩功能

在上一篇文章Javascript 基础夯实 —— 通过代码构建一个包含文件的 FormData 对象中提到了前端压缩图片的功能,所以本篇文章就来实现一下这个功能...

3038
来自专栏james大数据架构

springmvc注入类 NoUniqueBeanDefinitionException: No qualifying bean of type [] is defined: expected sin

在springmvc中注入服务时用@Service 当有两个实现类时都标明@Service后则会出现异常: nested exception is org.sp...

2217
来自专栏F-Stack的专栏

FreeBSD下的工具(sysctl、netstat等)如何移植到F-Stack

F-Stack基于DPDK,绕过内核的协议栈,移植了FreeBSD协议栈到用户态,在大幅提高性能的同时,常规网络设置分析工具(如sysctl、netstat、i...

3908
来自专栏生信宝典

Linux学习 - 管道、标准输入输出

Linux下的标准输入、输出、重定向、管道 在Linux系统中,有4个特殊的符号,<, ‘>’, ‘|’, ‘-‘,在我们处理输入和输出时存在重要但具有迷惑性的...

3505
来自专栏linux驱动个人学习

动态链接

要解决空间浪费和更新困难这两个问题最简单的办法就是把程序的模块相互分割开来,形成独立的文件,而不再将它们静态地链接在一起。简单地讲,就是不对那些组成程序的目标文...

1712
来自专栏开发 & 算法杂谈

基于Lockset的数据竞争检测方法汇总(四)

     今天讲的这篇文论中提到的Lockset方法同样也是和Happens-Before结合来进行动态数据竞争检测,这篇论文中使用的Happens-Befor...

1454

扫码关注云+社区

领取腾讯云代金券