altrd-router

A JavaScript routing module.

altrd-router is a lighweight vanilla JavaScript client-side router for single page applications. It is a refinement on Joakim Carlstein's proof of concept for a 20-line JavaScript router documented here.

This module supports basic client-side routing that is drive by plain JavaScript and can work with any view library or templating language.

Modules

altrd-router consists of (2) modules: Router and RouteTable.

Router

Router houses all business logic of the router via hash-based routing. Router() takes an object with optional arguments and returns an instance of Router that exposes a start and a RouteTable method.

|function/method | description | |---|---| | validateRoute | private function, checks for presence of a given URL on Router's internal routeMap. On undefined route, returns false | |regRoute| private function, adds an argument route to Router's internal routeMap | |resolveRoute| private function, resolves any route that has a resolve method. Resolve methods are functions that request some async data and return promise. Takes a route, a params object containing query parameters in the URL being triggered and a routeTimer.| |execRoute | private function, clears routeTimer, if still in effect, initializes route controller with any data returned from resolveRoute.| |router| private function, triggered on Window's load or hashchange event, takes a URL string, starts routeTimer used to trigger a loading animation, starts route validation.| |getParams| private function, takes a URL and returns an object mapping URL query parameters to their values. | |stripParams| private function, takes URL and removes any query params, returning only the stripped URL.| |start| registers all routes, adds event listeners for the loadand hashchange events. Takes a routeTable and callback to trigger after route registration.| |RouteTable| a constructor returning and instance of RouteTable. See list of methods available on this constructor below.|

RouteTable

RouteTable stores route objects and exposes (2) methods: addRoute and routes.

|function/method | description | |---| ---| |addRoute| adds a route object to an internal routeTable array.| |routes| returns internal routeTable. An array of all registered routes. |

The Route object

Routes are plain JavaScript objects with the following fields:

|field| description| |---|---| |path| [required] string with a leading backslash and without # sign. This is the URL that will trigger the route (e.g. https://mysite.com/index#/list)| |templateURL| string file path to the template to be loaded in the view. |controller| function manages all data and events for a specified view. | |container | string a querySelector to identify the dom node to attach the rendered template to (e.g. #container.) | |resolve| function returns a Promise. Used to delay loading a view until async data is fetched. | |onTimeout| function executes after the timeout duration has been reached. Usually used to show a loading animation on routes that require data fetched from the server.| |timeout| integer a value in milliseconds to wait before calling the onTimeout method.|