How to implement frontend routing using Javascript

In WEB development, the concept of routing is no stranger. We are exposed to frontend routing and backend routing. Backend routing is an important module in many frameworks, such as Thinkphp and Wordpress. It applies the routing function to make the requested url more concise. Frontend routing is also common in single-page applications, making the front-end page experience smoother.

Frontend routing is supported in many open-source js class library frameworks, such as angularJS, Backbone, and Reactjs. The same principle of frontend routing and backend routing is to allow all interactions to run on a single page to reduce server requests and improve customer experience, more and more websites, especially web applications, use front-end routes.

HTML

The page contains a navigation menu ul and a div # result to display the result. When you click the navigation menu, different results are displayed in # result.

<Ul>
<Li> <a href = "#/"> homepage </a> </li>
<Li> <a href = "#/product"> product </a> </li>
<Li> <a href = "#/server"> Service </a> </li>
</Ul>
<Div id = "result"> </div>

JAVASCRIPT

Let's take the brief principle of frontend routing implementation as an example. The hash format (which can also be handled using the History API) triggers the callback of hashchange registration when the hash of the url changes, callback to perform different operations and display different content.

Function Router (){
This. routes = {};
This. curUrl = '';
 
This. route = function (path, callback ){
This. routes [path] = callback | function (){};
};
 
This. refresh = function (){
This. curUrl = location. hash. slice (1) | '/';
This. routes [this. curUrl] ();
};
 
This. init = function (){
Window. addEventListener ('load', this. refresh. bind (this), false );
Window. addEventListener ('hashchange', this. refresh. bind (this), false );
    }
}

In the above code, the routing system Router object implementation mainly provides three methods:

Init listens to url hash update events in the browser.

Route stores the callback of route updates to the callback array routes. The callback function is responsible for page updates.
Refresh executes the callback function corresponding to the current url to update the page.
The Router call method is as follows: click to trigger the hash change of the url and update the content accordingly. After running, you will find that the background color and content are changed in # result each time you click the menu.

Var R = new Router ();
R. init ();
Var res = document. getElementById ('result ');
 
R. route ('/', function (){
Res. style. background = 'blue ';
Res. innerHTML = 'This is the homepage ';
});
R. route ('/product', function (){
Res. style. background = 'Orange ';
Res. innerHTML = 'This is the product page ';
});
R. route ('/server', function (){
Res. style. background = 'black ';
Res. innerHTML = 'This is a service page ';
});

The preceding is a simple implementation of a front-end route. In actual applications, hash should be matched to meet the needs of a large number of url applications, while adding ajax asynchronous request page content and other functions. Although this instance is very simple, many routing systems are built on it. Other routing systems mainly support and optimize their own framework mechanisms.