вторник, 31 декабря 2013 г.

JavaScript Router в 70 строк

Файл main.js

window.document.addEventListener("route.changed", function (e) {
  console.log(e.data.route, "------", e.data.params);
}, false);

Router.map("/foo", "route.changed");
Router.map("/foo/(bar-map)", "route.changed");
Router.map("/foo/(bar)/name", function (e){
  console.log("Direct callback", e);
});

Router.start();

Файл router.js

(function($, win) {
  var Routes = [];
  var doc = win.document;
 
  function fireCustomEvent(name, data) {
    var evt = doc.createEvent("HTMLEvents");
    evt.initEvent(name, true, true ); // event type,bubbling,cancelable
    evt.data = data;
    return !doc.dispatchEvent(evt);
  }

  function hashChange() {
    var url = (win.location.hash || "#").slice(1);
    $.Router.match(url);
  }

  $.Router = {
    map: function (r, e) {
      // Escape anything except () and replace (name) with (.+)
      var es_tmp = r.replace(/[-[\]{}*+?.,\\^$|#\s]/g, "\\$&").replace(/\([^\)]+\)/g, "([^/]+)");
      var r_exp = new RegExp("^"+es_tmp+"$", "g");
     
      // Save names and routes under with expression and variable names
      Routes.push({
        exp: r_exp,
        names: r_exp.exec(r).slice(1),
        event: e
      });
    },
   
    match: function (r) {
      for(var i in Routes) {
        var rout = Routes[i];
       
        if (r.match(rout.exp)){
          var params = {};
          info = rout.exp.exec(r).slice(1);
          for(var k in info) {
            params[rout.names[k].replace(/[()]/g, "")] = info[k];
          }
                                       
          if(typeof rout.event === 'function') {
            rout.event({data: {params: params, route: r}});
          }else if( typeof rout.event === 'string') {
            fireCustomEvent(rout.event, {params: params, route: r});
          }
        }
      }
    },

    start: function() {
      if (window.addEventListener) {
        window.addEventListener("hashchange", hashChange, false);
      }
      else if (window.attachEvent) {
        window.attachEvent("onhashchange", hashChange);  
      }
      hashChange(); // Call first time for loading first URL
    },

    stop: function() {
      if (window.removeEventListener) {
          window.removeEventListener("hashchange", hashChange, false);
        }
        else if (window.attachEvent) {
          window.detachEvent("onhashchange", hashChange);  
        }
      }
  };
})(window, window);

Комментариев нет:

Отправить комментарий