JS 해시를 사용하여 단일 페이지 웹 애플리케이션을 만드는 방법에 대한 자세한 설명

이 글은 JS 해시를 사용하여 단일 페이지 웹 애플리케이션을 만드는 방법에 대한 자세한 설명을 주로 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유합니다.

이 글은 주로 모든 사람을 위한 것입니다. JS 해시를 사용하여 단일 페이지 웹 애플리케이션을 만드는 방법에 대한 관련 콘텐츠를 소개하고 모든 사람의 참고 및 학습을 위해 공유했습니다. 아래에서는 자세히 설명하지 않겠습니다. 자세한 소개.

1. 해시란 무엇입니까

여기서 이야기할 해시(해시라고도 함)는 JS의 위치 개체의 해시 속성을 나타내며 URL에서 #이 뒤에 오는 0 또는 0을 반환합니다. . 여러 문자. 일반적으로 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. hash의 용도

1. 앵커 링크 설정

앵커 링크(즉, 위의 HTML 방식)를 설정하면 페이지가 지정된 위치로 슬라이드됩니다. 페이지 이동도 예외는 아닙니다.

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 = &#39;page&#39; + (i+1);
   }
  })(i);
 }
 location.hash = &#39;page1&#39;; //每次页面重新加载时都回到page1
 window.onhashchange = function (e) { 
  //当hash变化时，执行hashchange事件，该事件具有oldURL和newURL两个事件属性，分别代表前一个URL和目前的URL
  var oldHash = e.oldURL.split(&#39;#&#39;)[1]; //取得前一个hash
  var newHash = e.newURL.split(&#39;#&#39;)[1]; //取得当前hash
  var oldPage = document.getElementById(oldHash);
  var newPage = document.getElementById(newHash);
  oldPage.classList.remove(&#39;cur&#39;); //隐藏前一个page
  newPage.classList.add(&#39;cur&#39;);  //显示当前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 해시를 사용하여 단일 페이지 웹 애플리케이션을 만드는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!