實戰經驗：快速構建H5單頁面切換骨架
來自： http://www.cnblogs.com/onepixel/p/5156442.html
在Web App和Hybrid App橫行的時代，為了擁有更好的用戶體驗，單頁面應用順勢而生，單頁面應用簡稱`SPA`，即Single Page Application，就是只有一個HTML頁面的應用程序，應用中所有的視圖都包含在這個HTML頁面中，并通過JavaScript控制相關視圖的顯示和隱藏，這種模式可以讓用戶在Web App感受Native App的速度和流暢。本篇文章的目的就是教你如何來快速的構建一個H5單頁面切換骨架。
一、 頁面設計
在構建SPA應用時，首先要確定你的應用需要包含哪些視圖，在這里，為了能夠說明問題，我們只需要構建三個視圖，即 首頁、列表頁面和列表詳情頁面。 這三個頁面的邏輯關系是：
（1）程序啟動，默認進入首頁
（2）點擊首頁的按鈕切換到列表頁面
（3）點擊列表頁面的按鈕切換到列表詳情頁面
（4）點擊返回按鈕或物理返回鍵能夠回到上一頁。
首先我們來看一下核心的HTML代碼：
<body>
<div class="pageview" style="background: #3b76c0" id="-main-view">
<h3>首頁</h3>
<div title="-list-view" class="right-arrow"></div>
</div>
<div class="pageview" style="background: #58c03b;display: none" id="-list-view">
<h3>列表頁面</h3>
<div class="left-arrow"></div>
<div title="-detail-view" class="right-arrow"></div>
</div>
<div class="pageview" style="background: #c03b25;display: none" id="-detail-view">
<h3>列表詳情頁面</h3>
<div class="left-arrow"></div>
</div>
</body>
class=`pageview`的div容器所包含的就是一個獨立的視圖頁面，在body中共有3個這樣的div，需要注意的是，第2、3個div都設置了style=`display:none`,唯獨第1個視圖沒有設置，這樣做的目的就是讓程序啟動時默認顯示首頁。
在這段代碼中，用一個通用的CSS類來描述每一個視圖的樣式以及切換效果，這個類就是`pageview`, 我們先看看pageview是如何定義的：
.pageview{
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transition: 0.4s ease-out -webkit-transform;
}
在這里，視圖頁面需要設置成絕對定位，并且和父容器等寬等高，這樣視圖才能夠平滑的進行切換，另外還需要設置頁面切換的過渡效果，我們使用CSS3的transition屬性, 具體的參數就不在這里做過多的講解了，大家應該都明白的。這個樣式類所產生的效果是：當改變-webkit-transform的值時，頁面會以樣式中定義的過渡效果進行平移，持續時間是0.4s. 到此為止，主要的頁面設計已經完成了。
二、邏輯控制
要實現頁面切換，就要控制兩個頁面同時平移，即當前頁面不斷的離開屏幕，新的頁面不斷的進入屏幕。為了方便描述，我們把原來的頁面叫做`currentView`，把新的頁面叫做`applyView`,即申請進入的視圖。如果用transform來描述的話，currentView 需要從原來的0% 平移到-100%，即頁面向左平移了一個頁面寬度的距離，與此同時，appyView需要從原來的100% 平移到0%，剛好占領currentView原來的位置，當然在平移之前，我們需要設置好currentView和applyView的初始位置，分別需要設置成0%和100%。
//頁面向左平移 var currentViewStart = "translateX(0%)", //currentView初始位置 applyViewStart = "translateX(100%)", //applyView初始位置 currentViewEnd = "translateX(-100%)",//currentView的最終位置 applyViewEnd = "translateX(0%)"; //applyView最終位置//頁面向右平移 if (direction == "right") { currentViewStart = "translateX(0%)"; applyViewStart = "translateX(-100%)"; currentViewEnd = "translateX(100%)"; applyViewEnd = "translateX(0%)" }</pre>
我們知道，通過JS操作就需要獲取頁面的DOM對象，為了減少DOM的查詢，在頁面加載時，我們將所有需要用到的頁面對象一次性查詢出來，并以鍵值對的形式存儲到Map對象中，當需要使用時，只需要根據key來獲取即可。
//初始化執行 initViewPool:function(){ var views = document.querySelectorAll(".pageview"); //通過call使用數組的forEach來遍歷NodeList Array.prototype.forEach.call(views,function(item){ //viewPool是一個全局對象 viewPool[item.id] = item; //將DOM的id作為鍵 }); },下面我們將通過JS來控制頁面的切換效果：
//獲取當前頁面的DOM對象 var currentView = viewPool[currentViewId]; //獲取新頁面的DOM對象 var applyView = viewPool[pageId];//設置新頁面的初始位置 applyView.style.webkitTransform = applyViewStart; //設置當前頁面的初始位置 currentView.style.webkitTransform = currentViewStart;
//設置新頁面顯示 applyView.style.display = "";
var t1 = setTimeout(function(){ //當設置最終位置時，頁面就會以過渡效果平移到最終位置 applyView.style.webkitTransform = applyViewEnd; currentView.style.webkitTransform = currentViewEnd; },200);
var t2 = setTimeout(function(){
//400ms后，頁面平移結束，設置currentView為隱藏 currentView.style.display = "none"; //將新頁面設置為當前頁面 currentViewId = pageId;
if (direction === 'left'){ window.location.hash = currentViewId.substring(1); }
window.clearTimeout(t1); window.clearTimeout(t2); },600);</pre>
在這里有一個重要的操作就是：一定要將設置最終位置的操作放到定時器中，即t1, 這是因為當頁面被設置了初始位置后，需要一定的時間來`渲染`這個樣式，第2個定時器是為了等待動畫執行完畢后進行相關的操作，比如設置當前頁面,設置hash,清除定時器等。當這段代碼被執行時，頁面就會以設定的效果進行平滑的移動，最終，當前頁面被隱藏，新頁面被設置為當前頁面顯示到屏幕中央，這樣就完成了一次單頁面切換效果。
三、支持物理鍵返回
既然是單頁面切換，就不得不提另外一個問題，那就是物理返回鍵操作。其實，單頁面切換只是頁面的顯示和隱藏操作，僅此而已，并不是真正意義上的hash跳轉，而物理鍵返回實際上是監聽瀏覽器的hash變化，因此為了讓單頁面能夠支持物理鍵返回操作，我們需要模擬瀏覽器的hash變化，即當一個新頁面進入時，給當前地址加上一個#hash 的標識，當點擊物理返回鍵的時候，這個hash值會發生變化(回退到上一個hash)，與此同時也會觸發一個hashchange事件，當監聽到hash變化時，我們就通過JS切換上一個hash對應的頁面，這樣就實現了物理返回鍵的效果。
if (direction === 'left'){ //當進入到新頁面時，設置當前hash的值為當前頁面的id window.location.hash = currentViewId.substring(1); }監聽hash變化的處理：
var that = this; window.addEventListener("hashchange", function () {//當點擊返回鍵時，hash會回退到上一頁的hash值 //獲取上一頁的hash值，并轉化為對應view的id var id = window.location.hash.replace("#", "-");
// 判斷當前頁面不是首頁， // 并且觸發的瀏覽器的
back操作，即點擊返回鍵，因為頁面前進的時候也會發生hash變化 if (currentViewId != "-main-view" && id != currentViewId) { id = id || "-main-view"; //如果上一頁是首頁，則hash為空，這時需要補上對應的id //調用forward方法從當前頁面切換到上一頁 that.forward(id, "right"); } }, false);</pre>以上便是單頁面切換的基本思路，對應的完整示例代碼已上傳至github: https://github.com/git-onepixel/h5spa ,你可以下載完整代碼進行調試和學習，如果需要查看效果演示，請點擊或使用微信掃一掃下面的二維碼進行訪問：
示例僅供參考和學習，不得以其他目的進行拷貝和使用！
by @一像素 博客園 2016.01
</div>