Simple JavaScript URL Routing RegEx

Question

Я пытаюсь написать очень простой URL-адрес маршрутизатора. Я определяю объект «маршруты», который содержит пути местоположения и соответствующие «имена модулей».

При полной загрузке страницы (в этом случае не требуется хэш или pushState), я хочу посмотреть маршруты и найти соответствующее значение модуля, если оно существует.

У меня возникли проблемы с моим кодом.

(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(); 

})(); 

Приведенный выше код не работает вообще. (Очевидно.) Посадка на странице /about/team/jim вернет все четыре предопределенных маршрута в этом примере. (И я понимаю, почему, просто борюсь с решением.)

Я не очень хорош с регулярными выражениями. Я зацепил то, что у меня выше, отсюда: Javascript routing regex. Я ищу советы и рекомендации. Я вообще правильно подхожу?

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

Вы можете быть заинтересованы по Frontexpress router. Я закодировал эту библиотеку.

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(); 

Больше примеров кода here