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

 

 

想参考demo？

  本例没有demo。。。^_^