Skip to content

Instantly share code, notes, and snippets.

@hoatle
Created April 10, 2012 10:44
Show Gist options
  • Save hoatle/2350352 to your computer and use it in GitHub Desktop.
Save hoatle/2350352 to your computer and use it in GitHub Desktop.
JavaScript Router using underscore, requirejs
/**
* The routing controller object.
*
* Usage:
* + Define the routing table by controller.map(valueRegex, callback);
* the callback will be called and passed the value as the first argument.
* + Routing action by: controller.route(definedValue). If no definedValue matches, do nothing.
*/
define(
function() {
var mappings = [];
return {
/**
* Defines mapping rules.
*
* @param valueRegex the javascript regular expression object
* @param callback the callback function
*/
map: function(valueRegex, callback) {
if (mapRegistered(valueRegex)) {
$.log(valueRegex + ' was already mapped, no override map supported (yet)!');
return;
} else {
mappings.push({
'key': valueRegex,
'value': callback
});
}
},
/**
* Routes the matched callback registered from {@link #map(String, String)}.
*
* @param value the value to check
*/
route: function(value, noMatchCallback) {
var callback = getMatchedCallback(value);
if (callback) {
callback(value);
return;
}
noMatchCallback(value);
}
};
//private methods
function mapRegistered(valueRegex) {
var matched = false;
_.each(mappings, function(mapObj) {
if (matched) {
return;
}
if (_.isEqual(mapObj['key'], valueRegex)) {
matched = true;
return;
}
});
return matched;
}
function getMatchedCallback(value) {
var callback = null;
_.each(mappings, function(mapObj) {
if (callback) {
return callback;
}
if (value.match(mapObj['key'])) {
callback = mapObj['value'];
}
});
return callback;
}
}
);
//Test (require jquery log)
require(
['controller'],
function(controller) {
var commonRegexp = /#(\w+)/i;
var projectRegexp = /#work\/([^\/]+)/i;
var projectWithImageRegexp = /#work\/([^\/]+)\/gallery\/(\d+)/i;
var projectWithFilter = /#work\/filter\/(\d+)/i;
//controller mapping
controller.map(commonRegexp, function(value) {
$.log('common matched', value);
});
controller.map(projectRegexp, function(value) {
$.log('project matched', value);
});
controller.map(projectWithImageRegexp, function(value) {
$.log('project with image matched', value);
});
controller.map(projectWithFilter, function(value) {
$.log('project with filter matched', value);
});
controller.route('/#work', function(routeValue) {
$.log('no match router, this will be called');
});
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment