单页面实现之hash
至学了angularJs后，发现这个单页面应用不知道在没有angularJs的情况下怎么实现。
所以就此对这个思考与资料并行，终于知道这个的实现基本原理。
首先angularJs的实现是hash值的变化，就是url#后的内容，但angularJs是对其进行了处理的，所以
观察不到#这个值，然后是每次点击导航都会转换页面，angularJs是在一个类名是ng-view的div容器中实现的。
所以angularJs是删除类名为ng-view里的内容后添加内容，那我们是不是可以简单的，显示和隐藏内容呢？
所以就是动手实现。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hash深入</title> <style> html,body{ width: 100%; height: 100%; } *{ margin: 0; padding: 0; } ul{ overflow: hidden; list-style: none; } ul li{ float: left; margin-left: 10px; } .div{ display: none; width: 100%; height: 100%; } .div1{ background: red; } .div2{ background: blue; } .div3{ background: pink; } .div4{ background: skyblue; } </style> </head> <body> <!-- 需要自定义属性来实现关联 --> <ul> <li><a href="javascript:;" data-hash="one">首页</a></li> <li><a href="javascript:;" data-hash="two">页面一</a></li> <li><a href="javascript:;" data-hash="three">页面二</a></li> <li><a href="javascript:;" data-hash="four">页面三</a></li> </ul> <div class="div1 div" data-hash="one">首页</div> <div class="div2 div" data-hash="two">页面二</div> <div class="div3 div" data-hash="three">页面三</div> <div class="div4 div" data-hash="four">页面四</div> <script> var aNav=document.querySelectorAll("ul li a"); var aPage=document.querySelectorAll(".div"); for(var i=0;i<aNav.length;i++){ aNav[i].onclick=function(){ // dataset获取自定义属性 hash=this.dataset.hash; for(var i=0;i<aPage.length;i++){ if(hash==aPage[i].dataset.hash){ // 显示匹配的页面 aPage[i].style.display="block"; // 改变url路径的hash window.location.hash=hash; }else{ // 隐藏其他页面 aPage[i].style.display="none"; } } } } // 因刷新等有hash但不能显示目标页面而实现目标的显示 refresh(); function refresh(){ var currentHash=window.location.hash.substr(1) || "one"; for(var i=0;i<aPage.length;i++){ if(currentHash==aPage[i].dataset.hash){ aPage[i].style.display="block"; window.location.hash=currentHash; }else{ aPage[i].style.display="none"; } } } // 监听hash的变化，触发事件 window.onhashchange=function(){ // refresh() window.location.reload(); } </script> </body> </html>
