施瑩

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

[關(guān)? ? 鍵? ?詞]? 單頁(yè)Web應(yīng)用;JavaScript;瀏覽器;架構(gòu)設(shè)計(jì)

[中圖分類號(hào)]? TP393? ? ? ? ? ? ? ? ? ? [文獻(xiàn)標(biāo)志碼]? A? ? ? ? ? ? ? ? ? ? [文章編號(hào)]? 2096-0603（2019）36-0266-02

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

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

一、單頁(yè)Web應(yīng)用

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

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

二、原生的JavaScript單頁(yè)應(yīng)用

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

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

三、單頁(yè)Web應(yīng)用的架構(gòu)設(shè)計(jì)

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

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

（一）客戶端

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

（二）Web服務(wù)器端

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

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

使用數(shù)據(jù)庫(kù)服務(wù)器，為數(shù)據(jù)提供可靠的持久存儲(chǔ)。數(shù)據(jù)庫(kù)要放在服務(wù)端，因?yàn)榭蛻舳说臄?shù)據(jù)存儲(chǔ)是臨時(shí)的，且容易發(fā)生應(yīng)用錯(cuò)誤、用戶錯(cuò)誤或篡改用戶。在數(shù)據(jù)庫(kù)端，可使用MongoDB數(shù)據(jù)庫(kù)，它是一種NoSQL數(shù)據(jù)庫(kù)，使用JSON來(lái)保存數(shù)據(jù)和通信，包含JavaScript API和命令行接口。JSON是一種JavaScript原生的數(shù)據(jù)格式，客戶端使用的也是相同的數(shù)據(jù)格式。

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

四、原生的JavaScript單頁(yè)應(yīng)用優(yōu)缺點(diǎn)分析

（一）優(yōu)點(diǎn)

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

1.使用單一的JavaScript語(yǔ)言

在整個(gè)開(kāi)發(fā)過(guò)程中，使用的語(yǔ)言是JavaScript，使用的數(shù)據(jù)格式是JSON，使用了單一的語(yǔ)言，這就提供了在客戶端和服務(wù)器之間移動(dòng)并共享代碼的機(jī)會(huì)，大大減少了代碼的體積和復(fù)雜度，同時(shí)節(jié)省了開(kāi)發(fā)人員的時(shí)間，避免了混亂，因?yàn)閹缀鯖](méi)有了語(yǔ)言和數(shù)據(jù)格式之間的環(huán)境切換。

2.單頁(yè)Web應(yīng)用可以和桌面應(yīng)用一樣渲染

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

3.單頁(yè)Web應(yīng)用可以擁有和桌面應(yīng)用一樣的響應(yīng)速度

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

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

當(dāng)單頁(yè)Web應(yīng)用必須等待服務(wù)器響應(yīng)時(shí)，可以動(dòng)態(tài)地顯示進(jìn)度條或繁忙指示器，用戶不會(huì)因?yàn)檠訒r(shí)而困惑。

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

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

（二）缺點(diǎn)

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

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

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

五、總結(jié)

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

參考文獻(xiàn)：

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

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

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

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

◎編輯 趙瑞峰