您好,登录后才能下订单哦!
这篇文章将为大家详细讲解有关如何使用原生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" > <dl> <dt>比亚迪汽车</dt> <dd>宋</dd> </dl> </div> <div id="Series" > <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(); }
关于“如何使用原生js做单页应用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。