"Mobile web front end efficient development practice" note 4--to create a single page application spa

Routing is the core of a single-page application, and most front-end frameworks implement a complex routing library that includes complex functions such as dynamic routing, routing hooks, component lifecycles, and even server-side rendering. But for front-end developers, the core of the routing component is URL path-to-function mapping, to understand this concept, you can implement a simple routing function.

1. The principle of routing

Routing in the front-end can be understood as URL path-to-function mappings. Performs a specific function when accessing to a specific path. Another concept, router, is to manage the various routes, that is, the process of matching paths to functions.

2. Implementing routing

There are two technical modes for web-side implementation of routing.

• Based on Hash
• Based on the history API

In the path of the hash route there will be a "#" flag, which is often said to be the anchor point, the front-end backend server sends the request does not parse the hash part. Routing implementation by listening to the page window object Hashchange things, call the corresponding function, the advantage is good compatibility and completely out of the back end, the disadvantage is because the hash flag caused the route is not intuitive.

The history API listens to the Popstate events added by HTML 5, and the URL format is consistent with the traditional back-end routing, which is the biggest advantage of this pattern. The disadvantage is that only the new browser supports this feature and requires a back-end routing mate, because when a user accesses a path implemented by a history route, the page is still like a back-end request and returns a 404 error if the backend does not have the appropriate routing implementation logic set.

According to the concept of front-end routing, implementing a route requires three parts: the storage path and the corresponding callback method, listening to the browser related events, according to the listener result execution path corresponding callback method. According to these requirements, in the development of the routing module, design an object through the "Key-value" mode to store the path and the corresponding method, and then through the Window object to listen to the Popstate event, according to the current path from the route object selection execution corresponding method, the implementation of the code is as follows:

function Router () {this.routes = {};//storage path and corresponding method This.route = function (path, callback) {////instantiation is used to add a new route after being instantiated this.routes[ Path] = callback;//is stored by key-value Callback}this.refresh = function () {//through a function call the final Callbackvar Cururl = Location.hash.slice (1) | | '/';//get path in hash mode//var Cururl = location.pathname;//Get path in history API mode This.routes[cururl] ();//Call Final callback} This.init = function () {///initialization method//Listener Load event corresponds to first page load Window.addeventlistener (' Load ', this.refresh.bind (this), false); /Hash Mode monitor Hashchange event Window.addeventlistener (' Hashchange ', This.refresh.bind (this), false);//History API Mode Listener Popstate Event//Window.addeventlistener (' Popstate ', This.refresh.bind (this), false);}}

　　

In the actual development process, you need to call the route method to add routes and corresponding methods, using the following code:

var router = new Router ();//Instantiate Router method Router.init ();//init to listen for the corresponding global event Router.route ('/', function () {...}); /Use the route method to add a new route and corresponding method Router.route (' Test ', function () {...});

　　

This enables a simple single-page routing, and for complex single-page applications that use react or vue.js, the routing component also implements a series of complex functions. This section only implements a simple routing module, and other complex functions can refer to the source code of react router or Axios (Vue 2.0 recommended routing).

More information about:

"Mobile web front end efficient development practice" note 4--to create a single page application spa