單頁 Web 應用 (single-page application 簡稱為 SPA) 是一種特殊的 Web 應用。它將所有的活動局限於一個Web頁面中，僅在該Web頁面初始化時加載相應的HTML、JavaScript 和 CSS。一旦頁面加載完成了，SPA不會因為用戶的操作而進行頁面的重新加載或跳轉。而是利用 JavaScript 動態的變換HTML的內（采用的是div切換顯示和隱藏），從而實現UI與用戶的交互。由於避免了頁面的重新加載，SPA 可以提供較為流暢的用戶體驗。得益於ajax，我們可以實現無跳轉刷新，又多虧了瀏覽器的histroy機制，我們用hash的變化從而可以實現推動界面變化。
angularJS,是目前中最流行的mvvm框架，非常適合做SPA；與之類似的還有vueJS，backbone，extjs等。
hash值
即url中#號后面的部分。
<a href="target">go target</a>
......
<div id="target">i am target place</div>
驅動div顯示隱藏的方式有很多種，比較好的選擇為以下兩種：
1.監聽地址欄中hash變化驅動界面變化
2.用pushsate記錄瀏覽器的歷史，驅動界面發送變化
首先，我們畫出三個div，它們實際上是作為三個界面存在界面上的，body作為界面外框容器，限制着它們的大小。為了給每個界面配對一個hash地址，我們給每個div配一個id，將hash地址與對應的選擇器（id、class）建立鏈接關系，從而可以從hash變化值中操作界面。
window.onhashchange = function(){ //監聽hash值變化，實現頁面變換
var hash=window.location.hash;
changePage(hash);
}
function changePage(hash){
switch (hash)
{
case '#index':
url='partials/list.html';
break;
case '#newpage':
url='partials/newpage.html';
break;
case '#edit':
url='partials/edit.html';
break;
case '#view':
url='partials/view.html';
break;
}
$.ajax({ //根據hash值選擇頁面
type:'GET',
url:url,
//async:false,
success:function(data){
main.innerHTML=data;
}
});
}