[JS] Simpele front-end router

[Vinze]

Ik ben bezig om een eigen router te schrijven in Javascript en in principe werkt hij perfect alleen mis ik nog één ding: ik wil graag optionele parameters kunnen gebruiken.

Allereerst de code en wat voorbeeld routes:

JavaScript:

var Router = new function() {
    // Store the routes
    var routes = [];

    // Register routes
    this.on = function(url, fn) {
        routes.push({ url: url, fn: fn });
    }

    // Run the router
    this.run = function() {
        window.addEventListener('hashchange', processRoute);
        window.addEventListener('load', processRoute);
    }

    // Start routing
    var processRoute = function () {
        // Get the hash
        var hash = location.hash.slice(1) || '/';

        // Split the hash
        var hashParts = hash.split('/').slice(1);

        // No route matched (yet..)
        var routeMatched = false;

        // Loop through the routes
        for (var x = 0; x < routes.length; x++) {

            // Split each part of the route
            var routeParts = routes[x].url.split('/').slice(1);

            // Set the routeParts/hashParts matches to zero
            var matches = 0;

            // Create the params object
            var params = {};

            // Check if the hash length matches the route length
            if (routeParts.length == hashParts.length) {

                // Loop though the hashParts
                for (var y = 0; y < hashParts.length; y++) {
                    // Check if the parts match
                    if (routeParts[y] == hashParts[y]) {
                        matches++;
                    }
                    // Check of the routePart is a parameter
                    else if (routeParts[y].substring(0, 1) == ':') {
                        params[routeParts[y].substring(1)] = hashParts[y];
                        matches++;
                    }
                    // The route matches the current hash
                    if (matches == hashParts.length) {
                        // Execute the route function
                        routes[x].fn(params);
                        routeMatched = true;
                        break;
                    }
                }
            }
        }
        if (!routeMatched) {
            console.log('Route not found....');
            // location.hash = '#/';
        }
    }
}

Router.on('/', function(params) {
    console.log('Route:', '/');
});

Router.on('/users', function(params) {
    console.log('Route:', '/users');
});

Router.on('/users/view/:id', function(params) {
    var id = params.id
    console.log('Route:', '/users/view/:id');
});

Nu heb ik het idee om een parameter uit de URL optioneel te maken door er een vraagteken achter te plaatsen:

JavaScript:

Router.on('/users/view/:id/:name?', function(params) { 
    ...
});

Nu had ik al een extra for loop toegevoegd welke over de routeParts heel loopt en kijkt hoeveel verplichte parameters deze bevat. Echter kreeg ik het niet voor elkaar om de juiste route te matchen, en nu krijg ik het plaatje in m'n hoofd even niet compleet hoe het wel zou moeten werken.

Iemand die me een duwtje in de juiste richting kan geven? Of eventueel tips hoe ik de code wat compacter/efficiënter kan maken?

[Verwijderd]

Een manier om dit sneller te doen is om dit serverside te doen.. Waarom doe je dit niet serverside, eigenlijk?

[hillbillie]

Verwijderd schreef op dinsdag 06 mei 2014 @ 06:31:
Een manier om dit sneller te doen is om dit serverside te doen.. Waarom doe je dit niet serverside, eigenlijk?

Een SPA misschien?

ontopic: waarom kijk je niet en/of gebruik je backbone?

[ Voor 22% gewijzigd door hillbillie op 06-05-2014 08:32 ]

[Vinze]

hillbillie schreef op dinsdag 06 mei 2014 @ 08:28:
[...]


Een SPA misschien?

ontopic: waarom kijk je niet en/of gebruik je backbone?

Klopt, voor wat grotere projecten gebruik ik Angular of Backbone, maar dat is in dit geval overkill. Daarnaast vind ik het ook wel leuk en leerzaam om te doen.

[Woy]

Dit is puur front-end en hoort dus in WEB

PRG -> WEB