Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to achieve front-end routing in Javascript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve front-end routing in Javascript".

HTML

There is a navigation menu ul on the page, and a p#result is used to display the results. When you click the navigation menu, different results will be displayed in # result.

Home products and services

JAVASCRIPT

Let's talk about the brief principle of the implementation of front-end routing. Take the form of hash (which can also be handled by History API) as an example. When the hash of url changes, the callback of hashchange registration is triggered, and different operations are performed and different contents are displayed in the callback.

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 routing system Router object is implemented in the above code, which mainly provides three methods:

Init listens for browser url hash update events.

Route stores the callback from routing updates to the callback array routes, and the callback function is responsible for updating the page.

Refresh executes the callback function corresponding to the current url to update the page.

The way to call Router is as follows: click the hash change that triggers url, and update the content accordingly. After running, you will find that the background color and content will be changed in # result every time you click on the menu.

Var R = new Router (); R.init (); var res = document.getElementById ('result'); R.route (' /', function () {res.style.background = 'blue'; res [XSS _ clean] =' this is the home page';}); R.route ('/ product', function () {res.style.background = 'orange'; res [XSS _ clean] =' this is the product page';}) R.route ('/ server', function () {res.style.background = 'black'; res [XSS _ clean] =' this is the service page';})

Thank you for reading, the above is the content of "how to achieve front-end routing in Javascript". After the study of this article, I believe you have a deeper understanding of how to achieve front-end routing in Javascript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.