JavaScript realizes simple routing instance _javascript technique in front end

Objective

Front-end routing is supported in many open source JS library frameworks, such as Angularjs,backbone,reactjs and so on. The same way that front-end routing and back-end routing is to allow all the interaction and presentation to run on one page to reduce server requests and improve the customer experience, more and more Web sites, especially Web applications, use front-end routing.

Html

The page has a navigation menu ul, and a div#result is used to display the results, when the navigation menu is clicked, #result中会显示不同的结果内容.

<ul> 
 <li><a href= "#/" > Home </a></li> 
 <li><a href= "#/product" > Products </a></li> 
 <li><a href= "#/server" > Services </a></li> 
</ul>
< div id= "Result" ></div>

Javascript

Say the brief principle of the front-end routing implementation, in hash form (also can use History API to deal with) For example, when the URL of the hash changes, triggering hashchange registration callback, callback to do different operations, different content display.

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

The above code is implemented in the middle of the system router object, which mainly provides three methods:

Init listens for a browser URL hash update event.

Route the callback to the callback array routes when storing routing updates, the callback function is responsible for updating the page.

Refresh executes the callback function corresponding to the current URL and updates the page.

The router call is as follows:

Click on the trigger URL to change the hash, and update the content, after the run you will find each click on the menu, #result中会变换背景色和内容.

var R = new Router ();
R.init ();
var res = document.getElementById (' result ');

 R.route ('/', function () {
 res.style.background = ' Blue ';
 res.innerhtml = ' This is home ';
 }
 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 the Service page ';
 };

Summarize

The above is a simple implementation of a front-end routing, in practice, the hash should be matched processing to meet a large number of URL applications, while increasing the Ajax asynchronous request page content and other functions. Although this example is very simple, but in fact many routing systems are rooted in this, other routing systems are mainly to their own use of the framework mechanism to support and optimize. Well, the contents of this article to this end, I hope to be able to learn or work to bring certain help, if you have questions you can message exchange.