Teilen Sie Beispiele für die Erstellung von Single-Page-Webanwendungen mit JS-Hash

In diesem Artikel erklären wir zunächst, was Hash ist, welche Rolle er spielt und was eine Single-Page-Webanwendung ist. Später stellen wir ein Beispiel für die Erstellung einer Single-Page-Webanwendung mit JS-Hash vor Ich hoffe, es kann allen helfen.

1. Was ist Hash?

Der Hash (auch Hash genannt), über den wir hier sprechen, bezieht sich auf das Hash-Attribut des Standortobjekts in JS, das das # im zurückgibt URL, gefolgt von null oder mehr Zeichen. Normalerweise können wir den Hash-Wert abrufen oder den Hash-Wert über location.hash festlegen. Natürlich können wir den Hash-Wert auch festlegen, indem wir das href-Attribut des a-Tags festlegen. Wenn der Benutzer auf das a-Tag klickt, kann der Hash-Wert der Seite geändert werden.

Zum Beispiel:

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

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

Es ist zu beachten, dass die Seite nicht aktualisiert wird, egal wie Sie den Hash-Wert ändern.

2. Was ist die Verwendung von Hash? auf der Element-ID, nachdem Sie auf den Link geklickt haben. Streichen Sie zur angegebenen Position, auch nachdem die Seite gesprungen ist.

2. Implementieren Sie die Produktion von Einzelseitenanwendungen

Die entsprechenden Elemente können je nach Änderung der Hashwerte angezeigt oder ausgeblendet werden, wodurch eine Einzelseitenumschaltung ohne Seitenaktualisierung erreicht wird.

3. Was ist eine Single-Page-Webanwendung?

Eine Single-Page-Webanwendung (SPA) ist eine Anwendung mit nur einer Webseite Benutzer Eine Webanwendung, die die Seite dynamisch aktualisiert, wenn Sie mit der Anwendung interagieren.

Das Obige ist die Erklärung der Baidu Encyclopedia zur Single Page Application (SPA), und die Verwendung von Hash kann das Wechseln zwischen „Seiten“ sehr bequem machen.

4. So verwenden Sie Hash, um ein SPA zu erstellen

Um es einfach auszudrücken: Zeigen Sie nur die erste Seite an und wechseln Sie dann zur Anzeige verschiedener Seiten, indem Sie den Hash-Wert und die vorherige Seite ändern ist versteckt.

Schreiben Sie hier eine einfache Demo:

1. Schreiben Sie zuerst die HTML-Struktur

2. Legen Sie dann den CSS-Stil dafür fest

<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>

3 . Schreiben Sie Javascript, um die Einzelseitenumschaltung zu implementieren. Hier sind einige Dinge zu beachten. IE ist nicht mit den beiden Attributen oldURL und newURL kompatibel. Eine bessere Möglichkeit besteht natürlich darin, den Hash-Wert zunächst in einer Variablen als oldHash zu speichern. Die spezifische Methode lautet wie folgt:

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

Hier ist noch etwas zu beachten: classList ist in IE9 Inkompatibel mit und unter Browsern ist es am besten, den gleichen Effekt durch die Verarbeitung des className-Attributs zu erzielen, das hier nicht im Detail beschrieben wird.

Verwandte Empfehlungen:

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
 };
}

/**** 前面代码省略 ****/
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;
};

Kapitel für Fortgeschrittene für Programmierer – Das Temperament der Hash-Tabelle

Beispielcode für die PHP-Hash-Verschlüsselungsfunktion

Der Unterschied zwischen Btree- und Hash-Indizes in MySQL

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Erstellung von Single-Page-Webanwendungen mit JS-Hash. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!