A pure route similar to backbone routing (front-end routing client route backbone routing)

Everyone with backbone, angular, may be accustomed to the built-in routing, the two framework of the routing is very good, powerful and simple.

The client (browser) Routing principle is actually relatively simple, actually is the monitoring hash change.

In the previous architecture discussion, when it comes to director.js this routing class library is not good, then, in this article, we try to implement a simple and very well-designed routing class library.

The principle is introduced first, only a few steps:

• Creating a configuration table (a mapping of string paths and functions)
• Listener Routing (onhashchange)
• Handles routing changes, matching the path to the configuration table
  • Path conversion to regular expression
  • Regular exec, match + extract parameters

The difficulty is that the path is converted to regular expression, the director does not do well is this step, and backbone is very very powerful, then we can try to backbone this piece of code out.

Routing table:

    var Route = root. Route = {        function  (map) {            var defaultaction = map[' * ');             if (defaultaction) {                = defaultaction;                 Delete map[' * '];            }             = map;            Init ();            OnChange ();        },        routes: {},        null    };

Listen for routing changes:

    /** * This judgment, quoted in Director:https://github.com/flatiron/director*/    functioninit () {if(' Onhashchange 'inchWindow && (Document.documentmode = = =undefined|| Document.documentmode > 7)) {            //At least for now HTML5 the history was available for ' modern ' browsers only            if( This. History = = =true) {                //There is a old bug in Chrome, causes onpopstate to fire even                //upon initial page load. Since The handler is run manually in Init (),                //This would cause Chrome to run it twise. Currently the only                //Workaround seems to is to set the handler after the initial page load                //http://code.google.com/p/chromium/issues/detail?id=63040SetTimeout (function() {window.onpopstate=onchange; }, 500); }            Else{Window.onhashchange=onchange; }             This. Mode = ' modern '; } Else {            Throw NewError (' Sorry, your browser doesn\ ' t support Route '); }    }

Handling routing changes, first piecing together regular expressions:

    /** * quoted from backbone, very good regular * @param route * @returns {REGEXP}*/    functionGetregexp (route) {varOptionalparam =/\ ((. *?) \)/G; varNamedparam =/(\ (\?)?: \ w+/G; varSplatparam =/\*\w+/G; varEscaperegexp =/[\-{}\[\]+?., \\\^$|#\s]/G; Route= Route.replace (escaperegexp, ' \\$& ')). Replace (Optionalparam,' (?: $)? '). Replace (Namedparam,function(match, optional) {returnOptional? Match: ' ([^/?] +) '; }). replace (Splatparam,' ([^?] *?)‘); return NewRegExp (' ^ ' + route + ' (?: \ \? ([\\s\\s]*))? $); }

From the original: Module2/:name into a standard regular expression, the secret of our own insight

Loop matching:

    functiononchange (onchangeevent) {varNewurl = onchangeevent && Onchangeevent.newurl | |Window.location.hash; varurl = newurl.replace (/.*#/, "); varFound =false;  for(varPathinchroute.routes) {varReg =getregexp (path); varresult =reg.exec (URL); if(Result && result[0] && result[0]! = "){                varHandler =Route.routes[path]; Handler&& handler.apply (NULL, Result.slice (1)); Found=true; }        }        if(!found &&route.defaultaction)        {route.defaultaction (); }    }

And then... To do a simple test:

<script src= "Libs/backbone-route.js" ></script><script>    route.init ({          function() {            console.log (1);        },        function() {            Console.log ( 2, arguments);        },        function() {            console.log (' 3 ', arguments);        },        function() {            console.log (404);        }    }); </script>

This article is code: Https://github.com/kenkozheng/HTML5_research/tree/master/backbone-route

A pure route similar to backbone routing (front-end routing client route backbone routing)