如何重写JavaScript的URL结构

Question

我有一个基本上具有以下URL结构的网页：

www.example.com/main.php?userId=mattias.wolff
www.example.com/definitions.php?userId=mattias.wolff
www.example.com/tasks.php?userId=mattias.wolff
www.example.com/profile.php?userId=mattias.wolff

我想做的是更改此设置以摆脱参数：

www.example.com/mattias.wolff
www.example.com/mattias.wolff/definitions
www.example.com/mattias.wolff/tasks
www.example.com/mattias.wolff/profile

服务器端这不是问题，因为我可以使用mod rewrite将URL重写为“旧”格式（包括参数等）。

我的问题是客户端应该如何处理？ 页面内容大部分是由JavaScript生成的，因此我需要以与以前相同的方式获取参数。

我在这里错过了一些最佳实践吗？ 在该函数上编写函数以解析Javascript中的新URL或以某种参数从服务器端发送“旧” URL？

Answer 1

基本上不要忘记， URL也是（一种）查询 。 这里的主要区别是您使用的是命名参数还是位置参数。

? 符号本质上是允许浏览器从表单查询自动构造URL的标准。

您也可以使用该方案的URL：

www.example.com/name=mattias.wolff/page=definitions

如果那是你想要的。

我的建议是为页面真正定义一个完全适合您的需求的URL方案，并为将来的扩展留出足够的空间。 理想情况下，如有必要，您应该能够在某些时候切换回旧方案，而不会造成主要名称冲突。

只要您不一直更改它，就可以在/[username]/[page]的方案中组织URL并从JavaScript使用此方案（用于解析和生成链接！），这显然没有错。

Answer 2

使用以下simple（？）函数，您可以按照指示的方式转换URL：

function transform (href) {
  var m = href.match (/((?:[^\/]+\/\/)?[^\/]+\/)(.*)\.php\?userId=(.*)/);
  return m ? m[1] + m[3] + '/' + m[2] : href;
}

基本上，该函数使用正则表达式匹配将URL的组成部分提取到数组中，然后以所需的方式重组URL。 如果匹配失败，则返回原始URL。

在Chrome上通过以下测试：

var test = ["www.example.com/main.php?userId=mattias.wolff",
            "www.example.com/definitions.php?userId=mattias.wolff",
            "http://www.example.com/tasks.php?userId=mattias.wolff",
            "www.example.com/profile.php?userId=mattias.wolff"];

for (var i = test.length; i--;)
  console.log ('"' + test[i] + '" --> "' + transform (test[i]) + '"');

输出：

"www.example.com/profile.php?userId=mattias.wolff" --> "www.example.com/mattias.wolff/profile"
"http://www.example.com/tasks.php?userId=mattias.wolff" --> "http://www.example.com/mattias.wolff/tasks"
"www.example.com/definitions.php?userId=mattias.wolff" --> "www.example.com/mattias.wolff/definitions"
"www.example.com/main.php?userId=mattias.wolff" --> "www.example.com/mattias.wolff/main"