Partager des exemples de création d'applications Web d'une seule page à l'aide du hachage JS

Dans cet article, nous expliquerons d'abord ce qu'est le hachage, quel rôle il joue et ce qu'est une application Web d'une seule page. Plus tard, nous présenterons un exemple de création d'une application Web d'une seule page à l'aide du hachage JS. j'espère que cela pourra aider tout le monde.

1. Qu'est-ce que le hachage

Le hachage (également appelé hachage) dont nous parlons ici fait référence à l'attribut hash de l'objet location dans JS, qui renvoie le # dans le URL suivie de zéro ou plusieurs caractères. Habituellement, nous pouvons obtenir la valeur de hachage ou définir la valeur de hachage via location.hash. Bien sûr, nous pouvons également définir la valeur de hachage en définissant l'attribut href de la balise a. Lorsque l'utilisateur clique sur la balise a, la valeur de hachage de la page peut être modifiée.

Par exemple :

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

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

Il convient de noter que quelle que soit la façon dont vous modifiez la valeur de hachage, la page ne sera pas actualisée.

2. À quoi sert le hachage

1. Définir un lien d'ancrage

En définissant un lien d'ancrage (c'est-à-dire la méthode HTML ci-dessus), la page peut être basée sur l'identifiant de l'élément après avoir cliqué sur le lien Glissez vers la position spécifiée, même après le saut de page.

2. Réaliser la production d'applications d'une seule page

Les éléments correspondants peuvent être affichés ou masqués en fonction du changement de valeur de hachage, réalisant ainsi une commutation d'une seule page sans actualisation de page.

3. Qu'est-ce qu'une application Web à page unique ?

Une application Web à page unique (SPA) est une application avec une seule page Web. Elle charge une seule page HTML et l'affiche sur le site. utilisateur Application Web qui met à jour dynamiquement la page lorsque vous interagissez avec l'application.

Ce qui précède est l'explication de l'application à page unique (SPA) donnée par l'Encyclopédie Baidu, et l'utilisation du hachage peut rendre très pratique le basculement entre les « pages ».

4. Comment utiliser le hachage pour créer un SPA

Pour faire simple, affichez uniquement la première page, puis passez à l'affichage de différentes pages en modifiant la valeur de hachage, et la page précédente est caché.
Écrivez une démo simple ici :

1. Écrivez d'abord la structure 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. Ensuite, définissez le style CSS pour celle-ci

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

3. .Écrivez du Javascript pour implémenter le changement de page unique

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

Il y a quelques points à noter ici IE n'est pas compatible avec les deux attributs oldURL et newURL, cette méthode a donc certaines limites. Bien sûr, une meilleure façon consiste à stocker initialement la valeur de hachage dans une variable sous le nom oldHash. La méthode spécifique est la suivante :

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

Il y a une autre chose à noter ici, c'est-à-dire que classList est dans IE9. et ci-dessous incompatibles, il est préférable d'obtenir le même effet en traitant l'attribut className, qui ne sera pas décrit en détail ici.

Recommandations associées :

Chapitre avancé du programmeur - Le tempérament de la table de hachage

exemple de code de la fonction de cryptage de hachage php

La différence entre les index btree et hash dans MySQL

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!