Detailed explanation of js single page hash routing principle and application practice

This article mainly introduces the detailed explanation of the principle and application of JS single page hash routing, and shares it with you, as follows:

What is routing?

In layman's terms, different URLs display different content

What is a single page application?

Single page, the English abbreviation is SPA (Single Page Application), which means to make various functions within a page. The so-called single page routing application is: to switch content changes by switching between URLs in an page.

How do you know that the URL has been switched?

When the anchor text after the url changes, the onhashchange event will be triggered. Through this event, we can handle different URLs differently. The anchor text is the content after # in the URL, such as:

#/html

#/css

#/javascript

&lt;a href="#/html" rel="external nofollow" rel="external nofollow" >html course</a>&lt;a href="#/css" rel="external nofollow" rel="external nofollow" >css course</a>

 = function(){
      //When the hash changes, an event will be generated       = function(){
        ( 'Your hash has changed' );
        //The location object is built-in in javascript (it comes with it)        ( location );
      }
    }

In the above example, we have triggered the onhashchange event through hash (that is, anchor text) change, and we can match the hash change with the content switching, realizing the application of single page routing!

Next, we use a small lottery program to experience the routing of the order page:

 &lt;input type="button" value="33 choose 5"&gt;
 &lt;div&gt;&lt;/div&gt;

 = function(){
      var oBtn = ("input");
      var oDiv = ("div");
      //33-&gt;max 5-&gt;num
      function buildNum( max, num ){
        var arr = [];
        for( var i = 0; i &lt; max; i++ ){
          ( i + 1 );
        }
        var target = []; //Select 5 numbers randomly from 33 numbers 1-33        for( var i = 0; i &lt; num; i++ ){
          ( ( ( () *  ), 1 ) );
        }
        return target;
      }
       = function(){
        var num = buildNum( 33, 5 );
         = num;
         = num;
      }
       = function(){
         = (1);
      }
    }

In the above example, we generate 5 random numbers through 1-33 numbers and put them into the Div. Each time a set of random numbers is generated, the content of the div is updated. Finally, through the forward and back buttons of the browser, you can feel that all the random switching content is like switching different URL pages. The actual effect is that no page is switched, and the content switching is achieved through hash changes in one page.

Finally, we combine the simple html5 layout and use hash to make a tab switching function:

header,
    footer {
      height: 100px;
      background: #ccc;
    }

    section {
      width: 60%;
      height: 400px;
      background: #eee;
      float: left;
    }

    sidebar {
      width: 40%;
      height: 400px;
      background: #999;
      float: left;
    }

    .clear {
      clear: both;
    }

&lt;header&gt;
    head
  &lt;/header&gt;
  &lt;section&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#/" rel="external nofollow" >All</a></li>      &lt;li&gt;&lt;a href="#/html" rel="external nofollow" rel="external nofollow" >html course</a></li>      &lt;li&gt;&lt;a href="#/css" rel="external nofollow" rel="external nofollow" >css course</a></li>      &lt;li&gt;&lt;a href="#/javascript" rel="external nofollow" >javascript course</a></li>    &lt;/ul&gt;
  &lt;/section&gt;
  &lt;sidebar&gt;
    right
  &lt;/sidebar&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;footer&gt;
    bottom
  &lt;/footer&gt;

(function(){
      var Router = function(){
        /*
          ['/'] = function(){}  
          ['/html'] = function(){}
        */ 
         = {};// Used to save the route         = ''; //Get the current hash      }
       = function(){ // Listen to routing changes        //call,apply
        ( 'hashchange', (this) );
      }
       = function(){
         = (1) || '/';
        []();    
      }
       = function( key, callback ){ //Save the function corresponding to the route        [key] = callback;
        // (  );
      } 
       = Router;
    })();

    var oRouter = new Router();
    ();
    ( '/', function(){
      var oSidebar = ("sidebar");
       = 'ghostwu provides html, css, javascript from 0 basics to mastering series courses. As long as you can turn on and off the computer, you can learn it';
    });
    ('/html', function(){
      var oSidebar = ("sidebar");
       = 'ghostwu offers html5 courses from introductory to mastery';
    });
    ('/css', function(){
      var oSidebar = ("sidebar");
       = 'ghostwu offers courses from introductory to playing with css3';
    });
    ('/javascript', function(){
      var oSidebar = ("sidebar");
       = "ghostwu offers courses from 0 basics to mastering javascript";
    });

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.