欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用原生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();
}

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