用原生js做单页应用
程序员文章站
2022-06-20 16:30:55
最近在公司接到一个需求,里面有一个三级跳转。类似于选择地址的时候,选择的顺序是:省份->市->区。如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页...
最近在公司接到一个需求,里面有一个三级跳转。类似于选择地址的时候,选择的顺序是:省份->市->区。如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦。所以可以用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.onload=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(); }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: 为什么说诸侯国君有妹妹者就能得天下?
下一篇: 您的菜已经在锅里了
推荐阅读
-
如何使用Vuex+Vue.js构建单页应用
-
原生js实现类似fullpage的单页/全屏滚动
-
使用Vue.js创建一个时间跟踪的单页应用
-
【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)
-
【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)
-
js单页hash路由原理与应用实战详解
-
使用 vue.js 构建大型单页应用
-
【Web API系列教程】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)...
-
如何使用Vuex+Vue.js构建单页应用
-
原生js实现类似fullpage的单页/全屏滚动