Как переписать структуру URL для JavaScript

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, и поэтому мне нужно получить параметры так же, как и раньше.

Есть ли лучшая практика, которую я здесь пропустил?Написание функции для синтаксического анализа нового URL в Javascript или отправки «старого» URL со стороны сервера в каком-либо параметре?

Answer 1

Не забывайте, что, по сути, URL является (своего рода) запросом тоже .Основное различие заключается в том, используете ли вы именованные параметры или позиционные параметры.

Обозначение ? по сути является стандартом, позволяющим браузеру создавать URL-адрес иззапрос формы автоматически.

Вы также можете использовать URL-адреса схемы:

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

, если вы этого хотите.

Я рекомендую вам:действительно определите схему URL для ваших страниц, которая полностью соответствует вашим потребностям и имеет достаточно места для дальнейшего расширения.В идеале вы должны иметь возможность вернуться к старой схеме в какой-то момент, если это необходимо, без серьезных конфликтов имен.

Очевидно, что нет ничего плохого в организации ваших URL-адресов в схеме /[username]/[page] и использовании этогосхема из JavaScript (как для парсинга, так и для генерации ссылок!), если вы не меняете ее постоянно.

Answer 2

С помощью следующей простой функции (?) Вы можете преобразовать 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"