用戶:恆溫/單頁面應用 (1)
單頁應用程式 (SPA)是一種 網頁應用程式 或 網站 ，適合於單個 網頁， 目的是提供一個和桌面應用程式相似的用戶體驗。 在一個單頁面應用中，無論是所需要的代碼是HTML、 JavaScript還是CSS都在一次頁面加載中獲取，[1] 或者通常根據用戶動作動態加載有關的資源並按需要加入到網頁中。 儘管 位置的哈希 或 HTML5 歷史API 可用於在應用中提供獨立邏輯頁的感性和導航，網頁在這個過程中不會重新加載，也不控制跳轉到另一個網頁。[2] 和單頁面應用交互通常會涉及到和網絡伺服器動態通信。
歷史
[編輯]雖然早在2003年就被討論過了，但是單頁面應用的起源還是不太清楚. [3] Stuart (stunix) Morris於2002年4月寫了具有同樣的目標和功能的獨立網站slashdotslash.com。[4] 同年晚些時候Lucas Birdeau, Kevin Hakman, Michael Peachey和Evan Yeh在美國專利8,136,109中描述了單頁面應用的實現。 [3]
JavaScript可以用於在網絡瀏覽器中顯示用戶接口 (UI)，運行應用邏輯，以及和網絡伺服器進行通信。有成熟的開源庫可以用來建立一個SPA，這樣可以減少開發人員不得不編寫的JavaScript代碼量。
技術實現
[編輯]即使應用需要和伺服器進行通信，還是有各種技術可用於讓瀏覽器保持單頁面。
JavaScript框架
[編輯]諸如 AngularJS Ember.js, Meteor.js，ExtJS 和 React 這些網絡瀏覽器JavaScript框架都已經採納了SPA原則。
- AngularJS 是一個純粹的客戶端框架。 AngularJS的模板是基於雙向 UI數據綁定的。 數據綁定是一種讓模型變化時更新視圖，和在視圖變化時更新模型的自動實現的方式。 HTML模板在瀏覽器中被編譯。 編譯的階段創建純粹的HTML代碼，然後瀏覽把這段HTML代碼重新渲染到即時視圖中去。這個步驟在後面的頁面展現中重複進行。 在傳統的伺服器端HTML編程的中，如控制器和模型這樣的概念和伺服器進程進行交互來生成新的HMTL視圖。 在AngularJS框架中，控制器和模型狀態在客戶端瀏覽器中被維護。 因此，新網頁都能夠在不和伺服器交互的情況下產生。
- Ember.js 是一個基於模型-視圖-控制器（MVC)軟件架構模式的客戶端JavaScript網絡應用框架。 它把常用語言的優點和最佳實踐融入到一個提供豐富的對象模型，陳述式雙向數據綁定，計算屬性，由Handlebars.js提供支持自動更新的模板和管理應用狀態的路由等特性的框架中，讓開發者能夠創建可擴展的單頁應用。
- Meteor.js 是專為SPAs設計的全棧(客戶端-伺服器)JavaScript框架。 它的特點在於相對Angular，Ember或ReactJS,引用錯誤：
<ref>標籤中未填內容的參照必須填寫name屬性 有更簡單的數據綁定，使用 分佈式數據協議引用錯誤：<ref>標籤中未填內容的參照必須填寫name屬性 和發佈-訂閱模式 實時自動傳播數據變化到客戶端，同時還不需要開發人員來編寫任何同步代碼。 全棧反應堆確保所有層面，從數據庫到模板都能自動按需更新。 Ecosystem包，例如 伺服器端渲染引用錯誤：<ref>標籤中未填內容的參照必須填寫name屬性 處理了搜尋引擎優化的問題。 - Aurelia 是一個JavaScript客戶框架，用於流動裝置、桌面和網絡。 它是相似的人們的生活產生了重要，但是新的，更多符合標準，並使用了一種模塊辦法。 Aurelia是寫下一代 寫的。
Ajax
[編輯]最突出的技術目前正在使用的 Ajax的。引用錯誤：<ref>標籤中未填內容的參照必須填寫name屬性 主要使用的 程序/件的對象(deprecated)目從JavaScript其他阿賈克斯的方法包括使用框架或腳本HTML要素。 受歡迎的圖書館等 jQuery，其正常化，Ajax行為跨瀏覽器從不同的製造商，進一步推廣阿賈克斯的技術。
Web sockets
[編輯]WebSockets 是一個雙向狀態的實時客戶機-伺服器通信技術部分5的規範，優於阿賈克斯在性能方面的引用錯誤：<ref>標籤中未填內容的參照必須填寫name屬性 和簡單性。
伺服器推送事件
[編輯]伺服器發送事件 (小規模企業是由這類企業的種種)是一個技術伺服器，從而可以啟動數據傳輸的瀏覽器的客戶。 一旦最初的連接已經建立，一個事件流仍然開放，直至關閉。 小規模企業是由這類企業的種種發送了傳統的HTTP和具有多種功能，這web sockets缺乏設計的諸如自動重新連接、事件標識，以及能夠發送任意的事件。引用錯誤：<ref>標籤中未填內容的參照必須填寫name屬性
瀏覽器插件
[編輯]雖然這種方法已經過時，步調用伺服器也可以是取得使用瀏覽器插在技術，例如 Silverlight, 閃光，或 Java小的。
數據傳輸(XML，JSON和Ajax)
[編輯]請求到服務通常導致原始數據(例如， XML 或 JSON)，或者新 HTML 正在返回。 在該情況下HTML是返回的伺服器，JavaScript在客戶更新的一部分區域DOM(文件的對象模型).引用錯誤：<ref>標籤中未填內容的參照必須填寫name屬性 時，原始數據是返回的，往往是一個端-端JavaScript XML /(XSL)的處理(在這種情況下象一個 模板)用於翻譯的原始數據轉HTML，然後將使用更新的一部分區域DOM。
伺服器架構
[編輯]輕型伺服器架構
[編輯]一個SPA移動的邏輯，從服務的客戶。 這個結果中的作用的網絡伺服器不斷演變成一個純粹的數據API或網絡服務。 這個建築轉變，在某些圈子，已經創造了"薄伺服器架構"來突出這一複雜性已經從伺服器向客戶、與參數，這最終降低了整個系統的複雜性。
重型有狀態伺服器架構
[編輯]伺服器保存在必要狀態的存在的客戶國家的網頁。 在這種方式，當時的任何請求命的伺服器(通常用戶的行動)、伺服器發送的適當HTML和/或JavaScript的具體變化帶來的客戶的新希望的國家(常常增加或刪除/更新的一部分客戶DOM)。 在同一時間，國家在伺服器更新。 大多數的邏輯是執行在伺服器上，並HTML通常也呈現在伺服器上。 在某些方面，伺服器模擬網絡瀏覽器，收活動並執行三角洲的變化伺服器的國家都自動傳播客戶。
這種方法需要更多的伺服器的存儲器和伺服器的處理，但其優點是簡化的發展模式，因為a)應用程式通常是完全編碼的伺服器，並b)數據和用戶界面的國家在伺服器共用相同的存儲空間無需定製的客戶/伺服器的溝通橋樑。
重型無狀態伺服器架構
[編輯]這是一個變種狀態伺服器的方法。 客戶頁發送數據表示其目前狀態的伺服器，通常是通過阿賈克斯的請求。 使用這個數據、伺服器能夠重建客戶國家的一部分網頁需要加以修改和可以生成必要的數據或代碼(例如，允許或JavaScript)，這是向客戶返回來把它帶到一個新的國家，通常修改頁面DOM樹根據客戶的行動，其動機的請求。
這種方法要求更多的數據被發送給服務可能需要更多的計算資源每請求的部分或完全重建客戶頁的國家在伺服器中。 同時，這種做法更易於擴展，因為沒有按客戶的頁面數據保存在伺服器，因此，阿賈克斯可以將請求分派給不同的伺服器節點，不需要會議的數據共享或伺服器的親和力。
本地運行
[編輯]一些SPAs的執行可以從一個地方文件中使用的 文件URI結構中。 這使用戶能夠從一個伺服器下載的SPA和從一個地方的存儲裝置運行該文件，而不取決於伺服器的連接性。 如果這樣一個SPA要存儲和更新數據，它必須使用基於瀏覽器的 網絡存儲。 這些應用程式從中受益的進步提供與 HTML5的。[4]
單頁面應用模型的挑戰
[編輯]因為水療中心是一個演進，遠離國籍頁重新模式，瀏覽器最初是專為，一些新的挑戰已經出現。 每個這些問題有一個有效的解決方案[5] ：
搜尋引擎優化
[編輯]因為缺乏JavaScript執行上爬蟲一些受歡迎的 網絡搜尋引擎,[10] SEO(優化搜尋引擎)在歷史上提出的一個問題，面向公眾的網站希望採用SPA模型。[11]
從2009年至2015年， 谷歌網站管理員中 提出並建議一個"阿賈克斯爬方案"[12][13] 使用的一個初始感嘆號中段標識符為有狀態的 AJAX 頁(#!). 特別的行為必須實現的水療站點，以允許提取的相關元數據搜尋引擎的履帶。 搜尋引擎，不支持這個網址散方案，散列網址上的溫泉仍然是看不見的。 這些"散列爆炸"Uri已被認為有問題的一些作家包括傑尼分享至朋友圈地W3C的，因為它們使頁面訪問那些沒有 JavaScript 活在他們的瀏覽器。 他們還破 HTTP referer 的標題，如瀏覽器是不允許發送的片段標識在Referer頭。[14] 在2015年，谷歌棄他們的散列的爆炸的AJAX爬行的建議。[15]
或者，應用可能呈現的第一頁伺服器的負載和隨後的網頁的更新客戶。 這個傳統上是困難的，因為呈現代碼，可能需要寫在一個不同的語言或框架的伺服器和客戶。 使用邏輯較少的模板，截編寫從一種語文到另一個，或使用相同的語言在伺服器和客戶可能有助於增加量的代碼，可以共享。
因為搜尋引擎優化的兼容性並不是微不足道的水療中心，這是值得注意的水療中心通常不使用的情況下，搜尋引擎編制索引是一種要求，或可取的。 使用情況包括應用程式面的私人數據的背後隱藏着一個 身份認證 系統。 在該情況下，這些應用消費品，往往是一個經典的網頁重新繪的模型用於將應用程式的着陸頁和營銷網站，其提供足夠的元數據的應用程式出現的一擊一個搜尋引擎查詢。 博客，支持論壇和其他傳統的網頁重新繪製文物往往圍坐在溫泉，可以種搜尋引擎的有關條款。
另一個方法中使用的伺服器中心網框架，如基於Java ItsNat 是呈現的任何超文本的伺服器使用相同的語言和模板的技術。 在這種方法，伺服器就知道精確的DOM國家在客戶的任何或大或小的頁面更新的要求產生的伺服器，以及運輸由阿賈克斯，的確切JavaScript code帶來的客戶網頁的新的國家執行DOM方法。 開發人員可以決定哪些網頁的國家必須通過可搜索蜘蛛網的搜尋引擎優化的和能夠產生所需的國家在裝載時間產生純HTML而不是JavaScript。 在這種情況下的ItsNat框架，這是自動的，因為ItsNat保持的客戶DOM樹在伺服器作為一個Java W3C DOM樹；渲染這DOM樹在伺服器生成純HTML在裝載時間和JavaScript DOM行動，阿賈克斯的請求。 這種雙重性是非常重要的搜尋引擎優化，因為開發者可以建立，同Java的代碼和純粹基於HTML模板所需DOM國家在伺服器；在頁面負載時，常規HTML是由ItsNat使這DOM狀態的搜尋引擎優化兼容。 為1.3版本的，[16] ItsNat提供了一個新的無國籍模式中，以及客戶DOM不是在伺服器上保留因為與無國籍模式中客戶多國家是部分或完全重建的時伺服器上處理任何Ajax請求基於需要的數據由客戶發送通知伺服器的流DOM狀態；無國籍模式中還可以搜尋引擎優化兼容的，因為搜尋引擎優化的兼容性發生在裝載時最初的頁面不受影響狀態或無國籍的模式。
有一對夫婦的解決方法，使它看起來就像網站的可搜索的。 兩者都涉及創建獨立HTML網頁鏡的內容。 伺服器可以創建一個基於HTML版網站，並提供，以爬蟲，或者它可以使用一個無頭的瀏覽器，如PhantomJS運行JavaScript應用程式及輸出的所得HTML。
這些都需要相當多的努力，並可以最終放棄維護頭痛的大型複雜的網站。 也有潛在的SEO的陷阱。 如果伺服器生成HTML被認為是太不同的水療中心內容，那麼該網站將被處罰。 運行PhantomJS輸出HTML可以減緩的反應速度的網頁，其中一些是為其搜尋引擎–谷歌，特別是降級排名。[17]
客戶端/服務端代碼分離
[編輯]一種方法來增加量的代碼，可以共用伺服器和客戶之間是使用一種邏輯-小模板語言喜歡 鬍子 或 把手的。 這種模板可以呈現不同的主語言，例如 紅寶石 在伺服器和 JavaScript 在的客戶。 然而，僅僅共享模板通常需要工作重複的 業務邏輯 使用的選擇正確的模板，並填入數據。 呈現的模板可能有負面業績的影響時，才更新一小部分的頁面，如價值的文本輸入內的一個大型的模板。 更換整個模板也可能會干擾用戶的選擇或標位置，此處僅更新的改變價值可能不會。 為了避免這些問題，應用程式可以使用 UI數據綁定 或顆粒狀 DOM 操縱，只有在更新相應的部件的網頁，而不是重新呈現整個模板。
瀏覽器歷史
[編輯]有一個SPA是，通過的定義，'一個單頁的'，該模型休息瀏覽器是設計為一頁歷史上航行使用向前/後的按鈕。 這提出了一個可用性障礙時，一種用戶按下按鈕回，希望前面的屏幕國家內的溫泉，而是應用程式的單頁卸載和以前的頁面的瀏覽器的歷史記錄。
傳統的解決方案用於水療中心已經改變瀏覽網址的散列 段標識符 合當前的屏幕狀態。 這是可以實現的JavaScript，並使網址的記錄事件，以建立內的瀏覽器。 只要溫泉能夠重建相同的屏幕狀態從中包含的信息URL散，預期後按鈕行為是保留。
進一步解決這一問題，5說明已采 pushState 和 replaceState 提供程序訪問，實際的網址和瀏覽器的歷史。
分析
[編輯]分析工具，例如 谷歌分析 依賴整個新網頁載在瀏覽器，發起一個新的頁面負荷。 溫泉不以這種方式工作。
之後的第一頁載，隨後的所有網頁和內容的改變都是內部處理的應用，這應該只是一個叫功能以更新的分析包。 沒有電話所述的功能，瀏覽器永遠不會觸發一個新網頁載，沒有得到增加的瀏覽器的歷史和分析軟件包已經沒有知道誰是做什麼的網站上。
為單頁面應用添加頁面加載
[編輯]它可以加入網頁載的事件來一個溫泉使用5歷史API；這將有助於集成分析。 困難來管理並確保這一切都是被跟蹤，準確地說，這涉及檢查失蹤報告和雙條目。 一些框架提供開放源的分析的集成處理的大多數主要分析供應商。 開發者可以將它們納入應用程式，並確保一切正常，但是沒有需要做的一切，從頭開始。
初始化加載的速度
[編輯]單頁應用程式都有一個較慢的第一頁，載於基於伺服器的應用。 這是因為第一載有帶來的框架和應用程式的代碼之前呈現的需要看作為HTML在瀏覽器。 一個基於伺服器的應用程式，就具有推出必要HTML瀏覽器，減少延遲和下載時間。
加快頁加載
[編輯]有一些方法，加速初始載荷的一個SPA，例如沉重的方法來緩和懶惰-裝模塊需要的時候。 但它不能夠得到從事實上，它需要下載的框架，至少有一些應用程式的代碼，並將最有可能打API於數據的顯示之前的東西在瀏覽器。 這是一個付錢給我，現在，還付我錢以後的'折衷方案。 這個問題的性能和等待時間仍然是一個決定，開發人員必須做到的。
頁面生命周期
[編輯]一個水療中心是充分載入初次頁面負荷然後頁區域更換或更新頁面的碎片加載伺服器上的需求。 避免過度的下載的未使用的功能、一個水療通常會逐步下更多的功能，因為他們成為需要，無論是小碎片的網頁，或完整的畫面模塊。
在這樣一種比喻之間存在"各國"在一個水療和"網頁"在一個傳統的網站。 因為"國航"在同一頁面相似頁的導航，在理論上，任何基於頁面的網站可以轉化為單一頁取代在同一頁上唯一的改變的部分的結果進行比較連續的網頁在非泉。
SPA做法的網絡類似於 單一的文件接口 (SDI)介紹技術的流行在當地的桌面應用程式。
參考
[編輯]- ^ Flanagan, David, "JavaScript - The Definitive Guide", 5th ed., O'Reilly, Sebastopol, CA, 2006, p.497
- ^ Fixing the Back Button: SPA Behavior using Location Hash. [2016-01-18] （美國英語）.
- ^ US patent 8,136,109. [2002-04-12].
- ^ Unhosted web apps.
- ^ The Single Page Interface Manifesto. [2014-04-25].
- ^ Derby. [2011-12-11].
- ^ Sails.js. [2013-02-20].
- ^ Tutorial: Single Page Interface Web Site With ItsNat. [2011-01-13].
- ^ HTML5
- ^ What the user sees, what the crawler sees. [January 6, 2014].
the browser can execute JavaScript and produce content on the fly - the crawler cannot
- ^ Making Ajax Applications Crawlable. [January 6, 2014].
Historically, Ajax applications have been difficult for search engines to process because Ajax content is produced
- ^ Proposal for making AJAX crawlable. Google. October 7, 2009 [July 13, 2011].
- ^ (Specifications) Making AJAX Applications Crawlable. Google. [March 4, 2013].
- ^ Hash URIs. W3C Blog. May 12, 2011 [July 13, 2011].
- ^ Deprecating our AJAX crawling scheme. Official Google Webmaster Central Blog. [2017-02-23] （美國英語）.
|work=和|newspaper=只需其一 (幫助) - ^ ItsNat v1.3 release Notes. [2013-06-09].
- ^ Holmes, Simone (2015).
外部連結
[編輯]- 多頁面網絡應用到單頁Ajax接口的遷移(代爾夫特技術大學): http://arxiv.org/abs/cs/0610094
- 單頁宣言界面
[[Category:网络应用程序]]