这篇文章主要介绍了关于利用js hash制作单页web应用的方法详解，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
前言
本文主要给大家介绍了关于利用js hash制作单页web应用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
一、何为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" rel="external nofollow" >点击改变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属性的方式来实现相同的效果，此处便不再详述。
以上就是利用js hash制作单页web应用的方法详解的详细内容。