ホームページ > 記事 > ウェブフロントエンド > JSハッシュを使用したシングルページWebアプリケーションの作成例の共有

JSハッシュを使用したシングルページWebアプリケーションの作成例の共有

小云云オリジナル: 2018-01-26 10:54:351431ブラウズ

この記事では、まずハッシュとは何か、その役割、そしてシングルページ Web アプリケーションとは何かについて説明し、その後、JS ハッシュを使用してシングルページ Web アプリケーションを作成する例を紹介したいと思います。それはすべての人を助けることができます。

1. ハッシュとは

ここで説明するハッシュ (ハッシュとも呼ばれます) は、URL の後に続く 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. ハッシュの使い方

1. アンカーリンクを設定する

アンカーリンク（つまり上記のHTMLメソッド）を設定することで、リンクをクリックした後に要素IDに応じてページを指定した位置にスライドさせることができます。、ページジャンプ後も例外です。

2. シングルページアプリケーションの制作を実現

ハッシュ値の変化に応じて対応する要素を表示・非表示にすることができ、ページ更新なしのシングルページ切り替えを実現します。

3. シングルページ Web アプリケーションとは何ですか?

シングルページ Web アプリケーション (SPA) は、単一の Web ページをロードし、ユーザーがそのページを操作すると動的に更新します。ウェブアプリケーション。

上記は百度百科事典によるシングルページアプリケーション(SPA)の説明ですが、ハッシュを使うと「ページ」の切り替えがとても便利になります。

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. 単一ページの切り替えを実現するための Javascript を書きます

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 の 2 つの属性と互換性がないため、この方法には一定の制限があることに注意してください。もちろん、より良い方法は、最初にハッシュ値を 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;
};

ここでもう 1 つ注意すべき点があります。つまり、classList は IE9 以前のブラウザと互換性がないということです。同じ効果を達成するために className 属性を処理する方法については、ここでは詳しく説明しません。

JSハッシュを使用したシングルページWebアプリケーションの作成例の共有

関連記事