基于原生JS的單頁Web應用的架構設計

施瑩

[摘? ? ? ? ? ?要]? 精心編寫的單頁Web應用具有互動和快速響應的界面，還伴有訪問網絡的功能。在很長一段時間內，Flash和Java都是客戶端平臺上使用最為廣泛的單頁Web應用，因為它們的功能、速度和一致性，都超過了那些使用JavaScript（JS）和瀏覽器來渲染的應用。但是最近，JS和瀏覽器渲染達到了一個引爆點，它們克服了最大的缺陷，比其他客戶端平臺具有顯著優勢。關注使用原生的JS和瀏覽器渲染來構建單頁Web應用，并提供一個基于常見JS技術架構單頁應用的解決方案。

[關? ? 鍵? ?詞]? 單頁Web應用;JavaScript;瀏覽器;架構設計

[中圖分類號]? TP393? ? ? ? ? ? ? ? ? ? [文獻標志碼]? A? ? ? ? ? ? ? ? ? ? [文章編號]? 2096-0603（2019）36-0266-02

流行的MVC框架關注的是為客戶端提供一頁頁的靜態內容，這是傳統網站慢的原因之一。例如，當瀏覽者在某個傳統網站上點擊鏈接時，頁面會“閃白”，過幾秒鐘后所有的東西都會重新加載：導航條、廣告、標題、文本和文檔底部都會重新渲染，唯一改變的東西只是一些圖片或描述性文字。這些旋轉圖標所消耗的時間成本是驚人的。更糟糕的是，當頁面中的某些元素可用的時候，卻沒有任何提示。對經驗越來越豐富的Web瀏覽者來說，這種遲鈍的、不一致的體驗就變得難以接受。

單頁Web應用（Single Page Web Application，SPA）是目前網站開發技術的熱點，是另一種更好的開發Web應用的方法。很多傳統網站都在或者已經轉型為單頁Web應用，新的單頁Web應用網站（包括移動平臺上的）也大量涌現，如Gmail、Coding、Cloud9等。

一、單頁Web應用

單頁Web應用是只有一張Web頁面的應用，它就是瀏覽器中運行的桌面應用，在使用期間頁面不會重新加載。它適合放在單個可滾動網頁上的Web應用程序或網站，它們會動態地加載合適的內容來響應用戶操作。它們支持在單個頁面上與多個組件進行豐富的交互，具有快速響應的體驗。

單頁Web應用像所有的應用一樣，旨在幫助用戶完成任務，比如“編寫內容”或者“管理Web服務器”。可以認為單頁Web應用是一種從Web服務器加載的富客戶端。

二、原生的JavaScript單頁應用

JavaScript（JS）經過很長一段時間的發展，它的大部分缺點被緩解了，它的價值優勢也水漲船高，目前已成為全球最熱門的編程語言之一。JS具有部署簡單、支持跨平臺開發、運行速度快等優點，尤其適用于絕大多數的單頁Web應用。在超過數十億計的支持現代Web瀏覽器的設備上，都能見到基于JS的單頁應用，并且不需要專有的插件。只要稍許多做點工作，它就可以支持運行很多不同操作系統的各種設備。

原生的JavaScript單頁Web應用，從前端到后端都使用JavaScript來開發，業務和顯示邏輯皆使用JavaScript來編寫，由瀏覽器執行，如圖1所示。JavaScript利用瀏覽器技術來渲染界面，如HTML5、CSS3、Canvas或者SVG，從而構建具有吸引力的、穩健的、可擴展的和易于維護的單頁Web應用。

三、單頁Web應用的架構設計

相較于傳統網站，單頁Web應用最主要的變革發生在瀏覽器端，瀏覽器一開始會加載必需的HTML、CSS、JavaScript，之后所有的操作都在這張頁面上完成，這一切都由JavaScript來控制。因此，單頁Web應用會包含大量的JavaScript代碼，復雜度可想而知，模塊化開發和架構設計的重要性不言而喻。

單頁Web應用可以使用許多服務器技術，但如果將Web應用轉移到了瀏覽器端，對服務器的要求就大大降低了。圖2展示了單頁Web應用中數據庫、服務器、客戶端（瀏覽器）的三層分工，與傳統網站相比，業務邏輯和HTML的生成從服務器遷移到了客戶端（瀏覽器）。

（一）客戶端

在客戶端（瀏覽器），使用用來操作DOM的jQuery，包括歷史管理和事件處理的插件，同時使用TaffyDB2來提供高性能的、以數據為中心的模型，使用Socket.IO提供在服務端和客戶端之間無縫的、近實時的消息傳輸。隨著單頁Web應用的崛起，各種JavaScript框架也層出不窮，如Backbon.js，Ember.js，Angular.js等，還有RequireJS等模塊加載器。但是各個框架有其自身的限制，一旦不符合框架本身的設計哲學，結果可能適得其反。不管是否使用框架庫，單頁Web應用的設計思想都是適用的。

（二）Web服務器端

單頁Web應用服務器最常見的職責是認證與授權、數據驗證和數據的存儲與同步。在服務器端，使用Node.js作為基于事件的Web服務器，Node.js使用Google V8 JavaScript引擎，擅長處理成千上萬的并發連接。在Web服務器上也使用了Socket.IO，這樣可以實現在客戶端和服務器之間快速響應和輕量的全雙工通信。由于單頁Web應用的大多數代碼都在客戶端，后端可以用任何語言編寫，只要它能很好地滿足應用的要求即可。后端使用JavaScript編寫，可以使編程環境保持一致，并能簡化全棧開發。

（三）數據庫

使用數據庫服務器，為數據提供可靠的持久存儲。數據庫要放在服務端，因為客戶端的數據存儲是臨時的，且容易發生應用錯誤、用戶錯誤或篡改用戶。在數據庫端，可使用MongoDB數據庫，它是一種NoSQL數據庫，使用JSON來保存數據和通信，包含JavaScript API和命令行接口。JSON是一種JavaScript原生的數據格式，客戶端使用的也是相同的數據格式。

當然，單頁Web應用可以使用很多其他的服務端和數據庫技術，可以不選擇JavaScript這種方式，不管后端使用的是什么技術，大部分單頁Web應用的架構思想和開發技術都是相通的。

四、原生的JavaScript單頁應用優缺點分析

（一）優點

單頁Web應用具有桌面應用的即時性，也同時具有網站的可移植性和可訪問性。單頁Web應用的最主要的優點是：它提供了更加吸引人的用戶體驗。

1.使用單一的JavaScript語言

在整個開發過程中，使用的語言是JavaScript，使用的數據格式是JSON，使用了單一的語言，這就提供了在客戶端和服務器之間移動并共享代碼的機會，大大減少了代碼的體積和復雜度，同時節省了開發人員的時間，避免了混亂，因為幾乎沒有了語言和數據格式之間的環境切換。

2.單頁Web應用可以和桌面應用一樣渲染

單頁Web應用只需重繪界面上需要變化的部分。相比之下，傳統網站的許多用戶操作都會重繪整張頁面。如果頁面很大，服務器又繁忙，或者網絡連接很慢，當瀏覽器從服務器獲取數據時，頁面會持續好幾秒或者更長時間的“閃白”等待。

3.單頁Web應用可以擁有和桌面應用一樣的響應速度

單頁Web應用盡可能地把工作數據和處理過程從服務端轉移到瀏覽器端，在本地擁有大多數需要決策判斷的數據和業務邏輯，只有數據驗證、授權和持久存儲必須要放在服務端，因此響應時間大幅縮減。傳統網站的大多數應用邏輯在服務端，對大部分的用戶輸入的響應，必須等待一個“請求—響應—重繪”的循環周期。

4.單頁Web應用可以和桌面應用一樣，把它的狀態通知給用戶

當單頁Web應用必須等待服務器響應時，可以動態地顯示進度條或繁忙指示器，用戶不會因為延時而困惑。

5.單頁Web應用與網站一樣，可以隨處訪問且跨平臺

和大多數桌面應用不一樣，精心編寫的單頁Web應用可以在提HTML5瀏覽器的任何操作系統上運行，用戶可以通過任何網絡連接來訪問單頁Web應用，包括智能手機、平板電腦、電視、筆記本電腦和臺式計算機。

（二）缺點

1.單頁Web應用目前遇到最大的挑戰就是對搜索引擎不友好，JavaScript生成的頁面內容不能被搜索。搜索引擎為網站建立索引的時候，爬蟲機器人并不會執行單頁Web應用用來生成內容的JavaScript，這樣用戶就無法通過搜索引擎找到所需的東西。這對單頁Web應用非常不利，如果不能出現在搜索引擎上，意味著可能會對業務造成打擊。這個棘手的SEO問題需要搜索引擎公司和開發人員的不斷嘗試和配合。

2.單頁Web應用要在一個頁面上為用戶提供產品的所有功能，這個頁面首次加載的時候，需要生成大量的靜態資源，這個加載時間相對比較長。

3.單頁Web應用開發難度相對較高，開發者需要同時對組件化、設計模式有所認識。由于單頁Web應用的很多邏輯從服務器轉移到了瀏覽器端，開發單頁Web應用所需要編寫的JavaScript代碼，在規模上至少要比傳統網站大一個數量級。開發人員所面對的不再是一個簡單的網頁，而是一個運行在瀏覽器環境中的桌面軟件。

五、總結

單頁Web應用的發展造就了H5更為接近原生APP的體驗。對想要保持盡量好的用戶體驗的同時，又要節省研發成本的團隊而言，無疑是一個不錯的選擇。單頁Web應用的開發會遇到很多挑戰，但隨著技術的不斷發展和開發者的不斷努力，這些挑戰會被一一突破。

參考文獻：

[1]埃米頓.A.斯科特.SPA設計與架構：理解單頁面Web應用[M].北京：電子工業出版社，2016：8-9.

[2]本·雷迪.Serverless架構：無服務器單頁應用開發[M].北京：電子工業出版社出版，2017：306-308.

[3]彭玲玲，李詩瑩，馮爽.基于前端的Web性能優化[J].電子技術與軟件工程，2017（24）.

[4]仇晶，黃巖，柴瑜晗.基于Node.js中間層Web開發的研究與實現：以微信圖書借閱平臺為例[J].河北工業科技，2017（2）.

◎編輯 趙瑞峰