VanillaJS를 사용하여 사용자 정의 SPA 라우터 구축
소개
본고에서 Vanilla JavaScript를 사용하여 사용자 정의 SPA 공유기를 구축하는 방법을 설명하겠습니다.나는 프레임워크를 사용하지 않은 상태에서 UI 프로젝트를 구축해야 했고, 루트를 어떻게 처리하는지 고려해야 했다. Vanilla JavaScript를 사용하여 자신의 공유기를 구축할 수 있다는 것을 발견했다.
면책 성명
나는 이러한 이념에 전적으로 동의한다. 즉, 우리가 이전에 이미 잘 해결된 문제에 시간을 쓰지 말아야 한다는 것이다. 프레임워크가 등장함에 따라 많은 기존의 공유기가 사용할 수 있다는 것이다.본고의 목적은 VanillaJS를 사용하여 사용자 정의 공유기를 작성하는 것이 가능하다는 것을 설명하고 아래의 내용을 잘 이해하는 것이다.
창 - 기록 및 위치 객체
사용자 정의 공유기를 구축하기 위해서는 먼저'창'대상의'역사'와'위치'대상, 그리고 페이지 내비게이션을 처리하는 데 필요한 몇 가지 방법을 알아야 한다.
히스토리 객체
window.history 객체는 브라우저 세션 역사에 대한 자세한 정보를 제공합니다.사용자 기록을 탐색하는 방법과 속성을 포함합니다.
브라우저 컨트롤러를 열고history를 입력하면history 대상의 모든 방법과 속성을 볼 수 있습니다. 아래와 같습니다.
위치 객체
window.location 원점, 경로 이름 등 현재 위치와 관련된 모든 정보를 포함합니다.
브라우저 컨트롤러를 열고 로케이션을 입력할 수 있습니다. 로케이션 대상과 관련된 모든 속성과 방법을 볼 수 있습니다. 아래와 같습니다.
히스토리 - pushState ()
이 방법pushState은 브라우저의 세션 히스토리 스택에 상태를 추가하는 데 사용됩니다.
Syntax: history.pushState(state, title, [, url]);
사용자 정의 공유기를 구축하기 위해서는 먼저'창'대상의'역사'와'위치'대상, 그리고 페이지 내비게이션을 처리하는 데 필요한 몇 가지 방법을 알아야 한다.
히스토리 객체
window.history 객체는 브라우저 세션 역사에 대한 자세한 정보를 제공합니다.사용자 기록을 탐색하는 방법과 속성을 포함합니다.
브라우저 컨트롤러를 열고history를 입력하면history 대상의 모든 방법과 속성을 볼 수 있습니다. 아래와 같습니다.
위치 객체
window.location 원점, 경로 이름 등 현재 위치와 관련된 모든 정보를 포함합니다.
브라우저 컨트롤러를 열고 로케이션을 입력할 수 있습니다. 로케이션 대상과 관련된 모든 속성과 방법을 볼 수 있습니다. 아래와 같습니다.
히스토리 - pushState ()
이 방법pushState은 브라우저의 세션 히스토리 스택에 상태를 추가하는 데 사용됩니다.
Syntax: history.pushState(state, title, [, url]);
창 - popstate 이벤트
사용자가 세션 기록을 탐색할 때, 활동 기록을 변경할 때, popstate event 자극됩니다.
다시 말하면 브라우저의'후퇴'또는'전진'단추를 눌렀을 때마다 역사 기록이 바뀌고 팝state 이벤트를 촉발합니다.
역사가 바뀔 때마다popstate 이벤트를 사용하여 논리를 처리합니다.
라우터 구현
이제 우리는 기본 원리를 파악했고 VanillaJS를 사용하여 공유기를 실현하는 단계별 방법을 연구할 것이다.
보기
색인html은 매우 간단한 페이지로 페이지 링크를 포함하는 무질서한 목록-
지수html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vanilla JS Router</title>
</head>
<body>
<ul class="navbar-list">
<li class="navbar-item">
<a href="#" onclick="onNavClick('/about'); return false;">About</a>
</li>
<li class="navbar-item">
<a href="#" onclick="onNavClick('/'); return false;">Home</a>
</li>
<li class="navbar-item">
<a href="#" onclick="onNavClick('/contact'); return false;">Contact</a>
</li>
</ul>
<div id="root"></div>
<script src="./js/app.js"></script>
</body>
</html>
집.html
<div>
<h1>******Welcome to the Home Page*****</h1>
</div>
에 관하여html
<div>
<h1>******Welcome to the About Page*****</h1>
</div>
연계하다html
<div>
<h1>******Welcome to the Contact Page*****</h1>
</div>
HTML 페이지 로드 (비동기식)
"fetch API"가 있는 비동기/대기를 사용하여 페이지를 비동기적으로 불러오고 "promise"를 사용하여 값을 홈,about,contact 변수에 분배했습니다.
//Declare the variables for home, about & contact html pages
let home = '';
let about = '';
let contact = '';
/**
*
* @param {String} page - Represents the page information that needs to be retrieved
* @returns {String} resHtml - The Page's HTML is returned from the async invocation
*/
const loadPage = async (page) => {
const response = await fetch(page);
const resHtml = await response.text();
return resHtml;
};
/**
* The Async function loads all HTML to the variables 'home', 'about' & 'contact'
*/
const loadAllPages = async () => {
home = await loadPage('home.html');
about = await loadPage('about.html');
contact = await loadPage('contact.html');
};
주요 기능 및 루트 요소
색인에서 rootDiv를 가져옵니다.html 문서.
주 함수는 페이지가 불러올 때 호출됩니다.주 함수 내부에서, 우리는 우선 모든 HTML 페이지가 변수'home','about','contact'에 불러오는 것을 확보한다.
페이지를 불러올 때'홈'을 루트 요소로 불러오는 것을 확인하기 위해서, rootDiv.innerHTML은 "home"변수로 설정됩니다.
또한 적절한 페이지 매핑을 사용하여 라우팅을 호출할 때 적절한 페이지를 로드하도록 라우팅을 설정합니다.
//Get the Element with the Id 'root'
const rootDiv = document.getElementById('root');
/**
* The Main Function is an async function that first loads All Page HTML to the variables
* Once the variables are loaded with the contents, then they are assigned to the 'routes' variable
*/
const main = async () => {
await loadAllPages();
rootDiv.innerHTML = home;
routes = {
'/': home,
'/contact': contact,
'/about': about,
};
};
// Invoke the Main function
main();
라우팅 - 홈 페이지에서 링크를 클릭할 때
상술한 지표에 근거하다.html, 우리는'onNavClick'방법을 호출하고'a'링크를 눌렀을 때'route'를 전달합니다. 아래의 코드 단락과 같습니다.
<li class="navbar-item">
<a href="#" onclick="onNavClick('/about'); return false;">About</a>
</li>
/**
*
* @param {String} pathname - Pass the 'pathname' passed from onClick function of the link (index.html)
* The function is invoked when any link is clicked in the html.
* The onClick event on the html invokes the onNavClick & passes the pathname as param
*/
const onNavClick = (pathname) => {
window.history.pushState({}, pathname, window.location.origin + pathname);
rootDiv.innerHTML = routes[pathname];
};
두 번째 줄'rootDiv'.innerHTML=routes[pathname]'은 주 기능의 루트에 설정된 내용에 따라 해당하는 페이지를 표시합니다(위 참조).
링크를 클릭하면 해당 페이지로 이동하여 URL 브라우저에서 업데이트되는 기능 라우터가 있습니다.
브라우저의'후퇴'또는'전진'단추를 누르면 링크가 URL에 올바르게 업데이트되지만 페이지의 내용은 새로 고침되지 않는다는 것을 알 수 있습니다.
우리 본문의 마지막 절에서 이 문제를 처리합시다.
상태 변경 시 페이지 표시 처리
상술한 "onpopstate-event"방법의 정의를 되돌아보면 브라우저의 활동 역사가 바뀌면 이 방법을 호출합니다.
우리는 이 갈고리를 사용하여 루트 Div가 설정된 루트에 따라 적당한 페이지를 채울 수 있도록 확보합니다.
이렇게!!이제 모든 기능을 갖춘 사용자 정의 공유기를 가져야 합니다. 이 공유기는 Vanilla JavaScript를 사용하여 만들어졌습니다.
/**
* The Function is invoked when the window.history changes
*/
window.onpopstate = () => {
rootDiv.innerHTML = routes[window.location.pathname];
};
결론
한 마디로 하면 VanillaJS를 사용하여 기본적인 사용자 정의 공유기를 구축하는 방법을 소개했습니다.공유기는 주로 창의 역사와 위치 대상과pushState와onpopstate 이벤트 방법을 사용합니다.
네가 이 문장을 좋아하길 바란다.반드시 나에게 너의 피드백과 평론을 알려줘야 한다.
다음 사항에 대해서도 관심이 있을 수 있습니다.
Reference
이 문제에 관하여(VanillaJS를 사용하여 사용자 정의 SPA 라우터 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/skaytech/build-a-custom-spa-router-using-vanillajs-4a9l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
