Mini MVVM Framework Avalonjs Learning Tutorial 20, routing system

The spa's success leaves no one of these three things, layered architecture, routing system, storage system. Hierarchical architecture is the key to our organization of complex code, especially in MVVM's Avalon; The routing system is the key to compressing multiple pages on a single page; storage systems, especially local storage, are key to storing large amounts of data safely. This section describes the Mmrouter (containing mmhistory) of one of Avalon's three pillars.

Let's start with an example.

<!        DOCTYPE html>
Seeing as it is, you can see that Mmrouter is running well under IE6, not to mention a higher version of the browser. Fallback button, hash if it has the same name as an anchor on the page, it will automatically be pulled there.
Let's go over the usage of it in detail.

 
 

  
  
 
   
First introduce mmrouter (please put mmrouter.js, mmhistory.js these two files together with Avalon.js)
 
   
Defining VMS
 
   
Defining Routing Rules
 
   
Start the history manager
 
   
Start scanning
 
  
 
 
Mmhistory is used for historical management, it will hijack all click links on the page behavior, when these links are #/ ,#!/ Start, try to match the routing rules, Prevent page refresh (by hashing or HTML5 replacestate mode). Mmrouter is to define the routing rules for us, and the routing rules can specify more finely the matching rules for each parameter (param), and if they do, they execute the corresponding callbacks, and if they do not, go to the error callback.
When the user clicks on the page link, the address bar changes, and Avalon refers to the angular way to handle the road address bar.

 
 

  
  
 
   
Hashbang mode (default), which is supported by all browsers in this mode
 
   
HTML5 mode, this can only be applied to Firefox, Chrome, safari,ie10+, if the browser does not support this feature, even if you set Avalon.history.start ({html5mode:true}), It is also running in Hashbang mode.
 
  
 
 
When we use the history API mode, we need different links for different browsers, but we only need to provide their hash part, for example <a href= "#/aaa" >link</a>
When the user clicks the hyperlink:

 
 

  
  
 
   
In Hashbang mode, the URL is changed to/INDEX.HTML#!/AAA
 
   
In HTML5 mode, the URL is changed to/INDEX.HTML/AAA
 
  
 
 
You will find that the section behind #! in Hashbang mode is equal to all parts of HTML5 mode except for the domain name. And #! is actually Google's _escaped_fragment_ crawl rules, convenient for our AJAX applications can also be included in the crawler. Of course, we also need to add a meta tag inside the head tag:
<meta name= "Fragment" content= "!"/>
To learn more about this technology, here is a list of the routers ' APIs:

 
 

  
  
 
   
  Avalon.history.start (opts)  to start listening for URL changes, opts. 
 
   
  avalon.history.stop ()  to abort the listener URL change. 
 
   
  avalon.router.get (Path, callback) , which is used to add a routing rule. The first is a route rule, such as "/aaa", "/bbb/:bbbid", "/eee/{eeeid}/ddd/{dddid:[0-9]{6}" after the colon, something or curly braces are represented as arguments, and the matching rules can be specified in curly braces mode. Callback is a callback function, the framework passes a colon-or-flower match, and the This object contains objects and properties such as path, params, query, and so on. 
 
   
  Avalon.router.add (method, Path, callback) , add a callback, the first for the request type, such as Get,post,delete What, 2nd is the routing rule, The 3rd is the callback function 
 
   
  avalon.router.error (callback) , and if no routing rule satisfies this request, then this callback processing is forwarded, We can write a logical 
 
   
  avalon.router.navigate (path)  that jumps to the 404 page, forcing a callback for the corresponding path 
 
   
  Avalon.router.setLastPath (Path) , which is called by the framework itself, saves the path of the most recent jump 
 
   
 *  avalon.router.getLastPath () * , Take the path of the most recent jump, such as the User F5 Force page, you execute this method in the ready callback, get path, and then put it into the navigate to return to the original page. 
 
  
 
 
Finally, let's describe the routing rule in detail, which is a string that must be preceded by a / , which can be followed by a colon directly after each / , indicating that the next slash or end is a parameter. It can also use curly braces to denote the contents of the inside as well as a parameter. The diagonal money style is from backbone with express, curly brace style is from Ui-router. The curly brace style is more powerful, so it can specify a more detailed matching rule.
Avalon.router.get ("/ddd/:d Ddid/", callback) Avalon.router.get ("/ddd/{dddid}/", callback) Avalon.router.get ("/ddd/{ dddid:[0-9]{4}}/", callback) Avalon.router.get ("/ddd/{dddid:int}/", callback)
The Mmrouter default has four parameter matches, called date, init, bool, string, respectively.
      $types: {            Date: {                pattern: "[0-9]{4}-(?: 0 [1-9]|1[0-2])-(?: 0 [1-9]| [1-2] [0-9]|3[0-1]) ",                Decode:function (val) {                    return new Date (Val.replace (/\-/g,"/")                }            }},            string: {                Pattern: "[^\/]*"            },            bool: {                decode:function (val) {                    return parseint (val, ten) = = = 0? false:true;
   },                pattern: "0|1"            },            int: {                decode:function (val) {                    return parseint (Val, ten);                },                pattern: "\d+"            }        }
The Decode method is used to convert the small strings that we extracted from the address bar to the desired type or format. If you want more effects, you can add them yourself, such as Avalon.router. $type. d4 = {pattern: ' [0-9]{4} ', Decode:number}
Avalon.router.get ("/ddd/{dddid:d4}/", callback)
All in all, Mmrouter is far more powerful than angular's own router with backbone. The future will be further developed similar to Ui-router-based state management router, please look forward to!
Mini MVVM Framework Avalonjs Learning Tutorial 20, routing system