首页 > 编程 > JavaScript > 正文

用原生js做单页应用

2019-11-19 17:54:29
字体:
来源:转载
供稿:网友

最近在公司接到一个需求,里面有一个三级跳转。类似于选择地址的时候,选择的顺序是:省份->市->区。如果分三个页面跳转,那么体验非常不好,如果引入其他框架做成单页应用,又比较麻烦。所以可以用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();}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持武林网!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表