JavaScript realizes simple routing instance _javascript technique in front end

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.