Use native js to build a single page application

The main idea

By changing the hash value of the url, jump to the corresponding module. First, display the default module and hide other modules. Define three hash values ​​for the three modules respectively. When clicking the option of the default module, change the hash value. At the same time, monitor the hashchange event on the window and perform corresponding module jump logic processing. . In this way, the forward and backward movement of the browser can be simulated, and the user experience is better.

Let’s take a look in detail below. There is now a scenario. The selection order is: car brand->car model->car series.

First the HTML part. The vehicle brand selection list is displayed by default, and the other two modules are hidden.

<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 logic control part

① Define a variable object to store the data selected in the three modules, define the hash value, and the processing logic function of the corresponding module.

   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 binding event & other logic

  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 logic jump control

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 entry file (zepto.js is used here to select dom)

window.onload=function(){
        info.selectBrand();  //为默认显示的模块中的元素绑定相应的事件及其他逻辑
        $(window).on("hashchange", function (e) {
            doHashChange();
       });
}

⑤The most important hash change logic control

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