1.1 前端技術(shù)的發(fā)展

縱觀整個(gè)前端發(fā)展史，我們可以發(fā)現(xiàn)，幾個(gè)關(guān)鍵的時(shí)間節(jié)點(diǎn)都是和重大的技術(shù)飛躍息息相關(guān)的，如Ajax的誕生、Node的問(wèn)世等。筆者將結(jié)合這幾個(gè)點(diǎn)，和大家一起回顧和展望前端開發(fā)的歷史發(fā)展軌跡和未來(lái)發(fā)展前景。

1.1.1 從靜態(tài)走向動(dòng)態(tài)

最初的網(wǎng)頁(yè)是歐洲粒子物理研究所的科學(xué)家為了方便查看共享文檔和論文，而基于XML（Extensible Markup Language）語(yǔ)言創(chuàng)造的，這也是為什么在前端開發(fā)中，最重要的全局對(duì)象被稱為document而不是context、page、application等的原因。當(dāng)時(shí)，網(wǎng)頁(yè)只具備文本圖片的顯示及頁(yè)面間相互跳轉(zhuǎn)（Hyper Link）的功能，因此人們稱為HTML（Hyper Text Markup Language）。

最初的Web，功能十分單一，開發(fā)也并不復(fù)雜。開發(fā)者先把寫好的網(wǎng)頁(yè)放在服務(wù)器指定位置（網(wǎng)站根目錄）下，然后將映射URL分享給使用者，使用者在瀏覽器地址欄輸入U(xiǎn)RL即可訪問(wèn)網(wǎng)頁(yè)內(nèi)容，如圖1.1所示。

早期的HTML作為靜態(tài)文件，即使只有部分內(nèi)容是需要變動(dòng)的，那么有多少種變動(dòng)的可能性，就需要準(zhǔn)備多少份文檔，這對(duì)開發(fā)者來(lái)說(shuō)是非常不友好的，并且無(wú)法與用戶進(jìn)行交互。

CGI（Common Gateway Interface）的出現(xiàn)改善了這一情況。CGI作為服務(wù)器拓展功能，可以從數(shù)據(jù)庫(kù)或者文件系統(tǒng)獲取數(shù)據(jù)，在將數(shù)據(jù)渲染為HTML文檔后，返回至客戶端，從而實(shí)現(xiàn)了網(wǎng)頁(yè)的動(dòng)態(tài)生成。在接收到用戶請(qǐng)求后，CGI還可以在服務(wù)端進(jìn)行處理，并返回對(duì)應(yīng)的處理結(jié)果，如圖1.2所示。

CGI被廣泛認(rèn)為是服務(wù)端腳本語(yǔ)言的鼻祖。然而，它也有著非常致命的缺陷。首先，CGI每接收到一個(gè)請(qǐng)求，都會(huì)新開一個(gè)進(jìn)程進(jìn)行處理，占用服務(wù)器的CPU和內(nèi)存，當(dāng)請(qǐng)求量成千上萬(wàn)時(shí)，服務(wù)器可能無(wú)法支撐以致崩潰。其次，黑客很容易通過(guò)不完善的CGI程序非法進(jìn)入開發(fā)者的服務(wù)器系統(tǒng)，這從安全方面來(lái)考慮是絕對(duì)不允許的。

以后來(lái)人的角度來(lái)看，筆者認(rèn)為CGI出現(xiàn)的最大意義就是給當(dāng)時(shí)剛起步的Web提供了一個(gè)發(fā)展方向。在這之后，PHP、JSP、ASP等各種服務(wù)端語(yǔ)言層出不窮，不僅彌補(bǔ)了CGI的缺陷，而且在性能上愈加高效，在開發(fā)上愈加簡(jiǎn)捷。這些語(yǔ)言的出現(xiàn)和廣泛應(yīng)用，使得Web技術(shù)飛速發(fā)展，前端網(wǎng)頁(yè)從此從靜態(tài)走向動(dòng)態(tài)，這個(gè)時(shí)代被稱為Web 1.0時(shí)代。

1.1.2 從后端走向前端

在Web 1.0時(shí)代，前后端是如何協(xié)作的呢？由于網(wǎng)頁(yè)是在服務(wù)端使用動(dòng)態(tài)腳本語(yǔ)言和模板引擎渲染出來(lái)的，所以一般由前端先寫模板，寫好后交付給后端套用，之后再由前后端聯(lián)調(diào)，以確認(rèn)模板套用無(wú)誤。

在這種開發(fā)環(huán)境下，前后端耦合密切，項(xiàng)目開發(fā)需要很高的溝通成本。在模板引擎的變量、判斷和循環(huán)、宏區(qū)塊等語(yǔ)法糖的支持下，前端也可以拿到環(huán)境變量來(lái)實(shí)現(xiàn)部分業(yè)務(wù)邏輯。如果前端開發(fā)者表現(xiàn)得稍微弱勢(shì)一些，就很有可能被后臺(tái)摁著在視圖層實(shí)現(xiàn)一些業(yè)務(wù)代碼。同時(shí)，整個(gè)項(xiàng)目的代碼質(zhì)量也隨之降低。

網(wǎng)站的這種組織架構(gòu)還會(huì)帶來(lái)另外一些問(wèn)題。比如，頁(yè)面哪怕僅有一小塊內(nèi)容需要變更，瀏覽器也需要重新請(qǐng)求和渲染整個(gè)頁(yè)面。一方面，網(wǎng)站資源的傳輸耗費(fèi)了更多的時(shí)間；另一方面，頁(yè)面重載的用戶體驗(yàn)也十分糟糕。

舉個(gè)例子，用戶在登錄頁(yè)面輸入了錯(cuò)誤密碼時(shí)，服務(wù)器要將校驗(yàn)信息渲染到頁(yè)面并傳給瀏覽器。實(shí)際上，頁(yè)面只是多了一行類似于“密碼錯(cuò)誤”的提示，然而網(wǎng)站資源卻需要重新進(jìn)行傳輸，同時(shí)頁(yè)面還會(huì)丟失用戶輸入的表單數(shù)據(jù)（即便到了今天，這種現(xiàn)象依然可以在一些政府和國(guó)企的老舊網(wǎng)站中看到）。

當(dāng)時(shí)雖然出現(xiàn)了各種頁(yè)面和數(shù)據(jù)的緩存技術(shù)，稍有成效地緩解了這一問(wèn)題，但也無(wú)法從根本上解決問(wèn)題。于是，從事Web的前輩們開始探尋其他一些解決方案，如Ajax異步數(shù)據(jù)加載。

Ajax（Asynchronous JavaScript And XML，異步JavaScript和XML）通過(guò)XMLHttpRequest對(duì)象，可以在不重載頁(yè)面的情況下與Web服務(wù)器交換數(shù)據(jù)，再加上JavaScript的document對(duì)象，開發(fā)者們可以很輕松地實(shí)現(xiàn)頁(yè)面局部?jī)?nèi)容刷新。

從1999年開始，ActiveX和XMLHttpRequest陸續(xù)問(wèn)世，Ajax的星星之火漸漸燃起。時(shí)間推移到2005年，互聯(lián)網(wǎng)巨頭Google發(fā)布了全面使用Ajax打造的Gmail（如圖1.3所示）和Gmap兩款應(yīng)用。人們驚訝地發(fā)現(xiàn)，原來(lái)使用異步數(shù)據(jù)傳輸獲得的應(yīng)用體驗(yàn)是如此地良好。自此，Ajax獲得了井噴式的發(fā)展。

得益于Ajax的發(fā)展，前后端分離的趨勢(shì)日漸明顯，前端不再需要依賴后臺(tái)環(huán)境生存，所有服務(wù)器數(shù)據(jù)都可以通過(guò)異步交互來(lái)獲取。在取得一個(gè)良好定義的RESTful （Representational State Transfer，表述性狀態(tài)轉(zhuǎn)移）接口后，兩端甚至可以在零溝通成本的情況下并行完成項(xiàng)目任務(wù)。

隨著Google V8引擎問(wèn)世、PC和移動(dòng)端設(shè)備性能提高、ES6和H5日趨成熟，瀏覽器端的計(jì)算能力和功能性似乎愈加過(guò)剩，開發(fā)者們開始將越來(lái)越多的業(yè)務(wù)邏輯代碼遷移到前端，前端路由的概念也逐漸清晰。

路由這個(gè)概念首先出現(xiàn)在后臺(tái)。傳統(tǒng)Web網(wǎng)頁(yè)間的跳轉(zhuǎn)，需要開發(fā)者先在后臺(tái)設(shè)置頁(yè)面的路由規(guī)則，之后服務(wù)器根據(jù)用戶的請(qǐng)求檢索路由規(guī)則列表，并返回相應(yīng)的頁(yè)面。而前端路由則是在瀏覽器端配置路由規(guī)則，通過(guò)偵聽瀏覽器地址的變化，異步加載和更新頁(yè)面內(nèi)容。

可以這么說(shuō)，Ajax實(shí)現(xiàn)了無(wú)刷新的數(shù)據(jù)交互，而前端路由則實(shí)現(xiàn)了無(wú)刷新的頁(yè)面跳轉(zhuǎn)；Ajax將Web Page發(fā)展成Web App，而前端路由則給了Web App更多的可能，如SPA（Single Page Application，單頁(yè)面應(yīng)用），如圖1.4所示。

Angular、React、Vue等知名的前端框架都有前端路由的概念。在之后的章節(jié)中，筆者會(huì)專門講解前端路由的實(shí)現(xiàn)原理和Vue.js項(xiàng)目的核心內(nèi)容之一——Vue Router。

現(xiàn)在，很多Web項(xiàng)目采用這樣的架構(gòu)，后臺(tái)只負(fù)責(zé)數(shù)據(jù)的存取和組裝，而前端則負(fù)責(zé)業(yè)務(wù)邏輯層和視圖層的全部工作。這一路走來(lái)，項(xiàng)目重心已從后端轉(zhuǎn)移到了前端。

1.1.3 從前端走向全端

下面是筆者在2018年春節(jié)時(shí)，在CSDN（國(guó)內(nèi)的技術(shù)交流社區(qū)）的官網(wǎng)上截取的一張圖，如圖1.5所示。讀之深有體會(huì)，有興趣的同學(xué)可以細(xì)細(xì)品味，這里不再多作贅述。

若要說(shuō)2009年Web界最為爆炸性的新聞，那一定是Node.js的問(wèn)世。

2009年2月，一個(gè)名叫Ryan Dahl的開發(fā)者在博客上宣布準(zhǔn)備基于Google V8引擎創(chuàng)建一個(gè)輕量級(jí)的Web服務(wù)器并提供一套組件庫(kù)。

同年5月，Ryan Dahl在GitHub上發(fā)布了最初版本的Node.js，這標(biāo)志著Node.js的誕生。從此，Javascript也占據(jù)了服務(wù)端編程語(yǔ)言的一席之地。前端工程師可以以很低的成本用Node.js和MongoDB搭建一個(gè)后臺(tái)。乍一看，前端工程師和全棧工程師之間的距離，只在于一個(gè)DataBase（數(shù)據(jù)庫(kù)）。

從Node.js誕生至今，無(wú)論是新手還是專家，大批量地涌入Node社區(qū)，大家圍繞著項(xiàng)目，使用并貢獻(xiàn)著自己的力量，努力使之適用于更多的應(yīng)用場(chǎng)景。這些年來(lái)，人們對(duì)Node.js褒貶不一，但毋庸置疑的是，它的問(wèn)世必是前端發(fā)展史上濃墨重彩的一筆，如圖1.6所示。

這兩年來(lái)，隨著微信小程序和支付寶小程序的問(wèn)世，前端技術(shù)早已超脫了Web和Hybrid應(yīng)用的范圍。前端工程師很容易基于固有技術(shù)棧快速上手和開發(fā)小程序類微應(yīng)用。以微信小程序?yàn)槔蚣苁褂谜Z(yǔ)法通用的WXML代替HTML、WXSS代替CSS，開發(fā)語(yǔ)言由HTML+CSS+JS變?yōu)閃XML+WXSS+JS。此外，與Vue.js一樣，它們也是MVVM模式，如圖1.7所示。

2018年3月20日，IT技術(shù)圈里又爆出一熱搜新聞：小米、中興、華為、金立、聯(lián)想、魅族、努比亞、OPPO、vivo、一加十廠聯(lián)合共建“快應(yīng)用”的標(biāo)準(zhǔn)和平臺(tái)。

快應(yīng)用類似于小程序，不用下載和安裝即可使用和生成桌面快捷方式，但有區(qū)別的一點(diǎn)在于，快應(yīng)用不必依賴于微信或者支付寶這樣的第三方平臺(tái)，它是手機(jī)廠商從系統(tǒng)應(yīng)用層面支持的。對(duì)于前端工程師來(lái)說(shuō)，這又是一則喜訊，因?yàn)殚_發(fā)快應(yīng)用使用的也是前端技術(shù)棧。

可以預(yù)見，未來(lái)的前端和前端衍生技術(shù)很有可能遍布從Web到桌面應(yīng)用，從PC、移動(dòng)端到智能電視、游戲機(jī)等的各個(gè)角落。

未來(lái)的工程師也許只分為兩種，一種是負(fù)責(zé)數(shù)據(jù)方面的云端工程師，另一種則是全端（前端）工程師。