Single Page Application

single page web application，SPA，就是隻有一張Web頁面的應用，是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。

 

單頁 Web應用（single page web application，SPA），就是隻有一張Web頁面的應用。單頁應用程序 (SPA) 是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。 ^[1]    瀏覽器一開始會加載必需的HTML、CSS和JavaScript，全部的操做都在這張頁面上完成，都由JavaScript來控制。所以，對單頁應用來講模塊化的開發和設計顯得至關重要。

特色

編輯

速度：更好的用戶體驗，讓用戶在web app感覺native app的速度和流暢，

·MVC：經典MVC開發模式，先後端各負其責。

·ajax：重前端，業務邏輯所有在本地操做，數據都須要經過AJAX同步、提交。

·路由：在URL中採用#號來做爲當前視圖的地址,改變#號後的參數，頁面並不會重載。

單頁Web應用（single page web application，SPA）是當今網站開發技術的弄潮兒，不少傳統網站都在或者已經轉型爲單頁Web應用，新的單頁Web應用網站（包括移動平臺上的）也如雨後春筍般涌如今人們的面前，如Gmail、Evernote、Trello等。若是你是一名Web開發人員，卻還沒開發過或者甚至是沒有據說過單頁應用，那你已經Out好久了。

單頁Web應用和前端工程師們息息相關，由於主要的變革發生在瀏覽器端，用到的技術其實仍是HTML+CSS+JavaScript，全部的瀏覽器都原生支持，固然有的瀏覽器由於具有一些高級特性，從而使得單頁Web應用的用戶體驗更上一層樓。關於單頁應用的優勢和缺點，網上講解的文章有不少，這裏就不展開論述了。 單頁Web應用，顧名思義，就是隻有一張Web頁面的應用。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，以後全部的操做都在這張頁面上完成，這一切都由JavaScript來控制。所以，單頁Web應用會包含大量的JavaScript代碼，複雜度可想而知，模塊化開發和設計的重要性不言而喻。 ^[2]  

單頁web應用開發流程

編輯

• 用循環的視角審視Web應用開發
• 框定一個一致的SPA圖形用戶界面（GUI）和模型
• 將SPA的原則帶回服務器端
• 彙集於對合適的應用進行早期SPA開發 ^[3]  

SPA協調的起點是認識到SPA與腳本和網頁編程有關，而不是與後端應用有關。SPA的主要目標是圍繞着Web 2.0頁面時間交互原則重構Web應用，以便體驗可容易地轉化到多個設備中，並對用戶有效。這意味着首先要抱着支持這樣一個邏輯活動爲目標來設計用戶交互，該活動應該涉及單頁面與一套腳本，實現一次加載並執行直到活動完成。

一旦用戶交互設計完成，下一步就是框定一個本地狀態或事件模型，該模型應能描述頁面處理與用戶的交互及與任何後端應用交互。儘管這並不是不可能，可是開發與服務器端功能多組件交互的SPA會更加困難。

這會產生一種要對應用服務器進行重構的誘因，其目的是爲了以1:1的比例來支持SPA。就最大程度上而言，該模型應該讓本身的變量及命名空間本地化，並經過應用的服務器端與其餘SPA交互。這是爲了減小對於用本地SPA控制器或模型來在多個SPA之間保留狀態的需求。 ^[3]

 

注意幾個網站的相同點，那就是在瀏覽器中，作了原先「應當」在客戶端作的事情。它們的界面切換很是流暢，響應很迅速，跟傳統的網頁明顯不同，它們是什麼呢？這就是單頁Web應用。

所謂單頁應用，指的是在一個頁面上集成多種功能，甚至整個系統就只有一個頁面，全部的業務功能都是它的子模塊，經過特定的方式掛接到主界面上。它是AJAX技術的進一步昇華，把AJAX的無刷新機制發揮到極致，所以能造就與桌面程序媲美的流暢用戶體驗。

 

並非全部的項目都適合spa

1. 你的應用須要被搜索引擎索引嗎？ 據我所知，目前全部的搜索引擎仍是比較討厭JavaScript的，也就是說你頁面裏面用ajax更新的動態內容搜索引擎是不能訪問到的。因此若是你的網站須要依靠搜索引擎進行推廣，仍是傳統一點比較好。

2. 你的應用須要瀏覽器的後退按鈕嗎？幾乎全部的瀏覽器用戶天天都在頻繁的使用瀏覽器的後退按鈕來查看本身剛剛瀏覽過的內容，可是若是你使用了AJAX進行局部刷新，瀏覽過的內容就不能用後退按鈕重現了。目前我所知道的只有GWT使用了iframe的方法實現了後退按鈕的功能：

    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' ></iframe>，不過沒有研究它的具體解決方法。

　　衆所周知，Ajax能夠實現頁面的無刷新操做——優勢；可是，也會形成另外的問題，沒法前進與後退！曾幾什麼時候，Gmail彷佛藉助iframe搞定，現在，HTML5讓事情變得如同過家家般簡單。

當執行Ajax操做的時候，往瀏覽器history中塞入一個地址（使用pushState）（這是無刷新的）；因而，返回的時候，經過URL或其餘傳參，咱們就能夠還原到Ajax以前的模樣。

本demo所展現的就是ajax的內容載入與地址欄的前進與後退，典型應用，對於熟悉相關知識點頗有幫助。

http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

3. 你的應用想要用戶收藏某個頁面嗎？AJAX單頁應用的特色就是地址欄的url跟瀏覽器顯示內容不是一一對應的關係，因此用戶收藏的頁面從新打開的時候顯示的內容跟收藏時的內容多是不同的。

4. 你的應用頁面很複雜嗎？須要用ajax進行復雜頁面的更新嗎？ ajax是使用xml, text等文本與服務端進行交互的，大量的傳輸不但影響系統的性能，對系統安全是也很大的威脅。

 

 

http://www.cnblogs.com/ppforever/p/5126640.html

http://www.cnblogs.com/ppforever/p/5126640.html

http://blog.csdn.net/jinhuiyu/article/details/4738719