Preface
Front-end routing is supported in many open source js library frameworks, such as angularJS, Backbone, Reactjs, etc. The principle of front-end routing is the same as back-end routing. It allows all interactions and displays them on one page to run to reduce server requests and improve customer experience. More and more websites, especially web applications, use front-end routing.
HTML
There is a navigation menu ul on the page, and a div#result is used to display the results. When clicking on the navigation menu, different result contents will be displayed in the #result.
<ul> <li><a href="#/">Home</a></li> <li><a href="#/product">Product</a></li> <li><a href="#/server">Service</a></li> </ul><div id="result"></div>
JAVASCRIPT
Let’s talk about the brief principle of front-end routing implementation. Taking the hash form (can also be handled using History API) as an example, when the hash of the url changes, the hashchange registered callback is triggered, and different operations are performed in the callback and different contents are displayed.
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 browser url hash update event.
route stores the callbacks during route updates to the callback array routes, and the callback function will be responsible for updating the page.
refresh executes the callback function corresponding to the current url and updates 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 every time you click on the menu, the background color and content will be changed in #result.
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 the service page'; });Summarize
The above is a simple implementation of front-end routing. In actual applications, the hash should be processed regularly to meet the application of a large number of URLs, and at the same time, the functions of ajax asynchronous requesting page content are added. Although this example is very simple, in fact, the foundation of many routing systems is based on this, and other routing systems mainly provide supporting and optimizing the framework mechanisms they use. Okay, the content of this article is over here. I hope it will help you study or work. If you have any questions, you can leave a message to communicate.