Web技術(shù)的前世今生（三）

Wuv1Up 發(fā)布于2019-07-01 11:06 / 1639人閱讀

摘要：前言我是，如果你還不認(rèn)識我，不妨先看看技術(shù)的前世今生一，以及技術(shù)的前世今生二前面我提過，我的大哥有一個叫的死黨，這家伙有事沒事經(jīng)常上我們家串門。時間來到了年，在那前后發(fā)生了兩件事讓我印象深刻。傳送門技術(shù)的前世今生一技術(shù)的前世今生二

前言：我是JavaScript，如果你還不認(rèn)識我，不妨先看看《Web技術(shù)的前世今生（一）》，以及《Web技術(shù)的前世今生（二）》

前面我提過，我的大哥HTML有一個叫PHP的死黨，這家伙有事沒事經(jīng)常上我們家串門。

這天，PHP又來找我大哥閑扯。

“老哥，你知道一個叫Ruby的家伙嗎？”PHP問道。

“知道啊，最近我們合作過好幾個項目呢。怎么想起問它了？”

“呀，你是不清楚，這小子最近在我們那可火了，聽說是鼓搗了一個什么架子。”PHP繼續(xù)說道。

“喔，你是說Rails啊，”很明顯，大哥對PHP口中的“架子”很熟悉，向PHP解釋道：“那不是架子，是Ruby用來構(gòu)建網(wǎng)站的框架。”

我在一旁聽著，借機(jī)打趣道：“后端那幫家伙有一個算一個，誰敢說開發(fā)網(wǎng)站有比咱PHP老兄還火的？”

“Js，你可別小看了這個Rails，”大哥作為一個老實人，聽不出我在開玩笑，繼續(xù)一本正經(jīng)的說：“之前PHP老弟的平易近人對客戶是挺有吸引力的，然而隨著他們的網(wǎng)站規(guī)模越來越大，PHP的親和力對于他們而言反而成了一種難以駕馭的負(fù)擔(dān)，似乎他們更需要尋求的是一種約束。”

“哎呀，老哥，你說的太對了，”PHP突然從凳子上跳起來，“最近好幾個老客戶都從我這撤了，聽說跑去找Ruby那小子了。老哥你說，那小子究竟是有什么魔力？”

“它搞的Rails框架就是用來規(guī)范網(wǎng)站的開發(fā)行為，明確你我之間的職責(zé)所在的。”大哥慢條斯理地說道。

“大哥，您就別賣關(guān)子了，趕緊給我們講講這個Rails吧？”對這事我也來了興致。

“它對一個網(wǎng)站的架構(gòu)劃分了三個層次。比如我就歸屬于只負(fù)責(zé)頁面展現(xiàn)的視圖層（View）；有關(guān)業(yè)務(wù)邏輯的活從視圖層剝離出來，由不同的模型（Model）去做；至于接受用戶的輸入交由恰當(dāng)?shù)腗odel去處理，處理完后再將數(shù)據(jù)傳遞給View，這個由控制器（controller）完成。”

大哥看著我迷茫的眼神，又繼續(xù)補(bǔ)充道：“對于一個動態(tài)網(wǎng)站而言，每一個頁面應(yīng)該長成什么樣子是一件事，而究竟該呈現(xiàn)哪一個頁面，以及頁面上動態(tài)變化的數(shù)據(jù)該是什么又是另外一件事。按之前PHP的做法，一個文件中既有我們前端用來布局頁面的代碼，又混雜著它用來處理業(yè)務(wù)邏輯的代碼，先不說設(shè)計上是否合理，首先這就得要求使用者既要熟悉我們前端，還要熟悉后端，”大哥一邊解釋著一邊朝我詭秘的一笑：“Js，你有興趣了解下PHP每次上工都是如何干活的嗎？”

”別別別，”我趕緊搖頭，“每次我連自己的活都干不完，哪有工夫搭理它啊。”

PHP在一旁聽著不樂意了，”去你的，我還煩你老在我眼前晃悠呢。“

“這就對了！Rails的出現(xiàn)就解決了這個問題，我們前端的工作就只是套用所謂的模板引擎來做頁面的展現(xiàn)，管它Ruby操作數(shù)據(jù)庫也好、做邏輯運(yùn)算也罷，都統(tǒng)統(tǒng)和咱們無關(guān)，我們只需要拿到它最終處理過的數(shù)據(jù)填充到模板引擎里，再給客戶展示出來就行了。”

“呃??老哥，你這說的是不是所謂的MVC模式啊？我聽我的Java老大提起過。”PHP問道。

“沒錯，就是MVC，Java很早以前就玩這個了，它有一個類似的框架叫structs，只是之前這種開發(fā)模式還不流行，最近被Rails炒起來了。對了，我聽Java說它的structs也要升級到二代了，估計出來也會火一把吧。“

“哈哈，PHP，看來你們后端的小伙伴們都在搞框架，就你落伍了哦??”，我又開始拿PHP開涮，“誒？PHP這家伙人呢？PHP??”轉(zhuǎn)過頭才發(fā)現(xiàn)它已經(jīng)跑出很遠(yuǎn)了，看來用不了多久關(guān)于PHP的MVC框架也會問世了。

（猿知原味注：隨著Ruby on Rails的流行，2007年之后的五年，進(jìn)入到了Web后端發(fā)展史上一段框架橫飛的年代。框架的作用除了上面提到的展現(xiàn)層和業(yè)務(wù)邏輯層的解耦，還提供了諸如通過對象操作數(shù)據(jù)庫的ORM技術(shù)，以及URI路由、表單驗證、國際化、安全防護(hù)等網(wǎng)站開發(fā)中的常用功能。在這期間也出現(xiàn)了一大批優(yōu)秀的Web框架，譬如SSH（Struts+Spring+Hibernate）、SpringMVC、Rails、ASP.NET MVC、Django、Flask、CodeIgniter、Yii、Lavarel、Beego??而且還遠(yuǎn)遠(yuǎn)不止這些。）

時間來到了2010年，在那前后發(fā)生了兩件事讓我印象深刻。

一是我們的很多客戶開始把原本在Web上提供的服務(wù)同時搬到智能手機(jī)上去，然而移動應(yīng)用并不認(rèn)識后端返回的Web頁面（猿知原味注：關(guān)于這一點(diǎn)，不包括近幾年興起的Web App和Hybrid App），這就迫使哪怕業(yè)務(wù)完全相同的應(yīng)用，針對Web端和移動端也得去開發(fā)并維護(hù)兩套后端代碼。

二是貪婪的人類對在后端的View層渲染頁面還是不滿意，他們覺得我們前端就不該和后端摻和到一塊去，希望將我們徹底分開。

之所以這兩件事讓我記憶猶新，是因為最終解決它們是我起了大作用。還記得我異步刷新網(wǎng)頁的能力嗎（Ajax）？既然人類討厭在后端做頁面渲染，那完全可以通過Ajax將數(shù)據(jù)拿到前端來渲染。這樣一來，一方面做到了前后端分離，糾結(jié)的人類不必再為該由誰負(fù)責(zé)模板引擎而苦惱了；另一方面，我們前端和移動端一致決定讓一個叫JSON的家伙當(dāng)我們的聯(lián)合運(yùn)輸大隊長，由它來負(fù)責(zé)后端數(shù)據(jù)的傳輸工作，這樣對于相同的業(yè)務(wù)，后端只需要維護(hù)一套代碼就夠了。

“With great power comes great responsibility”，彼得叔叔對蜘蛛俠說的一句話讓我感同身受。自從我把頁面渲染的活攬到前端來之后，后端那幫哥們算是解脫了，然而我肩上的擔(dān)子迅速變沉了，每天忙的不可開交。

這種情況持續(xù)了一兩年，直到有一天，我的好大哥提醒了我。

“Js，你看啊，很多年前我們前端的職責(zé)就只是做頁面的展示，但Web發(fā)展到今天，我們也和數(shù)據(jù)打上了交道。你這邊不僅要發(fā)數(shù)據(jù)、收數(shù)據(jù)，還要處理數(shù)據(jù)，最后還要通過操作dom將數(shù)據(jù)更新到頁面上。”

HTML大哥接著說：“你是不是加粗文字可以借鑒當(dāng)初后端那幫小子搞的MVC框架，也鼓搗個什么框架出來，方便咱們前端將數(shù)據(jù)的活和視圖的活分開來干？”

我一拍大腿，“對啊！現(xiàn)在的狀況確實太凌亂了。我們也可以搞個View層只負(fù)責(zé)頁面渲染，搞個Model層專門處理數(shù)據(jù)模型，”我想了想接著說：“再通過某種方式將這兩層關(guān)聯(lián)起來，Model數(shù)據(jù)改變的時候同步到View顯示出來，View上的改變也能將數(shù)據(jù)同步回Model。”

“你說的這不就是雙向綁定嘛，”大哥給我的設(shè)想下了個定義，“還記得我們有個叫Microsoft的客戶嗎？它在數(shù)據(jù)綁定這一塊很有經(jīng)驗，你可以去找它討教討教。”

（猿知原味注：MVVM模式最早就是被微軟的WPF和Silverlight的架構(gòu)師John Gossman提出來的）

沒過多久，像AngularJS、KnockoutJS、EmberJs、VueJS等一系列MV*模式的前端框架就相繼出現(xiàn)了。自此，我又過上了輕松愉快的美好生活。

故事讀完了，還是意猶未盡？沒關(guān)系，關(guān)注“猿知原味”公眾號（yz--yw），還有一大波生動有趣的干貨等著你。

傳送門：《Web技術(shù)的前世今生（一）》《Web技術(shù)的前世今生（二）》