Einfache JavaScript URL Routing RegEx

Question

Ich versuche, eine sehr einfache URL-Router zu schreiben. Ich definiere ein "Routen" -Objekt, das Standortpfade und entsprechende "Modulnamen" enthält.

Nach einem vollständigen Laden der Seite (kein Hash oder PushState in diesem Szenario benötigt), möchte ich die Routen anzeigen und den entsprechenden Modulwert finden, wenn es existiert.

Ich habe Probleme mit meinem Code.

(function() { 

    return { 

     routes: { 
      '/': 'home', 
      '/about': 'about', 
      '/about/team': 'aboutTeam', 
      '/about/team/:member': 'aboutMember' 
     }, 

     init: function() { 

      var url = location.pathname; 

      for (var route in this.routes) { 

       if (this.routes.hasOwnProperty(route)) { 

        if (url.match(this.regex(route))) { 

         // return & load module 
        } 
       } 
      } 
     }, 

     regex: function(route) { 

      return new RegExp(route.replace(/:[^\s/]+/g, '([\\w-]+)')); 
     } 

    }.init(); 

})(); 

Der obige Code funktioniert überhaupt nicht gut. (Offensichtlich.) Landung auf der Seite /about/team/jim wird alle vier vordefinierten Routen in diesem Beispiel zurückgeben. (Und ich kann sehen, warum, nur mit einer Lösung zu kämpfen.)

Ich bin nicht gut mit regulären Ausdrücken. Ich habe das, was ich oben habe von hier gefangen: Javascript routing regex. Ich suche Rat und Anleitung. Nehme ich insgesamt überhaupt den richtigen Weg?

Answer 1

jsFiddle

console.clear(); 
 

 
(function() { 
 

 
    var routes = { // initial config 
 
    '/': 'home', 
 
    '/about': 'about', 
 
    '/about/team': 'aboutTeam', 
 
    '/about/team/:member': 'aboutMember' 
 
    }; 
 
    // parse and recreate config for use 
 
    routes = Object.keys(routes) 
 
    // sort longest path first 
 
    .sort(function(a,b){ return b.length - a.length; }) 
 
    // convert into more usable format 
 
    .map(function(path) { 
 
     return { 
 
     // create regex 
 
     path: new RegExp("^" + path.replace(/:[^\s/]+/g, '([\\w-]+)') + "$"), 
 
     module: routes[path] 
 
     }; 
 
    }); 
 
    // == [{ path: /^\/about\/team\//:([\w-]+)$/, module: "aboutMember" }, ...] 
 

 

 
    // fake url for testing 
 
    var url = "/about/team/jim"; 
 

 
    // loop through all routes, longest first 
 
    for (var i = 0, l = routes.length; i < l; i++) { 
 
    // parse if possible 
 
    var found = url.match(routes[i].path); 
 
    if (found) { // parsed successfully 
 
     console.log("module: " + routes[i].module); // module to load 
 
     console.log("args:", found.slice(1)); // arguments for module 
 
     break; // ignore the rest of the paths 
 
    } 
 
    } 
 
})();

Answer 2

Sie könnten durch Frontexpress router interessiert. Ich habe diese Bibliothek programmiert.

const app = frontexpress(); 

app.get('/', (req, res) => {}); 
app.get('/about', (req, res) => {}); 
app.get('/about/team', (req, res) => {}); 
app.get('/about/team/:member', (req, res) => { 
    const member = req.params.member; 
    // your front-end logic here 
}); 

app.listen(); 

Weitere Codebeispiele here