SPA初试-1

时间：2022-09-18 23:36:45

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

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. 若状态未注册，则创建一个新的默认状态

文件结构如下:

SPA初试-1

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

SPA初试-1

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

SPA初试-1

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

SPA初试-1

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

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

  1. SPA页面初试

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

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

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

  3. 【腾讯Bugly干货分享】基于 Webpack &amp&semi; Vue &amp&semi; 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. 移动前端开发-单页应用&lpar;spa&rpar;模型

    一门新的技术诞生总会引来一番争议,单页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&lpar;SPA&rpar;

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

随机推荐

  1. Centos 6&period;5 x64环境下 spark 1&period;6 maven 编译-- 已验证

    Centos 6.5 x64 jdk 1.7 scala 2.10 maven 3.3.3 cd spark-1.6 export MAVEN_OPTS="-Xmx2g -XX:MaxPer ...

  2. 微软How old do I Look——初体验

    前段时间微软发布了一个可爱的网站how old.net,着实火了一把,全民体验魔镜魅力. 上传自己的靓照到http://www.how-old.net/,它就可以告诉你性别和年龄,大家还习惯称之为“颜 ...

  3. css之px自动转rem—&OpenCurlyDoubleQuote;懒人”必备

    作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了.但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程, ...

  4. 【转】Solr5&period;3&period;1定时增量添加索引和重做索引

    本文转自:https://code.google.com/p/solr-dataimport-scheduler/ Solr Data Import Hander Scheduler 说明:Solr官 ...

  5. window 7 下一台cp 两个mysql 配置主从

    环境 : 个人 pc windows7 一台 ; 使用 : 官方下载: mysql-noinstall-5.5.11-win32.zip 1. 解压 成2个 (文件夹) mysql_master (主 ...

  6. live&lpar;&rpar;&comma;bind&lpar;&rpar;&comma;delegate&lpar;&rpar;等事件绑定方法的区别及应用解析

    1 首先bind()方法是最直观的,但是也是弊端最大的. $('a').bind('click',function(){alert('that tickles!')}) 这和事件冒泡有直接关系,当我们 ...

  7. easyUI droppable组件使用

    easyUI droppable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. SoapUI简介和入门实例解析

    SoapUI简介 SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到Ecl ...

  9. Houdini toolset environment variable setting

    Game Development Toolset HOUDINI_PATH = "C:\Users\fooldrifter\Documents\houdini17.5\GameDevelop ...

  10. 基于SSH 供应链管理系统质量属性说明

    产品的易用程度如何,执行速度如何,可靠性如何,当发生异常情况时,系统如何处理.这些被称为软件质量属性,而特性是指系统非功能(也叫非行为)部分的需求. 性能:性能就是一个东西有多快,通常指响应时间或延迟 ...

相关文章