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

施瑩

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

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

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

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

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

一、單頁Web應用

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

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

二、原生的JavaScript單頁應用

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

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

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

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

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

（一）客戶端

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

（二）Web服務器端

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

（三）數(shù)據(jù)庫

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

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

四、原生的JavaScript單頁應用優(yōu)缺點分析

（一）優(yōu)點

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

1.使用單一的JavaScript語言

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

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

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

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

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

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

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

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

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

（二）缺點

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

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

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

五、總結

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

參考文獻：

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

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

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

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

◎編輯 趙瑞峰