Как да изградите свой собствен рутер с Vanilla JavaScript

Блог

Как да изградите свой собствен рутер с Vanilla JavaScript

Когато мислите за рутери, обикновено мислите за библиотеки като React. Но под капака тези библиотеки и рамки все още се използват ванилов JavaScript . И така, как го правят? Надявам се Урок за JavaScript рутер ще ви помогне да разберете как да сглобите своя собствен ванилов JS рутер.

Срещал съм много хора, които искаха да създадат свой собствен рутер по различни причини. В края на краищата търсихте този урок за ванилов JS рутер - това означава, че искате да създадете такъв!

В крайна сметка, използвайки a ванилов JS рутер намалява зависимостта ви от рамки.

Създаването на собствен рутер във ванилов JavaScript е сравнително лесно, стига да разбирате всички отделни части, участващи в създаването му.

Ето основните неща, които трябва да знаете за създаването на собствени JS рутер :

двоично дърво на морзовата азбука
  1. Ключът към ваниловото JS маршрутизиране е location.pathname Имот.
  2. Чуйте за popstate събитие, на което да се отговори. pathname промени. Това се случва винаги, когато в адресната лента на браузъра се въведе нов URL адрес, но не искаме да опресняваме страницата, а просто опресняваме изгледа, като зареждаме ново съдържание.
  3. По желание можете да съхранявате маршрути в маршрути [] масив.
  4. Знание за Регулярни изрази на JavaScript ( RegEx ) за анализиране на URL е необходимо.
  5. Основно разбиране за история и history.pushState (API за история на JavaScript) е от решаващо значение, ако искате да интегрирате вашия рутер в архитектурата на родния браузър.

Смятам да изградя този урок с течение на времето, защото се уча, докато го пиша сам. Първо, ще се справим с API на History.

сложни sql заявки примери pdf

Бърз преглед на API за история на JavaScript

Виждал съм толкова много ванилов JS рутер уроци, които не споменават API за история на JavaScript. Жалко, защото щракнете върху браузъра обратно и Напред бутони има всичко общо с навигацията между URL адреси в историята на сърфиране. Не можете да говорите за маршрутизиране без API на History.

  1. history.back () е същото като history.go (-1) или когато потребителят кликне обратно бутон в браузъра им. Можете да използвате и двата метода със същия ефект.
  2. history.forward () изпълнява, когато потребителят натисне браузъра Напред бутон и е еквивалентен на history.go (1) .
  3. отивам() е подобен на .обратно() и напред () методи, освен че можете да посочите колко стъпки назад или напред искате да преминете в стека на историята на браузъра.
  4. pushState () ще избута ново състояние към History API.
  5. .дължина свойството е броят на елементите в историята на сесията.
  6. .държава property се използва за търсене на състоянието, без да се слуша popstate събитие.

Добре, нека започнем с нашата собствена внедряване на JS рутер с ванилия!

Просто ще сваля минимума HTML , CSS, и JavaScript заредени с коментари.

История Настройка на Vanilla JS маршрутизатор, базирана на API

Нека преминем минималния код, необходим за изграждането на URL превключвател ( без опресняване на страницата ) и след това ще ви покажа GIF как работи всичко.

Hello function select_tab(id) { // remove selected class from all buttons document.querySelectorAll('.route').forEach(item => item.classList.remove('selected')); // select clicked element (visually) document.querySelectorAll('#' + id).forEach(item => item.classList.add('selected')); } function load_content(id) { // Update text 'Content loading for {id}...' // Of course, here you would do you content loading magic // Perhaps run Fetch API to update resources document.querySelector('#content').innerHTML = 'Content loading for /' + id + '...'; } function push(event) { // Get id attribute of the box or button or link clicked let id = event.target.id; // Visually select the clicked button/tab/box select_tab(id); // Update Title in Window's Tab document.title = id; // Load content for this tab/page loadContent(id); // Finally push state change to the address bar window.history.pushState({id}, `${id}`, `/page/${id}`); } window.onload = event => { // Add history push() event when boxes are clicked window['home'].addEventListener('click', event => push(event)) window['about'].addEventListener('click', event => push(event)) window['gallery'].addEventListener('click', event => push(event)) window['contact'].addEventListener('click', event => push(event)) window['help'].addEventListener('click', event => push(event)) } // Listen for PopStateEvent (Back or Forward buttons are clicked) window.addEventListener('popstate', event => { // Grab the history state id let stateId = event.state.id; // Show clicked id in console (just for fun) console.log('stateId = ', stateId); // Visually select the clicked button/tab/box select_tab(stateId); // Load content for this tab/page loadContent(id); }); * { /* global font */ font-family: Verdana; font-size: 18px; } #root { display: flex; flex-direction: row; } #content { display: flex; display: block; width: 800px; height: 250px; /* vertically centered text */ line-height: 250px; border: 2px solid #555; margin: 32px; text-align: center; } .route { cursor: pointer; justify-content: center; width: 150px; height: 50px; /* vertically centered text */ line-height: 50px; position: relative; border: 2px solid #555; background: white; text-align: center; margin: 16px; } .route.selected { background: yellow; } /home /about /gallery /contact /help Content loading...

В основата е призив за window.history.pushState ({ документ за самоличност }, $ { документ за самоличност }, /страница /$ { документ за самоличност });

Първият параметър е уникален идентификатор на състоянието. Вторият е текст от заглавието на табулатор. И накрая, третият параметър е това, към което искате да се промени адресната лента. Това кара браузъра да променя URL адреса, без да презарежда страницата.

Резултатите. Сега всеки път, когато кликнете върху бутон, URL адресът действително ще се промени в адресната лента на браузъра. Кутията за съдържание също се актуализира.

Можеш вилица от моя GitHub ( router.html ) в моето ванилова JS библиотека .

най-добрата тема срещу код

Нашият ванилов JS рутер в действие. Имайте предвид, че при всяко щракване на бутон се задейства history.pushState. Просто му предаваме идентификатора на кликвания елемент, съхраняван в атрибута id на елемента: У дома , относно , галерия , и така нататък. Те трябва да съвпадат с действителната страница, до която искате да отидете. Разбира се, това не е единственият начин за съхраняване на имена на страници - можете да използвате масив [] например или по друг начин. Това е просто начина, по който беше направено в този пример.

Разбира се, ние също трябва да заредим съдържание от сървъра, отнасящо се до оформления и ресурси за това местоположение. Това зависи от вашето приложение. Това може да бъде всичко.

Задействане на бутоните Назад и Напред

Като се използва history.pushState , автоматично ще направите обратно и Напред бутоните придвижват до предишното или следващото състояние. Правенето на това произвежда popstate събитие. Това е частта, в която трябва да актуализирате изгледа си още веднъж. ( Първият път беше, когато натиснахме бутона. )

Но тъй като събитието носи документ за самоличност на това, върху което е щракнато, е лесно да актуализирате изгледа и да презаредите съдържанието, когато обратно или Напред са щракнати.

www.netflix.com/tv8 въведете код

Тук не използваме React или Vue, така че в моя изходен код load_content ще се погрижи за актуализиране на изгледа директно в DOM. Тази област вероятно ще бъде населена с някакво съдържание, заредено от вашия API. Тъй като това е само преден край например, не мога да ви покажа много. Но така се работи от страна на клиента .

Първоначално зареждане на рутера от страна на сървъра

Необходима е още една стъпка, за да се събере всичко. В моя пример просто използвах router.html . Когато зареждате този рутер за първи път в PWA, трябва да се уверите, че работи, ако, да речем,. /страница/начало е въведен директно в адресната лента.

Досега сме променили адреса на рутера само от преден край . Предполага се, че всеки път, когато навигирате до URL адреса, който се показва на бутоните на нашия рутер, той всъщност ще се зарежда индивидуално от сървъра.

Така че ваша отговорност е да се уверите, че например. /страница/за ще зареди маршрутизатора и за страницата в root изглед на вашето приложение. Той също така трябва да подчертае текущия бутон/раздел.

След като приложите тази част, вашият рутер ще бъде завършен. Как избирате да презаредите съдържанието #съдържание Елементът зависи изцяло от вас и вашия back-end дизайн.

Първоначално публикувано от JavaScript учител в https://www.freecodecamp.org

#javascript #webdev

единични кавички срещу двойни кавички javascript