使用hash制作单页Web应用

2022-11-27 08:04:34

一、何为hash

这里要讲的hash（也叫哈希），指的是JS中location对象的hash属性，它返回的是URL中#后所跟的零个或多个字符。通常，我们可以通过location.hash的方式获取哈希值或设置哈希值。当然，我们也可以通过设置a标签的href属性来设置哈希值，当用户点击该a标签时即可改变页面的哈希值。例如：

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

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

值得注意的是，无论以何种方式改变哈希值，页面都不会刷新。

二、hash有何用处

1. 设置锚链接

通过设置锚链接（即为上述HTML方式），可使点击链接后页面根据元素id滑动到指定位置，即使页面跳转后也不例外。

2. 实现单页应用的制作

可以根据哈希值的变化来使相应元素显示或者隐藏，从而实现页面无刷新的单页切换。

三、何为单页Web应用

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

以上是百度百科对单页应用（SPA）的解释，而使用hash可以非常方便的实现“页面”间的切换。

四、如何使用hash制作SPA

简单来说，就是先只显示第一个page，然后通过改变hash值来切换显示不同的page，前一个page隐藏。
这里写个简单的Demo演示一下吧：

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这两个属性，所以该方法有一定的局限性。当然，更好的方法是，一开始将hash值用变量存起来作为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属性的方式来实现相同的效果，此处便不再详述。
当然，hash的作用或许远不止这些，以后如有遇到再同大家一起分享。

本文为原创文章，转载请注明出处，谢谢！

码农公寓