用原生js做单页应用
最近在公司接到一个需求，里面有一个三级跳转。类似于选择地址的时候，选择的顺序是：省份->市->区。如果分三个页面跳转，那么体验非常不好，如果引入其他框架做成单页应用，又比较麻烦。所以可以用js把这一块做成单页应用的样子。。。
主要思路
通过改变url的hash值，跳到相应模块。先把默认模块显示出来，其他模块隐藏，分别给三个模块定义三个hash值，点击默认模块的选项的时候，改变hash值，同时在window上监听hashchange事件，并作相应模块跳转逻辑处理。这样即可模拟浏览器的前进后退，而且用户体验也比较好。
下面详细来看看，现在有一个场景，选择顺序是：车牌子->车型->车系。
首先HTML部分。默认显示车牌子选择列表，其他两个模块隐藏。
<divclass="wrap"> <divid="Brand"> <div>品牌</div> <ulclass="mycar_hot_list"> <li> <p>大众</p> </li> </ul> </div> <divid="Type"style="display:none"> <dl> <dt>比亚迪汽车</dt> <dd>宋</dd> </dl> </div> <divid="Series"style="display:none"> <ulclass="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绑定事件&其他逻辑
functionbrandEvent(){
//绑定跳转
$('#Brandulli').click(function(){
info.brand=$(this).find('p').text();
goPage('Type');
})
}
functiontypeEvent(){
//绑定跳转
$('#Typedd').click(function(){
info.carType=$(this).text();
goPage('Series');
})
}
functionseriesEvent(){...}
③goPage逻辑跳转控制
functiongoPage(tag){
if((tag=='Brand')&&(location.hash.indexOf('Type')!=-1)){//后退操作
history.back();
document.title='选择商标';
}elseif((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改变逻辑控制
functiondoHashChange(){
//获取hash的值
varhash=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();
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！