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文件作为路由的模块。

SPA页面初试的更多相关文章

SPA页面
背景: 单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用,它将所有的活动均局限于一个Web页面中:这就表示Web应用被加载出来之后,W ...
requirejs+angularjs搭建SPA页面应用
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...
Html - SPA页面收集（有图）
场景,左图,又字段的布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
SPA页面缓存再优化二
部署到线上的步骤: 拿到打包之后的文件,删除服务器上的文件,再放上去的. 测试1: 更改js文件,删除并上传新包. 额外发现1:如果用户在上传期间,仍然在系统之内,此时即使将服务器上的包删除掉,用户不 ...
SPA页面性能优化
1. 快速启动 —— 极大提升加载速度(important) 快速启动应用,并行发起 Bundle 加载&拉取初始数据.相信大家已经发现了,SPA 初始化时候,不得不等待 bundle 返回并 ...
通过Blazor使用C#开发SPA单页面应用程序(2)
今天我们尝试创建一个默认的Blazor应用. 1.安装 .Net Core 3.0需要Visual Studio 2019 的支持. 安装.Net Core 3.0 预览版 SDK版本,注意预览版对应 ...
基于puppeteer模拟登录抓取页面
关于热图在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine) 上图中能很清晰的看到用户关注点在那,我们不 ...
[vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
进一步优化SPA的首屏打开速度（模块化与懒载入） by 嗡
前言单页应用的优点在于一次载入全部页面资源,利用本地计算能力渲染页面.提高页面切换速度与用户体验.但缺点在于全部页面资源将被一次性下载完,此时封装出来的静态资源包体积较大,使得第一次打开SPA页面时 ...

随机推荐

STL-容器库101--array【C11】
1. 原型 C11提供 template < class T, size_t N > class array; T: 元素类型,以 array::value_type 作为别名使用:N: ...
hadoop和spark相关参数的配置
背景 MapReduce和Spark对外提供了上百个配置参数,用户可以为作业定制这些参数以更快,更稳定的运行应用程序.本文梳理了最常用的一些MapReduce和Spark配置参数. MapReduce ...
微信小程序-button组件
主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的but ...
bootstrap代码（一）
一般在个人博客上使用的较为频繁,用于显示代码的风格.在Bootstrap主要提供了三种代码风格:1.使用<code></code>来显示单行内联代码2.使用<pre> ...
shell 命令之 jps
中华石衫老师说过,java是一个生态,几乎所有框架都对java 有很好的支持. 正是这句话,让我坚定了持续学习java的信念. 说回jps,jps是java 提供的,功能等于 ps -ef | gre ...
11.CrawlSpiders
CrawlSpiders 通过下面的命令可以快速创建 CrawlSpider模板的代码: .scrapy startproject tencentspider .scrapy genspider - ...
增加显示记录数的label及隐藏refresh按钮
1. 在UniDBgrid的extEvent属性中写入以下代码: function OnAfterCreate(sender) { var toolbar=sender.getDockedItems( ...
统计--VARCHAR与NVARCHAR在统计预估上的区别
最近遇到一个问题,当查询使用到模糊查询时,由于预估返回行数过高,执行计划认为索引查找+Key Lookup的成本过高,因此采用Clustered Index Scan的方式,消耗大量逻辑IO,执行计划 ...
一步步改造wcf,数据加密传输-匿名客户端加密传输(2)
1 引言前面的例子中, encodedValue这一串代码是自动生成的,所以在生产环境中,你需要安装一个VS201X,把代码放上去,然后刷新引用!!!就可以了,这么做的话,你可能是只 ...
AngularJs自定义过滤器filter
AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...

SPA页面初试

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

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

html代码如下:

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

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

这里，我们首先将每一个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文件作为路由的模块。

SPA页面初试的更多相关文章

随机推荐

热门专题