The front end of the route development
Reference blog
front-end routing is what?
What is routing
In jQuery era, we used <a href="https://www.example.com/example/home.html">to achieve page switching.
Such a response process
1. requesting browser
request to the server 2. listen to the specified port, and url is resolved path
3. The browser to determine how to parse the data packets in accordance with the Type-the Content
4. configuration of the routing servers, return the appropriate information (such as the return string html files, may be json data, pictures, etc.)
the browser receives files and rendering html page display
The so-called SSR (Server Side Render), rendered by the server, directly back page.
In simple terms it is used for routing a way to interact with back-end servers, through different paths, to request different resources. Wherein the different page request only one routing function.
The birth of the front end of the route
Ajax front end of the route appears from the beginning, and why? Listen to the following analysis:
Ajax, stands for Asynchronous JavaScript And XML, the browser is used to implement a technical solution loaded asynchronously. In the early 90s decade, most of the pages are need to refresh the page by returning HTML directly, the user of each update operation. And its impact interactive experience, with the development of the network, the urgent need for a solution to improve the situation.
1996, Microsoft first proposed iframe tags, iframe load and brings the concept of asynchronous request element, and then in 1998, Microsoft Outloook Web App team put forward the basic concepts of Ajax (XMLHttpRequest's predecessor), and is implemented by IE5 ActiveX the technology. After Microsoft implement this concept, other browsers such as Mozilia, Safari, Opera have to be implemented XMLHttpRequest Ajax. (Sob compatibility issues arise from this, saying that Microsoft really like to use the name X, MFC-source a lot ..) But in IE7 release, Microsoft chose to compromise, compatible implementation of XMLHttpRequest.
Once you have Ajax, user interaction do not refresh the page every time, experience has brought great improvement.
But the real flourish of the technology, (. · ∀ ·) Techno ゙ or later Google Map, it appears to show people the real charm of Ajax, freeing the imagination of many developers, let not limited to simple data and page interaction, prosperity and development for the later asynchronous way interactive experience brings the foundation.
The more advanced version of the interactive experience is SPA- asynchronous single-page application. The concept of single-page application is accompanied by the emergence of MVVM. First proposed by Microsoft, and then implement them in the browser with Knockoutjs. But the power of this technology is not the time to appreciate the developers, probably because Knockoutjs achieve too complex, resulting in no diffusion of a large area.
Similarly, the relay is still the player Google. Google MVVM and single-page application by Angularjs will flourish, so that the front end developers to develop more large-scale applications, functions become greater. (Had mixed feelings, Microsoft and Google are great company). Then all we all know the story, the front circle began to get the explosive development, it has been found in many of the best framework.
The front Troika Angular, Vue, React are based on this model to run.
Single-page application refers to the application of only one main page, and modify the url address synchronous dynamic replaced by DOM content, to simulate the effect of a multi-page applications, switching pages directly from the front to complete the script, it is no longer a back-end rendering is completed after the front end of the display pass.
Single-page application not only in the interactive page is not refreshing, even without refreshing the page jump all, in order to achieve a multi-page switching in a single-page application, so there is a front-end route, also known as client routing (client side routing).
The front end of the route, by definition is different pages distal state manager, the background may not send a request to the effect achieved by the front end of the plurality of pages directly techniques.
Principle front-end routing implementation
Implement front-end routing is actually very simple:
in essence, capture changes in the url and then parse the current url address, matching the routing rules defined, update the corresponding DOM content.
The front end of the definition of the route, there are two key:
- The ability to capture the event url changes
- Update url will not trigger a page refresh, that does not initiate a request to the server.
The hash property to satisfy the above object location just two points in the BOM.
// 符号#紧接着的就是hash值
https://segmentfault.com/a#articlechanges hash value, and does not cause the browser makes a request to the server, the browser does not request, it will not refresh the page.
In addition each change hash value, also trigger hashchange this event, by listening to this event we can know the hash of what happened.
The front end of an implementation is routing hash mode
In the HTML5 standard release, the history of the BOM objects Two new API: pushState, replaceState, and an event onpopstate.
pushStateAnd replaceStatecreates a new history, and displayed in the url address bar, but does not cause the browser to request the page to load and refresh the display at this time.
At the same time, the browser click back or forward or call other API history of several objects directly in the js istory.back()、history.forward()、history.go()will trigger popstateevents.
Call history.pushState () or history.replaceState () does not trigger popstate event. Popstate event will only trigger certain behaviors browsers, such as clicking back, forward button (or call history.back in JavaScript (), history .forward (), history.go () method).
the MDN
Therefore, another implementation is that the front end of the route history mode