資訊專欄INFORMATION COLUMN
摘要：前言我是，如果你還不認(rèn)識(shí)我，不妨先看看技術(shù)的前世今生一，以及技術(shù)的前世今生二前面我提過，我的大哥有一個(gè)叫的死黨，這家伙有事沒事經(jīng)常上我們家串門。時(shí)間來到了年，在那前后發(fā)生了兩件事讓我印象深刻。傳送門技術(shù)的前世今生一技術(shù)的前世今生二
前言：我是JavaScript，如果你還不認(rèn)識(shí)我，不妨先看看《Web技術(shù)的前世今生（一）》，以及《Web技術(shù)的前世今生（二）》
前面我提過，我的大哥HTML有一個(gè)叫PHP的死黨，這家伙有事沒事經(jīng)常上我們家串門。
這天，PHP又來找我大哥閑扯。
“老哥，你知道一個(gè)叫Ruby的家伙嗎？”PHP問道。
“知道啊，最近我們合作過好幾個(gè)項(xiàng)目呢。怎么想起問它了？”
“呀，你是不清楚，這小子最近在我們那可火了，聽說是鼓搗了一個(gè)什么架子?！盤HP繼續(xù)說道。
“喔，你是說Rails啊，”很明顯，大哥對(duì)PHP口中的“架子”很熟悉，向PHP解釋道：“那不是架子，是Ruby用來構(gòu)建網(wǎng)站的框架。”
我在一旁聽著，借機(jī)打趣道：“后端那幫家伙有一個(gè)算一個(gè)，誰敢說開發(fā)網(wǎng)站有比咱PHP老兄還火的？”
“Js，你可別小看了這個(gè)Rails，”大哥作為一個(gè)老實(shí)人，聽不出我在開玩笑，繼續(xù)一本正經(jīng)的說：“之前PHP老弟的平易近人對(duì)客戶是挺有吸引力的，然而隨著他們的網(wǎng)站規(guī)模越來越大，PHP的親和力對(duì)于他們而言反而成了一種難以駕馭的負(fù)擔(dān)，似乎他們更需要尋求的是一種約束。”
“哎呀，老哥，你說的太對(duì)了，”PHP突然從凳子上跳起來，“最近好幾個(gè)老客戶都從我這撤了，聽說跑去找Ruby那小子了。老哥你說，那小子究竟是有什么魔力？”
“它搞的Rails框架就是用來規(guī)范網(wǎng)站的開發(fā)行為，明確你我之間的職責(zé)所在的。”大哥慢條斯理地說道。
“大哥，您就別賣關(guān)子了，趕緊給我們講講這個(gè)Rails吧？”對(duì)這事我也來了興致。
“它對(duì)一個(gè)網(wǎng)站的架構(gòu)劃分了三個(gè)層次。比如我就歸屬于只負(fù)責(zé)頁面展現(xiàn)的視圖層（View）；有關(guān)業(yè)務(wù)邏輯的活從視圖層剝離出來，由不同的模型（Model）去做；至于接受用戶的輸入交由恰當(dāng)?shù)腗odel去處理，處理完后再將數(shù)據(jù)傳遞給View，這個(gè)由控制器（controller）完成?！?/p>
大哥看著我迷茫的眼神，又繼續(xù)補(bǔ)充道：“對(duì)于一個(gè)動(dòng)態(tài)網(wǎng)站而言，每一個(gè)頁面應(yīng)該長成什么樣子是一件事，而究竟該呈現(xiàn)哪一個(gè)頁面，以及頁面上動(dòng)態(tài)變化的數(shù)據(jù)該是什么又是另外一件事。按之前PHP的做法，一個(gè)文件中既有我們前端用來布局頁面的代碼，又混雜著它用來處理業(yè)務(wù)邏輯的代碼，先不說設(shè)計(jì)上是否合理，首先這就得要求使用者既要熟悉我們前端，還要熟悉后端，”大哥一邊解釋著一邊朝我詭秘的一笑：“Js，你有興趣了解下PHP每次上工都是如何干活的嗎？”
”別別別，”我趕緊搖頭，“每次我連自己的活都干不完，哪有工夫搭理它啊。”
PHP在一旁聽著不樂意了，”去你的，我還煩你老在我眼前晃悠呢。“
“這就對(duì)了！Rails的出現(xiàn)就解決了這個(gè)問題，我們前端的工作就只是套用所謂的模板引擎來做頁面的展現(xiàn)，管它Ruby操作數(shù)據(jù)庫也好、做邏輯運(yùn)算也罷，都統(tǒng)統(tǒng)和咱們無關(guān)，我們只需要拿到它最終處理過的數(shù)據(jù)填充到模板引擎里，再給客戶展示出來就行了。”
“呃??老哥，你這說的是不是所謂的MVC模式??？我聽我的Java老大提起過?！盤HP問道。
“沒錯(cuò)，就是MVC，Java很早以前就玩這個(gè)了，它有一個(gè)類似的框架叫structs，只是之前這種開發(fā)模式還不流行，最近被Rails炒起來了。對(duì)了，我聽Java說它的structs也要升級(jí)到二代了，估計(jì)出來也會(huì)火一把吧。“
“哈哈，PHP，看來你們后端的小伙伴們都在搞框架，就你落伍了哦??”，我又開始拿PHP開涮，“誒？PHP這家伙人呢？PHP??”轉(zhuǎn)過頭才發(fā)現(xiàn)它已經(jīng)跑出很遠(yuǎn)了，看來用不了多久關(guān)于PHP的MVC框架也會(huì)問世了。
（猿知原味注：隨著Ruby on Rails的流行，2007年之后的五年，進(jìn)入到了Web后端發(fā)展史上一段框架橫飛的年代?？蚣艿淖饔贸松厦嫣岬降恼宫F(xiàn)層和業(yè)務(wù)邏輯層的解耦，還提供了諸如通過對(duì)象操作數(shù)據(jù)庫的ORM技術(shù)，以及URI路由、表單驗(yàn)證、國際化、安全防護(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)不止這些。）
時(shí)間來到了2010年，在那前后發(fā)生了兩件事讓我印象深刻。
一是我們的很多客戶開始把原本在Web上提供的服務(wù)同時(shí)搬到智能手機(jī)上去，然而移動(dòng)應(yīng)用并不認(rèn)識(shí)后端返回的Web頁面（猿知原味注：關(guān)于這一點(diǎn)，不包括近幾年興起的Web App和Hybrid App），這就迫使哪怕業(yè)務(wù)完全相同的應(yīng)用，針對(duì)Web端和移動(dòng)端也得去開發(fā)并維護(hù)兩套后端代碼。
二是貪婪的人類對(duì)在后端的View層渲染頁面還是不滿意，他們覺得我們前端就不該和后端摻和到一塊去，希望將我們徹底分開。
之所以這兩件事讓我記憶猶新，是因?yàn)樽罱K解決它們是我起了大作用。還記得我異步刷新網(wǎng)頁的能力嗎（Ajax）？既然人類討厭在后端做頁面渲染，那完全可以通過Ajax將數(shù)據(jù)拿到前端來渲染。這樣一來，一方面做到了前后端分離，糾結(jié)的人類不必再為該由誰負(fù)責(zé)模板引擎而苦惱了；另一方面，我們前端和移動(dòng)端一致決定讓一個(gè)叫JSON的家伙當(dāng)我們的聯(lián)合運(yùn)輸大隊(duì)長，由它來負(fù)責(zé)后端數(shù)據(jù)的傳輸工作，這樣對(duì)于相同的業(yè)務(wù)，后端只需要維護(hù)一套代碼就夠了。
“With great power comes great responsibility”，彼得叔叔對(duì)蜘蛛俠說的一句話讓我感同身受。自從我把頁面渲染的活攬到前端來之后，后端那幫哥們算是解脫了，然而我肩上的擔(dān)子迅速變沉了，每天忙的不可開交。
這種情況持續(xù)了一兩年，直到有一天，我的好大哥提醒了我。
“Js，你看啊，很多年前我們前端的職責(zé)就只是做頁面的展示，但Web發(fā)展到今天，我們也和數(shù)據(jù)打上了交道。你這邊不僅要發(fā)數(shù)據(jù)、收數(shù)據(jù)，還要處理數(shù)據(jù)，最后還要通過操作dom將數(shù)據(jù)更新到頁面上?！?/p>
HTML大哥接著說：“你是不是加粗文字可以借鑒當(dāng)初后端那幫小子搞的MVC框架，也鼓搗個(gè)什么框架出來，方便咱們前端將數(shù)據(jù)的活和視圖的活分開來干？”
我一拍大腿，“對(duì)啊！現(xiàn)在的狀況確實(shí)太凌亂了。我們也可以搞個(gè)View層只負(fù)責(zé)頁面渲染，搞個(gè)Model層專門處理數(shù)據(jù)模型，”我想了想接著說：“再通過某種方式將這兩層關(guān)聯(lián)起來，Model數(shù)據(jù)改變的時(shí)候同步到View顯示出來，View上的改變也能將數(shù)據(jù)同步回Model?！?/p>
“你說的這不就是雙向綁定嘛，”大哥給我的設(shè)想下了個(gè)定義，“還記得我們有個(gè)叫Microsoft的客戶嗎？它在數(shù)據(jù)綁定這一塊很有經(jīng)驗(yàn)，你可以去找它討教討教?！?/p>
（猿知原味注：MVVM模式最早就是被微軟的WPF和Silverlight的架構(gòu)師John Gossman提出來的）
沒過多久，像AngularJS、KnockoutJS、EmberJs、VueJS等一系列MV*模式的前端框架就相繼出現(xiàn)了。自此，我又過上了輕松愉快的美好生活。
故事讀完了，還是意猶未盡？沒關(guān)系，關(guān)注“猿知原味”公眾號(hào)（yz--yw），還有一大波生動(dòng)有趣的干貨等著你。
傳送門：《Web技術(shù)的前世今生（一）》《Web技術(shù)的前世今生（二）》
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/29849.html
摘要：前言我是，如果你還不認(rèn)識(shí)我，不妨先看看技術(shù)的前世今生一平靜的生活已經(jīng)有一段日子了。傳送門技術(shù)的前世今生一技術(shù)的前世今生三 前言：我是JavaScript，如果你還不認(rèn)識(shí)我，不妨先看看《Web技術(shù)的前世今生（一）》 平靜的生活已經(jīng)有一段日子了。 這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？ 大哥，您這說的哪里話，我什么地方做的不對(duì)么？我一臉茫然地回答道。 哼，...
摘要：前言我是，如果你還不認(rèn)識(shí)我，不妨先看看技術(shù)的前世今生一平靜的生活已經(jīng)有一段日子了。傳送門技術(shù)的前世今生一技術(shù)的前世今生三 前言：我是JavaScript，如果你還不認(rèn)識(shí)我，不妨先看看《Web技術(shù)的前世今生（一）》 平靜的生活已經(jīng)有一段日子了。 這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？ 大哥，您這說的哪里話，我什么地方做的不對(duì)么？我一臉茫然地回答道。 哼，...
摘要：前言我是，如果你還不認(rèn)識(shí)我，不妨先看看技術(shù)的前世今生一平靜的生活已經(jīng)有一段日子了。傳送門技術(shù)的前世今生一技術(shù)的前世今生三 前言：我是JavaScript，如果你還不認(rèn)識(shí)我，不妨先看看《Web技術(shù)的前世今生（一）》 平靜的生活已經(jīng)有一段日子了。 這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？ 大哥，您這說的哪里話，我什么地方做的不對(duì)么？我一臉茫然地回答道。 哼，...
摘要：直到有一天，大哥接到一項(xiàng)特殊的任務(wù)，一位年輕的爸爸想給自己患有抑郁癥的孩子制作一個(gè)網(wǎng)站，希望網(wǎng)頁里的天空每天都可以更換一種顏色。猿知原味注老頭闡述的方法是最早的動(dòng)態(tài)網(wǎng)頁實(shí)現(xiàn)方案技術(shù)。傳送門技術(shù)的前世今生二技術(shù)的前世今生三 我的名字叫JavaScript，你也可以喊我Js。在說我的故事之前，我覺得有必要先介紹下我的大哥HTML，和大嫂CSS。沒錯(cuò)，那個(gè)叫Java的家伙不是我的親戚，我們隔...
摘要：直到有一天，大哥接到一項(xiàng)特殊的任務(wù)，一位年輕的爸爸想給自己患有抑郁癥的孩子制作一個(gè)網(wǎng)站，希望網(wǎng)頁里的天空每天都可以更換一種顏色。猿知原味注老頭闡述的方法是最早的動(dòng)態(tài)網(wǎng)頁實(shí)現(xiàn)方案技術(shù)。傳送門技術(shù)的前世今生二技術(shù)的前世今生三 我的名字叫JavaScript，你也可以喊我Js。在說我的故事之前，我覺得有必要先介紹下我的大哥HTML，和大嫂CSS。沒錯(cuò)，那個(gè)叫Java的家伙不是我的親戚，我們隔...
閱讀 3195·2021-09-22 15:52
閱讀 2962·2019-08-30 15:55
閱讀 2759·2019-08-30 15:53
閱讀 2510·2019-08-30 13:21
閱讀 1695·2019-08-30 13:10
閱讀 2544·2019-08-26 12:09
閱讀 2632·2019-08-26 10:33
閱讀 1882·2019-08-23 18:06
