집 > 기사 > 웹 프론트엔드 > JS 해시를 활용한 단일 페이지 웹 애플리케이션 제작 사례 공유

JS 해시를 활용한 단일 페이지 웹 애플리케이션 제작 사례 공유

小云云원래의: 2018-01-26 10:54:351431검색

이 글에서는 먼저 해시가 무엇인지, 어떤 역할을 하는지, 단일 페이지 웹 애플리케이션이 무엇인지 설명하겠습니다. 나중에 JS 해시를 사용하여 단일 페이지 웹 애플리케이션을 만드는 예를 소개하겠습니다. 그것은 모두에게 도움이 될 수 있습니다.

1. 해시란 무엇입니까

여기서 설명할 해시(해시라고도 함)는 JS의 위치 개체에 대한 해시 속성을 나타내며 그 뒤에는 URL이 표시됩니다. 일반적으로 location.hash를 통해 해시 값을 얻거나 해시 값을 설정할 수 있습니다. 물론, a 태그의 href 속성을 설정하여 해시 값을 설정할 수도 있습니다. 사용자가 a 태그를 클릭하면 페이지의 해시 값이 변경될 수 있습니다.

예:

/** JS方式 **/
location.hash = 'hash'; //设置hash，该代码执行后URL后面增加“#hash”字符串
console.log(location.hash); //获取hash

/** HTML方式 **/
<a href="#hash" rel="external nofollow" >点击改变hash</a> <!-- 点击后URL后面增加“#hash”字符串 -->

해시를 어떻게 변경하더라도 페이지가 새로 고쳐지지 않는다는 점에 유의할 가치가 있습니다.

2. 해시의 용도

1. 앵커 링크 설정

앵커 링크를 설정하면(즉, 위의 HTML 방식) 링크 클릭 후 페이지가 요소 ID에 따라 지정된 위치로 슬라이드됩니다. , 페이지 점프 후에도 마찬가지입니다.

2. 단일 페이지 애플리케이션 제작 실현

해시 값 변경에 따라 해당 요소를 표시하거나 숨길 수 있으므로 페이지 새로 고침 없이 단일 페이지 전환이 가능합니다.

3. 단일 페이지 웹 애플리케이션이란 무엇입니까?

단일 페이지 웹 애플리케이션(SPA)은 단일 HTML 페이지만 로드하고 사용자가 페이지와 상호 작용할 때 이를 동적으로 업데이트합니다. 웹 애플리케이션.

위는 SPA(Single Page Application)에 대한 Baidu Encyclopedia의 설명이며, 해시를 사용하면 페이지 간 전환이 매우 편리해집니다.

4. 해시를 사용하여 SPA를 만드는 방법

간단히 말하면 첫 페이지만 표시되고, 해시 값을 변경하여 다른 페이지가 표시되도록 전환되고, 이전 페이지는 숨겨집니다.
여기서 간단한 데모를 작성하세요:

1. 먼저 HTML 구조를 작성하세요

<article class="container">
 <section id="page1" class="page cur">第一页</section>
 <section id="page2" class="page">第二页</section>
 <section id="page3" class="page">第三页</section>
</article>
<nav id="nav" class="bottom-nav">
 <ul>
  <li>第一页</li>
  <li>第二页</li>
  <li>第三页</li>
 </ul>
</nav>

2. 그런 다음 CSS 스타일을 설정하세요

.page{ display: none; /* 其他样式省略 */}
.page.cur{ display: block;}
/* 其他样式省略 */

3. 단일 페이지 전환을 달성하기 위해 자바스크립트를 작성하세요

window.onload = function () {
 var nav = document.getElementById('nav');
 var navLi = nav.getElementsByTagName('li');
 for(var i = 0,len = navLi.length; i < len; i++){
  (function (i) { 
   navLi[i].onclick = function () { //点击nav中的li，改变hash值
    location.hash = 'page' + (i+1);
   }
  })(i);
 }
 location.hash = 'page1'; //每次页面重新加载时都回到page1
 window.onhashchange = function (e) { 
  //当hash变化时，执行hashchange事件，该事件具有oldURL和newURL两个事件属性，分别代表前一个URL和目前的URL
  var oldHash = e.oldURL.split('#')[1]; //取得前一个hash
  var newHash = e.newURL.split('#')[1]; //取得当前hash
  var oldPage = document.getElementById(oldHash);
  var newPage = document.getElementById(newHash);
  oldPage.classList.remove('cur'); //隐藏前一个page
  newPage.classList.add('cur');  //显示当前page
 };
}

여기에 몇 가지가 있습니다. IE는 oldURL 및 newURL 두 가지 속성과 호환되지 않으므로 이 방법에는 특정 제한 사항이 있습니다. 물론 더 좋은 방법은 처음에 해시 값을 oldHash로 변수에 저장하는 것입니다. 구체적인 방법은 다음과 같습니다.

/**** 前面代码省略 ****/
location.hash = 'page1';
var oldHash = location.hash;
window.onhashchange = function (e) {
 var newHash = location.hash;
 var oldPage = document.querySelector(oldHash);
 var newPage = document.querySelector(newHash);
 oldPage.classList.remove('cur');
 newPage.classList.add('cur');
 oldHash = newHash;
};

여기서 또 한 가지 주목할 점은 classList가 IE9 이하 브라우저와 호환되지 않는다는 것입니다. 전달하는 것이 가장 좋습니다. 동일한 효과를 얻기 위해 className 속성을 처리하는 방법은 여기에서 자세히 설명하지 않습니다.

JS 해시를 활용한 단일 페이지 웹 애플리케이션 제작 사례 공유

관련 기사