Single page application with native js

Recently, I received a demand in the company, which has a level 3 jump. Similar to selecting addresses, the order of selection is: provinces- > City- > District. If you jump in three pages, the experience is very bad, and if you introduce other frameworks to make a single-page application, it will be troublesome. Therefore, js can be used to make this block look like a single-page application. . .

Main ideas

Skip to the corresponding module by changing the hash value of url. First, the default module is displayed, and other modules are hidden. Three hash values are defined for three modules respectively. When clicking the option of the default module, the hash value is changed, and at the same time, hashchange events are monitored on window, and corresponding module jump logic processing is made. This can simulate the forward and backward of the browser, and the user experience is better.

Let's take a look at it in detail. Now there is a scene, and the selection order is: car brand- > Model- > Car system.

First, the HTML section. By default, the brand selection list is displayed, and the other two modules are hidden.

<div class="wrap">
 <div id="Brand">
  <div> Brand </div>
   <ul class="mycar_hot_list">
    <li>
     <p> Mass </p>
    </li>
   </ul>
  </div>
  <div id="Type" style="display:none">
   <dl>
   <dt> BYD Auto </dt>
   <dd> Song </dd>
  </dl>
 </div>
 <div id="Series" style="display:none">
  <ul class="mycar_datalist">
    <li>
     2013 Year 
    <li>
  </ul>
 </div>
</div>

js logic control part

(1) Define a variable object, store the data selected from three modules respectively, define hash value and processing logic function of corresponding modules.

info={
      brand:'',
      carType:'',
      carSeries:'',
      pages:['Brand','Type','Series'] 
    };
info.selectBrand=function(){
   document.title = ' Choose a trademark ';
   brandEvent();
}
// Choose a vehicle type 
info.selectType=function(){
   document.title = ' Choose a vehicle type ';
   document.body.scrollTop = 0; // Roll to the top 
    window.scrollTo(0, 0);
    typeEvent(); // For the module's dom Bind events or do other logic 
}
// Choose the train system 
info.selectSeries=function(){
   document.title = ' Choose the train system ';
   document.body.scrollTop = 0;
   window.scrollTo(0, 0);
   seriesEvent();
}

② dom binding event & Other logic

 function brandEvent(){
// Binding jump 
  $('#Brand ul li').click(function(){
    info.brand=$(this).find('p').text();
    goPage('Type');
  })
 }
 function typeEvent(){
// Binding jump 
  $('#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)){ //  Backward operation 
      history.back();
      document.title = ' Choose a trademark '; 
  }else if ((tag == 'Type')&&(location.hash.indexOf('Series')!=-1)){
      history.back();
      document.title = ' Choose a vehicle type ';
  }else {
    location.hash = tag;
  }
}

④ js entry file (zepto. js is used here to select dom)

window.onload=function(){
    info.selectBrand(); // Bind the corresponding events and other logic for the elements in the module displayed by default 
    $(window).on("hashchange", function (e) {
      doHashChange();
    });
}

⑤ The most important hash changes logic control

function doHashChange(){
  // Get hash Value of 
  var hash = location.hash.split('|')[0],
    tag = hash.replace(/#/g, '');
  if (info.pages.indexOf(tag) == -1) {
    tag = 'Brand';
  }
  $('.wrap').children('div').hide();  
  // Execute different methods for each module 
  if(typeof(info['select' + tag]) == "function"){
    info['select' + tag]();
  }
  // Show correspondence dom
  $('#' + tag).show();
}