SoFunction
Updated on 2025-04-03

Use native js to make single page applications

Recently, I received a request from the company, which has a three-level jump. Similar to when selecting an address, the order of selection is: Province->City->Local. If you jump into three pages, the experience is very bad. If you introduce other frameworks to make a single page application, it will be more troublesome. So you can use js to make this piece look like a single page application. . .

Main ideas

By changing the hash value of the url, jump to the corresponding module. First display the default module, hide the other modules, define three hash values ​​for the three modules. When clicking on the default module options, change the hash value, and listen to the hash change event on the window, and perform logical processing of the corresponding module jump. This will simulate the browser's progress and backwards, and the user experience is also better.

Let’s take a look at the details below. There is now a scene, the selection order is: license plate->car model->car series.

First of all, the HTML part. The license plate selection list is displayed by default, and the other two modules are hidden.

<div class="wrap">
 <div >
  <div>brand</div>
   <ul class="mycar_hot_list">
    <li>
     <p>public</p>
    </li>
   </ul>
  </div>
  <div  style="display:none">
   <dl>
   <dt>BYD Auto</dt>
   <dd>Song</dd>
  </dl>
 </div>
 <div  style="display:none">
  <ul class="mycar_datalist">
    <li>
     2013Yearly
    <li>
  </ul>
 </div>
</div>

js logic control part

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

info={
      brand:'',
      carType:'',
      carSeries:'',
      pages:['Brand','Type','Series'] 
    };
=function(){
    = 'Select a trademark';
   brandEvent();
}
//Select a car model=function(){
    = 'Select a model';
    = 0; //Scroll to top    (0, 0);
    typeEvent(); //Document the dom binding event or do other logic for the module's dom}
//Select a car system=function(){
    = 'Choose a car system';
    = 0;
   (0, 0);
   seriesEvent();
}

②dom binding events & other logic

 function brandEvent(){
//Binding jump  $('#Brand ul li').click(function(){
    =$(this).find('p').text();
    goPage('Type');
  })
 }
 function typeEvent(){
//Binding jump  $('#Type dd').click(function(){
    =$(this).text();
    goPage('Series');
  })
 }
 function seriesEvent(){...}

③ goPage logic jump control

function goPage(tag) {
  if ((tag == 'Brand')&&(('Type')!=-1)){ // Back operation      ();
       = 'Select a trademark'; 
  }else if ((tag == 'Type')&&(('Series')!=-1)){
      ();
       = 'Select a model';
  }else {
     = tag;
  }
}

④js entry file (used here to select dom)

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

⑤The most important hash change logic control

function doHashChange(){
  //Get the hash value  var hash = ('|')[0],
    tag = (/#/g, '');
  if ((tag) == -1) {
    tag = 'Brand';
  }
  $('.wrap').children('div').hide();  
  //Execute different methods for each module  if(typeof(info['select' + tag]) == "function"){
    info['select' + tag]();
  }
  //Display the corresponding dom  $('#' + tag).show();
}

The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!