altrd-router v2.0.0
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. |
6 years ago