Ausführliche Erklärung, wie Sie mit JS-Hash eine Single-Page-Webanwendung erstellen

Dieser Artikel stellt hauptsächlich die Methode zur Verwendung von JS-Hash zum Erstellen einer Single-Page-Webanwendung vor. Jetzt kann ich ihn mit Ihnen teilen.

Vorwort

Dieser Artikel stellt Ihnen hauptsächlich den relevanten Inhalt zur Verwendung von JS-Hash zum Erstellen von Single-Page-Webanwendungen vor. Er wird zu Ihrer Referenz und zum Lernen geteilt Im Folgenden kann ich nicht viel mehr sagen, lasst uns zusammenkommen. Werfen wir einen Blick auf die ausführliche Einführung.

1. Was ist Hash?

Der Hash, von dem wir hier sprechen (auch Hash genannt), bezieht sich auf den Hash des Standortobjekts in JS-Eigenschaft, die null oder mehr Zeichen gefolgt von # in der URL zurückgibt. 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 lohnt sich Beachten Sie, dass die Seite nicht aktualisiert wird, egal wie der Hash-Wert geändert wird.

2. Was ist der Nutzen von Hash

1. Ankerlink setzen

Von Durch das Festlegen von Ankerlinks (d. h. der oben genannten HTML-Methode) kann die Seite nach dem Klicken auf den Link an die angegebene Position entsprechend der Element-ID verschoben werden, auch nachdem die Seite gesprungen ist.

2. Realisieren Sie die Produktion von Einzelseitenanwendungen

Die entsprechenden Elemente können entsprechend der Änderung des Hashwerts angezeigt oder ausgeblendet werden, wodurch eine Einzelseitenumschaltung realisiert wird ohne Seitenaktualisierung.

3. Was ist eine Single-Page-Webanwendung?

Eine Single-Page-Webanwendung (SPA) bedeutet, dass es nur ein Web A gibt Bei der Seitenanwendung handelt es sich um eine Webanwendung, die eine einzelne HTML-Seite lädt und diese Seite dynamisch aktualisiert, wenn der Benutzer mit der Anwendung interagiert.

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 erstellen Sie einen SPA mit Hash

Um es einfach auszudrücken: Zeigen Sie nur die erste Seite an und ändern Sie dann den Hash Wert wechseln, um verschiedene Seiten anzuzeigen und die vorherige Seite auszublenden.
Schreiben Sie hier eine einfache Demo:

1. Schreiben Sie zuerst die HTML-Struktur

<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. Legen Sie dann den CSS-Stil dafür fest

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

3. Schreiben Sie Javascript, um eine Einzelseitenumschaltung zu erreichen

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

Hier gibt es einige Dinge zu beachten. IE ist nicht mit den beiden Attributen oldURL und newURL kompatibel, daher weist diese Methode gewisse Einschränkungen auf. 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:

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

Es gibt noch etwas anderes Beachten Sie hier, dass classList nicht mit IE9 und niedrigeren Browsern kompatibel ist. Den gleichen Effekt erzielen Sie am besten durch die Verarbeitung des className-Attributs, auf das hier nicht näher eingegangen wird.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie Sie mit JS-Hash eine Single-Page-Webanwendung erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!