用原生js做单页应用

最近在公司接到一个需求，里面有一个三级跳转。类似于选择地址的时候，选择的顺序是：省份->市->区。如果分三个页面跳转，那么体验非常不好，如果引入其他框架做成单页应用，又比较麻烦。所以可以用js把这一块做成单页应用的样子。。。

主要思路

通过改变url的hash值，跳到相应模块。先把默认模块显示出来，其他模块隐藏，分别给三个模块定义三个hash值，点击默认模块的选项的时候，改变hash值，同时在window上监听hashchange事件，并作相应模块跳转逻辑处理。这样即可模拟浏览器的前进后退，而且用户体验也比较好。

下面详细来看看，现在有一个场景，选择顺序是：车牌子->车型->车系。

首先HTML部分。默认显示车牌子选择列表，其他两个模块隐藏。

  <div class="wrap"><div id="Brand"><div>品牌</div><ul class="mycar_hot_list"><li><p>大众</p></li></ul></div><div id="Type"  style="display:none"><dl><dt>比亚迪汽车</dt><dd>宋</dd></dl></div><div id="Series" style="display:none"><ul class="mycar_datalist"><li>2013年款<li></ul></div></div>

js逻辑控制部分

①定义一个变量对象，存储三个模块中分别选择的数据、定义hash值、相应模块的处理逻辑函数。

   info={brand:'',carType:'',carSeries:'',pages:['Brand','Type','Series']  };
info.selectBrand=function(){document.title = '选择商标'; brandEvent();
}
//选择车型
info.selectType=function(){document.title = '选择车型';document.body.scrollTop = 0;  //滚到顶部window.scrollTo(0, 0); typeEvent();  //为该模块的dom绑定事件或做其他逻辑
}
//选择车系
info.selectSeries=function(){document.title = '选择车系';document.body.scrollTop = 0;window.scrollTo(0, 0); seriesEvent();
}

②dom绑定事件&其他逻辑

      function brandEvent(){//绑定跳转$('#Brand ul li').click(function(){info.brand=$(this).find('p').text();goPage('Type');})}function typeEvent(){//绑定跳转$('#Type  dd').click(function(){info.carType=$(this).text();goPage('Series');})}function seriesEvent(){...}

③goPage逻辑跳转控制

    function goPage(tag) {if ((tag == 'Brand')&&(location.hash.indexOf('Type')!=-1)){ // 后退操作history.back();document.title = '选择商标';  }else if ((tag == 'Type')&&(location.hash.indexOf('Series')!=-1)){history.back();document.title = '选择车型'; }else {location.hash = tag;}}

④js入口文件（这里用了zepto.js来选择dom）

window.οnlοad=function(){info.selectBrand();  //为默认显示的模块中的元素绑定相应的事件及其他逻辑$(window).on("hashchange", function (e) {doHashChange();});
}

⑤最重要的hash改变逻辑控制

    function doHashChange(){//获取hash的值var hash = location.hash.split('|')[0],tag = hash.replace(/#/g, '');if (info.pages.indexOf(tag) == -1) {tag = 'Brand';}$('.wrap').children('div').hide();    //执行每个模块不同的方法if(typeof(info['select' + tag]) == "function"){info['select' + tag]();}//展示对应dom$('#' + tag).show();}

想参考demo？

本例没有demo。。。^_^　

转载于:https://www.cnblogs.com/LuckyWinty/p/6090430.html

用原生js做单页应用相关推荐

原生html单页应用,小白篇 -- 原生 js 实现单页应用的初探
一.前言我们一直使用各种框架来实现单页应用,常用的有 React. Vue. AngularJS . 那么我们来实现一个简单的 spa 应用,主要看下思路. 二.准备新建一个名为 spa 的文件夹 ...
如何用原生jS做购物车
如何用原生jS做购物车今天给大家分享如何用原生js做购物车,我们都逛过淘宝.京东这样购物网站,像这种购物网站,购物车是肯定少不了的 ,我们在天猫上购物,一开始一个页面有很多种商品,然后你在这里面看中 ...
使用 Vuex + Vue.js 构建单页应用 1
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...
通过Web Api 和 Angular.js 构建单页面的web 程序
在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端, ...
使用Vanilla.js构建单页应用程序（SPA）网站
目录项目带有模块的组织代码以可观察的方式应对变化支持声明式数据绑定将幻灯片(Slides)托管和加载为"页面" 使用路由器处理导航带有CSS3动画的转换时间线管理&q ...
使用 Vuex + Vue.js 构建单页应用
原文地址:https://coligo.io/learn-vuex-by-building-notes-app/ 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 ...
原生JS 表单提交验证器
一.前言最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过"缜密"的讨论后,我们决定不用外部流行的框架,如bootstrap,由于我负责的模块仅仅是其中的一部分, ...
如何使用Vuex+Vue.js构建单页应用
原文地址:https://coligo.io/learn-vuex-by-building-notes-app/ 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 ...
利用原生js做数据管理平台
摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...
原生js做打地鼠游戏
学原生js的语法其实是容易的,最主要的练习逻辑思维.对于刚刚学完js的语法的我来说,写这个打地鼠游戏真的花费了我一整天的时间.整体感觉写出来的js代码,其实就是平时练习的一些小案例的代码拼起来的,js ...

用原生js做单页应用

用原生js做单页应用相关推荐

最新文章

热门文章