本篇内容是在上一次的基础上进行改进，对状态的定义进行了修改，一个状态的定义如下:

function state(stateName, template, templateUrl) {

  this.stateName = stateName;

  if (template) {

    this.template = template;

  }

  if (templateUrl) {

    this.templateUrl = templateUrl;

  }

}

即每一个页面对应着一个状态，一个状态有一个状态名，还有一个模板/模板url，这样我们就可以将不同页面的内容写到不同的html里，然后通过templateUrl将他们动态加载进来渲染页面。

先贴上js代码：

var states = [];

var currentState;

$(document).ready(function() {

  registState();

  console.log(states);

  currentState = init();

  //监听hash路由变化

  window.addEventListener("hashchange", hashChange)

})

//哈希路由處理事件

function hashChange() {

  var nextState;

  console.log(window.location.hash);

  //判断地址是否为空，若为空，则默认到main-view页面

  if (window.location.hash == "") {

    nextState = "mainView";

  } else {

    //若不为空，则获取hash路由信息，得到下一个状态

    nextState = window.location.hash.substring(1);

  }

  //判断当前状态是否注册过(是有存在这个状态)0g

  var validState = checkState(states, nextState);

  //若不存在，则返回当前状态

  if (!validState) {

    createState(nextState, "", "./test.html");

    currentState = nextState;

    return;

  }

  $('#' + currentState).remove();

  if (!nextState.view) {

    states.forEach( function(element, index) {

      if (element.stateName == nextState) {

        createView(element);

      }

    });

  }

  currentState = nextState;

}

//状态注册

function registState() {

  var newState = new state("mainView", "", "./main-view.html");

  var newState1 = new state("listView", "", "./list-view.html");

  var newState2 = new state("detailView", "", "./detail-view.html");

  states.push(newState);

  states.push(newState1);

  states.push(newState2);

}

//初始化，对用户一开始输入的url进行处理

function init() {

  nextState = window.location.hash.substring(1);

  //若用户输入的hash值为空，则默认跳转到states[0]的页面

  if (nextState == "") {

    createView(states[0]);

    return states[0].stateName;

  }

  states.forEach( function(element, index) {

      if (element.stateName == nextState) {

        createView(element);

      }

    });

  return nextState;

}

//判断状态是否存在

function checkState(states, nextState) {

  var tof = false;

  states.forEach(function(element) {

      if (element.stateName == nextState) {

        tof = true;

      }

    })

  return tof;

}

//创建一个状态

function createState(stateName, template, templateUrl) {

  var newState = new state(stateName, template, templateUrl);

  createView(newState);

  $("#" + newState.stateName).css("display", "block");

  $('#'+ currentState).css("display", "none");

  currentState = newState;

  states.push(newState);

}

//创建状态所对应的视图，并将视图放到body里

function createView(state) {

  if (state.template) {

    template = state.template;

    state.view = $("<div id='" + state.stateName + "'></div>").html(template);

    $("body").append(state.view);

  }  else if (state.templateUrl) {

    htmlobj = $.ajax({url: state.templateUrl, async: false});

    template = htmlobj.responseText;

    state.view = $("<div id='" + state.stateName + "'></div>").html(template);

    $("body").append(state.view);

  }

}

//状态对象

function state(stateName, template, templateUrl) {

  this.stateName = stateName;

  if (template) {

    this.template = template;

  }

  if (templateUrl) {

    this.templateUrl = templateUrl;

  }

}

处理逻辑

  1. 一开始进入页面的时候，先利用registState()注册一些状态，然后利用init()函数来对用户一开始输入的url进行处理
  2. 当用户输入的路由发送变化的时候，调用hashChange()函数:
    1. 获取用户输入的hash值,这个hash值即为状态名
    2. 检查这个状态是否已经注册，若已经注册过，则将当前的页面内容清除掉，然后为输入的状态创建视图
    3. 若状态未注册，则创建一个新的默认状态

文件结构如下:

index.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>

  </body>

</html>

注意

我使用的是chrome浏览器，由于安全问题，chrome必须通过http等方式才能用$.ajax来获取到文件内容，因此我用了nodejs的http-server自己搭建了一个简单的服务器.

其他的页面都只是单纯的html文件，没有什么特别,所以就不列举出来了

截图

输入服务器的url



修改url，在后面加上#listView(之前在初始化的时候就已经注册过的状态)



输入一个没有注册过的状态(注册了一个默认的状态)

接下来打算做一下嵌套状态，如果有什么好的建议，麻烦告诉下我~~

SPA初试-1的更多相关文章

  1. SPA页面初试

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

  2. BI分析受阻？FineBI推出SPA螺旋式分析新功能！

    过去,企业级的数据分析通常会有这么几种场景,业务部门托信息部门分析数据,结果报表一出,唇枪舌剑争论你我高低,数据不准,指标不对.信息部门欠缺业务概念,业务部门不懂技术逻辑,数据分析之路,暂时搁浅. 后 ...

  3. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  4. 如何快速开发SPA应用

    前言 web早已经进入了2.0时代了,如今的网页大有往系统应用级别的方向发展的趋势,再也不是以前的简单展示信息的界面了.如今很多webapp已经做到了原生应用的功能,并且运用自身的优势逐步取代之.HT ...

  5. 使用backbone的history管理SPA应用的url

    本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理.SPA应用的核心在于使用无刷新的方式更改url,从而引发页面内容的改变.从实现上来看,url的管理和页面内容的管理是 ...

  6. AngularJS SPA Template For Visual Studio

    单页面应用程序(SPA)[使用JavaScript.CSS和HTML强大的功能,可以构建一个单页面应用程序(SPAs)],它提供了丰富的用户体验页面.导航技术和AJAX提供必要的功能,而不用重新加载页 ...

  7. 移动前端开发-单页应用(spa)模型

    一门新的技术诞生总会引来一番争议,单页Web应用程序也不例外,其最大的优势在于用户体验,对于内容的改动不需要加载整个页面:对服务器压力很小,消耗更少的带宽,与面向服务的架构更好地结合.使用HTML+C ...

  8. caffe初试（一）happynear的caffe-windows版本的配置及遇到的问题

    之前已经配置过一次caffe环境了: Caffe初试(一)win7_64bit+VS2013+Opencv2.4.10+CUDA6.5配置Caffe环境 但其中也提到,编译时,用到了cuda6.5,但 ...

  9. Single-page app(SPA)

    有哪些值得推荐的一页式网站(Single-page app)? http://pro.weltrade.com/en/ 最近开到一下国外网站,一页到底,感觉很高大上,到底是怎么做出来的呢?技术要点是什 ...

随机推荐

  1. 【转】类中如何引用server.MapPath()

    转至:http://blog.csdn.net/tangjianft/article/details/5357151 今天在写一个上传图片方法时遇到了两个问题:1.public string getI ...

  2. delphi 集合

    DELPHI没有JAVA的丰富的集合(SET MAP LIST),只有Tlist,可包装各种类型

  3. 主题敏感词PageRank

    [主题敏感词PageRank] PageRank忽略了主题相关性,导致结果的相关性和主题性降低,对于不同的用户,甚至有很大的差别.例如,当搜索“苹果”时,一个数码爱好者可能是想要看 iphone 的信 ...

  4. C# 多线程参数的使用

    一个参数: Thread.Start方法可以带一个参数: public static void Main() { Thread t = new Thread(new ParameterizedThre ...

  5. How Tomcat Works（九）

    本文接下来描述servlet容器是怎样管理其相关组件的生命周期的,首先本人描述一下事件监听模式,也可以称为观察者模式,该模式分为以下角色 即抽象主题角色 具体主题角色 抽象观察者角色及具体观察者角色, ...

  6. java使用org.apache.poi读取与保存EXCEL文件

    一.读EXCEL文件 package com.ruijie.wis.cloud.utils; import java.io.FileInputStream; import java.io.FileNo ...

  7. Weka EM 协方差

    Weka EM covariance description 1: Dear All, I am trying to find out what is the real meaning of the ...

  8. 大数据平台搭建（hadoop+spark）

    大数据平台搭建(hadoop+spark) 一.基本信息 1. 服务器基本信息 主机名 ip地址 安装服务 spark-master 172.16.200.81 jdk.hadoop.spark.sc ...

  9. wikioi 1010 过河卒

    题目描述 Description 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点有一个对方的马(如上图的C点),该马所在的点和所有跳跃一步可达的点 ...

  10. Python学习入门基础教程(learning Python)--5.1 Python下文件处理基本过程

    Python下的文件读写操作过程和其他高级语言如C语言的操作过程基本一致,都要经历以下几个基本过程. 1. 打开文件 首先是要打开文件,打开文件的主要目的是为了建立程序和文件之间的联系.按程序访问文件 ...