用原生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.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（）;}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！