Я видел пост о том, как создать маршрутизатор в чистом ванильном JavaScript. Поскольку это не говорило о хешировании маршрутизации, я решил создать этот пост, чтобы поделиться с вами своими знаниями.

Зачем мне это делать?

Создание маршрутизатора в JavaScript теперь стало тривиальным благодаря истории API. Он в значительной степени поддерживается и позволяет вам построить свой маршрутизатор так, как вы хотите, не полагаясь на стороннюю библиотеку. В Vue.js вы даже можете построить свой собственный домашний маршрутизатор и подключить его благодаря плагинах Vue.js. Фактически, официальная библиотека маршрутизатора для Vue.js, Vue Router, опирается на историю API. Но не только. Потому что это необязательно позволит вам построить так называемый хэшированный маршрутизатор.

Что такое хешированный маршрутизатор?

Это маршрутизатор, который не полагается на историю API, а скорее на хэш -URL вашего сайта. Допустим, у вас есть заголовок на вашей веб -странице.

About me
Lorem ipsum dolor sit amet...

И вы хотели, чтобы ваши пользователи прыгнули непосредственно в этот раздел, когда они находятся в главе вашей страницы. Вы хотели бы использовать id атрибут для вашего названия.

About me

И создайте ссылку, например, в вашем заголовке, чтобы перенаправить своих пользователей в этот раздел.

  About me

Теперь, если вы нажмете на ссылку, URL должен уйти от

http://yoursite.com

К

http://yoursite.com#about

Ничего особенного, верно?

Зачем мне использовать хэшический маршрутизатор?

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

Failed to execute 'pushState' on 'History': A history state object with URL 'file:///path/to/index.html' cannot be created in a document with origin 'null'

Это связано с тем, что по умолчанию HTML -документы, открытые в качестве файлов, имеют исходное происхождение, установленное в NULL Анкет Это проблема.

Вместо этого маршрутизаторы, основанные на базе, полагаются не на это, а скорее на событие, выпущенное окно-объектом. Это событие будет уволено, когда мы изменим хэш URL. В нашем предыдущем примере нажатие на ссылку запустит это событие. Не требуется веб -сервер.

Как я могу внедрить хэшический маршрутизатор?

Это так же просто, как использовать только одно событие. Onhashchange мероприятие.

  
    Home
    About
    
  

function onRouteChanged() {
  console.log("Hash changed!");
}

window.addEventListener("hashchange", onRouteChanged);

Hash changed!
Hash changed!

Попробуйте онлайн Анкет

Реализация маршрутизации

Теперь нам нужно получить маршрут, который был выпущен пользователем. Мы можем использовать window.location.hash Свойство, чтобы получить значение текущего «маршрута».

  function onRouteChanged() {
-   console.log("Hash");
+   console.log(window.location.hash);
  }

#home
#about

Попробуйте онлайн Анкет

У нас есть все, что нам нужно сейчас. Мы можем начать реализовать визуализ для нашего маршрутизатора.

      About
+     Contact
+     

      

Я также добавил еще одну ссылку. Это поможет мне показать вам, как мы также можем реализовать 404 - страница не найдена обработчик Вы будете удивлены, насколько это легко.

Далее нам нужно добавить немного больше логики в нашем Onroutechange обработчик так, чтобы это мог сделать наши маршруты так, как маршрутизатор.

  function onRouteChanged() {
-   console.log(window.location.hash);
+   const hash = window.location.hash;
+   const routerView = document.getElementById("router-view");
+ 
+   if (!(routerView instanceof HTMLElement)) {
+     throw new ReferenceError("No router view element available for rendering");
+   }
+ 
+   switch (hash) {
+     case "#home":
+       routerView.innerHTML = "
Home page
";
+       break;
+ 
+     case "#about":
+       routerView.innerHTML = "
About page
";
+       break;
+ 
+     default:
+       routerView.innerHTML = "
404 - Page Not Found
";
+       break;
+   }
  }

Попробуйте онлайн Анкет

Я сохранил хэш -URL в переменной, чтобы я мог использовать Переключение Заявление о том, чтобы сделать другой контент HTML в зависимости от маршрута, который был выпущен пользователем. Я также сохранил элемент представления маршрутизатора, чтобы проверить, действительно ли элемент в документе (мы никогда не знаем, что может произойти, и было бы неплохо иметь какое -то красноречивое сообщение об ошибке в этом случае). Мне также нужно обновить innerhtml Содержание маршрутизатора в Переключение утверждение.

Оператор по умолчанию переключателя будет запускается с нашей контактной ссылкой, потому что мы не указали ни одного обработчика для него в нашем коммутаторе.

Вот и все! У вас есть очень простой маршрутизатор, который работает повсюду, будь то размещено на веб -сервере или совместно используется в виде одной HTML -страницы. Я вижу некоторые использования, когда вам нужно показать быстрый прототип веб-сайта, например, клиенту. Все, что ему нужно сделать, это открыть страницу в своем браузере и Тада!

Ограничения

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

Решение

Решение, которое я нашел для этой проблемы, вероятно, не самое лучшее, но оно того стоит, если вам абсолютно необходимо использовать маршрутизацию на основе хэша,-это использовать данные- * Атрибут вместе с небольшим количеством JavaScript.

to the intro

"use strict";

document.querySelectorAll("[data-go-to-id]").forEach(function(link) {
  link.addEventListener("click", function() {
    const element = document.getElementById(link.dataset.goToId);

    if (!(element instanceof HTMLElement)) {
      throw new ReferenceError(`Unable to found element with id "${goToId}"`);
    }

    window.scroll({
      top: element.getBoundingClientRect().top,
      left: 0,
      behavior: "smooth"
    });
  });
});

Плавная прокрутка на некотором устройстве не будет работать (в частности, я думаю о некоторых устройствах Apple), но это было бы одним из, я уверен, много решений, которые вы могли бы найти, чтобы решить эту проблему. Мое решение имеет недостаток, что его нельзя использовать в общих ссылках, таких как Эй, посмотри, что я нашел здесь: http://yoursite.com#home#title-of-article Анкет Я позволил этому упражнению для читателя реализовать лучшее решение.

Вывод

Маршрутизаторы на основе хэш-это еще один способ маршрутизации ваших пользователей без необходимости перезагрузить страницу. Это также удобно при создании страниц GitHub, так как нам не нужно переосмыслить наш маршрутизатор, основанный на истории, и префикс всех наших маршрутов с подкаталогами, такими как /github-repo/about Анкет

Если вам не нужно использовать много перенаправлений HREF и не хотите/не может использовать API истории, то это может быть хорошим решением, чтобы иметь маршрутизатор на вашей странице.

То, что я показал вам,-это очень простая реализация маршрутизатора на основе HASED. Если вы хотите пойти дальше, вы можете:

• Реализуйте этот маршрутизатор внутри объекта, например Новый хэссеррутер Чтобы сделать API более простым в использовании. Особенно с такими методами, как addroute и старт Анкет
• Найдите лучшее решение, чем то, что я использовал для реализации ссылок на странице.

Оригинал: “https://dev.to/aminnairi/a-router-without-a-web-server-in-vanilla-javascript-3bmg”