簡單的JavaScript URL路由正則表達式

我想寫一個非常基本的URL路由器。我定義了一個包含位置路徑和相應的「模塊名稱」的「路線」對象。簡單的JavaScript 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。我正在尋求建議和指導。我是否總是採取正確的方法？

來源

2016-06-09 Colonel Hogan

的路線應以相反的順序進行迭代，並在第一場比賽 –

@Himmel打破循環 - 不，'新的RegExp（）'需要一個字符串參數和返回一個正則表達式對象。 – nnnnnn

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

來源

2016-11-22 10:37:52 Whothehellisthat

可選參數如何？像/ about/team /：成員？ –

-1

您可能會感興趣的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

來源

2017-07-05 23:13:19 Camel

簡單的JavaScript URL路由正則表達式

回答

相關問題