一直想寫這篇"十日談"，聊聊我對(duì)Web前端開(kāi)發(fā)的體會(huì)，順便解答下周圍不少人的困惑和迷惘。我不打算聊太多技術(shù)，我想，通過(guò)技術(shù)的歷練，得到的反思應(yīng)當(dāng)更重要。

　　我一直認(rèn)為自己是"初級(jí)"前端開(kāi)發(fā)工程師，一方面我入道尚淺，只有短短幾年，另一方面我自知對(duì)技術(shù)的鉆研并不深入，可能是由于環(huán)境的原因，當(dāng)然最重要的是，我幸運(yùn)的參與到互聯(lián)網(wǎng)崛起的浪潮之巔。時(shí)勢(shì)造就了一批技能薄弱但備受追捧的"弄潮者"，這在很大程度上影響我們對(duì)"技術(shù)本質(zhì)"的洞察力，多年來(lái)也一直未有成體系的"前端技術(shù)"布道佳作，以至于當(dāng)下多數(shù)人對(duì)前端技術(shù)的了解，蓋始于表述并不嚴(yán)謹(jǐn)?shù)膷徫徽衅该枋觯@正恰恰反映了Web前端開(kāi)發(fā)對(duì)自身的模糊定位。對(duì)于很多Web前端工程師來(lái)說(shuō)，初嘗禁果的快感無(wú)法持續(xù)很久，就陷入一輪又一輪的迷惘，思索自己的職業(yè)規(guī)劃，試圖尋找到適合自己的成長(zhǎng)道路、看清自身技能的瓶頸，尋找突破。但遺憾的是，Web前端技術(shù)被廣泛接納時(shí)日尚短，沒(méi)有多少勵(lì)志的成功樣板可供遵循。然而情況不總是這么糟，畢竟Web前端技術(shù)是一門"技術(shù)"，和計(jì)算機(jī)科學(xué)系出同門，只是因?yàn)榛ヂ?lián)網(wǎng)的高速崛起而被蒙上了迷霧，遮住了雙眼，讓我們傻傻看不清時(shí)局。

　　那么，如何定義Web前端技術(shù)崗位邊界?Web前端技術(shù)的價(jià)值體現(xiàn)在何處?前端工程師的價(jià)值僅僅體現(xiàn)在物以稀為貴嗎?前端工程師的初級(jí)、中級(jí)、高級(jí)和專家之間到底如何界定?當(dāng)前"我"處在什么位置?接下來(lái)的路子應(yīng)當(dāng)怎樣走?何謂前端技術(shù)之"道"?我想多數(shù)人都思考過(guò)這些問(wèn)題，本篇"十日談"里的觀點(diǎn)可能有些偏激，但拋磚引玉，讀者權(quán)且把這些言論當(dāng)作一個(gè)引子吧。

　　第一日：初嘗禁果

　　上帝說(shuō)："要有光!"便有了光

　　萬(wàn)物生靈、陽(yáng)光雨露蓋源于造物之初的天工開(kāi)物，我們無(wú)法想象上帝創(chuàng)造光明之前的世界模樣。但幸運(yùn)的是，前端開(kāi)發(fā)沒(méi)有神祗般的詭魅。這個(gè)技術(shù)工種的孕育、定型、發(fā)展自有軌跡，也頗有淵源，當(dāng)然，這非常容易理解。不嚴(yán)格的講，在楊致遠(yuǎn)和費(fèi)羅在斯坦福大學(xué)的機(jī)房里攛掇出Yahoo!時(shí)，Web前端技術(shù)就已經(jīng)開(kāi)始進(jìn)入公眾視野，只不過(guò)當(dāng)時(shí)沒(méi)有一個(gè)響亮的名字。從那時(shí)起，"基于瀏覽器端的開(kāi)發(fā)"就成了軟件開(kāi)發(fā)的新的分支，這也是Web前端技術(shù)的核心，即不論何時(shí)何地何種系統(tǒng)以及怎樣的設(shè)備，但凡基于瀏覽器，都是Web前端開(kāi)發(fā)的范疇(當(dāng)然，這個(gè)定義很狹隘，下文會(huì)提到)。

　　在2000年之后瀏覽器技術(shù)漸漸成熟，Web產(chǎn)品也越來(lái)越豐富，中國(guó)有大批年輕人開(kāi)始接觸互聯(lián)網(wǎng)，有一點(diǎn)需要注意，大部分人接觸互聯(lián)網(wǎng)不是始于對(duì)瀏覽器功能的好奇，而是被瀏覽器窗口內(nèi)的豐富內(nèi)容所吸引，我們的思維模式從一開(kāi)始就被限制在一個(gè)小窗口之內(nèi)，以至于很長(zhǎng)時(shí)間內(nèi)我們將"視覺(jué)"認(rèn)為是一種"功能"，Web產(chǎn)品無(wú)非是用來(lái)展現(xiàn)信息之用。起初的入行者無(wú)一例外對(duì)"視覺(jué)"的關(guān)注超過(guò)了對(duì)"內(nèi)容"的重視，先讓頁(yè)面看起來(lái)漂亮，去關(guān)注html/css，沿著"視覺(jué)呈現(xiàn)"的思路，繼續(xù)深入下去。因此，這類人是被"視覺(jué)"所吸引，從切頁(yè)面入行，著迷于結(jié)構(gòu)化的html和書(shū)寫工整的css，喜歡簡(jiǎn)潔優(yōu)雅的UI 和工整的頁(yè)面設(shè)計(jì)，之后開(kāi)始接觸視覺(jué)特效，并使用jQuery來(lái)實(shí)現(xiàn)視覺(jué)特效，以此為線索，開(kāi)始深入研究Dom、Bom和瀏覽器的渲染機(jī)制等，html/css在這些人手中就像進(jìn)攻兵器，而JavaScript則更如防守的盾牌。

　　還有另外一群人從另一條道路接觸Web前端，即工程師轉(zhuǎn)行做前端，他們有較多的后臺(tái)語(yǔ)言開(kāi)發(fā)背景，從讀寫數(shù)據(jù)開(kāi)始，漸漸觸及瀏覽器端，接觸 JavaScript庫(kù)，起初是在html代碼上加js邏輯，后來(lái)開(kāi)始涉及html和css，他們喜歡OO、邏輯清晰、結(jié)構(gòu)悅目的代碼，更關(guān)注界面背后的"程序語(yǔ)言"和數(shù)據(jù)邏輯。html/css在這些人手中則更像盾牌，而JavaScript更如進(jìn)攻的兵器。

　　應(yīng)當(dāng)說(shuō)這兩類人是互補(bǔ)的，他們各自了解瀏覽器本質(zhì)的一部分，一撥人對(duì)渲染引擎了如指掌，另一撥人則將JS引擎奉為至寶，其實(shí)任何一部分的優(yōu)勢(shì)發(fā)揮出來(lái)都能做出精品。大部分前端工程師都能從這兩條淵源中找到自己的影子。但，這兩類人的思維模式和觀點(diǎn)是如此不同，以至于形成了一些不必要的對(duì)抗，比如在某些公司，干脆將Web前端技術(shù)一分為二，"切頁(yè)面的"和"寫js的"。這樣做看上去明確了分工提高了效率，但他對(duì)員工的職業(yè)發(fā)展帶來(lái)巨大傷害。在第二日" 科班秀才"中會(huì)有進(jìn)一步討論。

　　我應(yīng)該屬于第二類，即在學(xué)校正兒八經(jīng)的學(xué)習(xí)C/Java和C#之類，以為大學(xué)畢業(yè)后能去做ERP軟件、桌面軟件或者進(jìn)某些通信公司寫TCP/IP相關(guān)的程序。校園招聘時(shí)選擇了中國(guó)雅虎，因?yàn)楫?dāng)年(08年)雅虎還是有一點(diǎn)兒名氣，而且我聽(tīng)說(shuō)雅虎比較算技術(shù)流的公司……自此就上了賊船，一發(fā)不可收拾。

　　在雅虎的這段時(shí)間，我有幸接觸到一股正氣凜然的技術(shù)流派，也形成了我對(duì)前端技術(shù)的一些基本看法，這些基本觀點(diǎn)一直影響我至今。

　　優(yōu)雅的學(xué)院派

　　當(dāng)年雅虎的技術(shù)流派正如日中天，擁有眾多"之父"級(jí)的高人，所營(yíng)造出的Hack氛圍實(shí)在讓人陶醉的無(wú)法自拔，那段時(shí)間我甚至寧愿加班到深夜閱讀海量的文檔和源代碼，感覺(jué)真的很舒服，我深深的被雅虎工程師這種低調(diào)務(wù)實(shí)、精工細(xì)琢的"服務(wù)精神"所打動(dòng)，而這種不起眼的優(yōu)秀品質(zhì)很大程度的影響雅虎產(chǎn)品的用戶體驗(yàn)和高質(zhì)量的技術(shù)輸出。那么，何謂"服務(wù)精神"?即你所做的東西是服務(wù)于人的，要么是產(chǎn)品客戶、要么是接手你項(xiàng)目的人、要么是使用你開(kāi)發(fā)的功能的人，所以技術(shù)文檔成為伴隨代碼的標(biāo)配。因此，工程師之間通過(guò)代碼就能做到心有靈犀的溝通。這是工程師的一項(xiàng)基本素質(zhì)，即，思路清晰的完成項(xiàng)目，且配備了有價(jià)值的技術(shù)文檔，如果你的程序是給其他程序員用的，則更要如此，就好比你制造一款家電都要配備說(shuō)明書(shū)一樣。因此，YDN成了當(dāng)時(shí)最受全球程序員最喜愛(ài)的技術(shù)文檔庫(kù)，這種優(yōu)雅務(wù)實(shí)的"學(xué)院氣息"讓人感覺(jué)獨(dú)具魅力。

　　讓人感覺(jué)奇怪的是，在中文社區(qū)始終未見(jiàn)這種學(xué)院派。甚至在具有先天開(kāi)源優(yōu)勢(shì)的Web前端技術(shù)社區(qū)里也是波瀾不驚，可見(jiàn)寫一篇好的技術(shù)文案真的比登天還難。我所見(jiàn)到的大部分所謂文檔索性把代碼里輸出數(shù)據(jù)的語(yǔ)句塊拷貝粘貼出來(lái)，至于為什么數(shù)據(jù)格式要設(shè)計(jì)成這樣、如果字段有修改怎么做、編碼解碼要求如何等等關(guān)鍵信息只字不提，或者開(kāi)發(fā)者也沒(méi)想過(guò)這些問(wèn)題呢。因此，我們一直在強(qiáng)調(diào)代碼的質(zhì)量和可維護(hù)性，但一直以來(lái)都未見(jiàn)效，蓋源于缺少這種"服務(wù)"意識(shí)的灌輸。這種意識(shí)在下文中還會(huì)多次提到，因?yàn)樗苡绊懩阕鍪碌拿總€(gè)細(xì)節(jié)，是最應(yīng)當(dāng)首先突破的思想糾結(jié)。

　　除了意識(shí)問(wèn)題，另一方面是技術(shù)問(wèn)題，即文筆。這也是工程師最瞧不上眼的問(wèn)題，難以置信這竟然是阻礙工程師突破瓶頸的關(guān)鍵所在。我已看到過(guò)數(shù)不清的人在晉升這道關(guān)卡吃了大虧，很多工程師技術(shù)實(shí)力很強(qiáng)，但就是表達(dá)不出來(lái)，要么羅列一大堆信息毫無(wú)重點(diǎn)、要么毫無(wú)趣味的講代碼細(xì)節(jié)，不知云云。除非你走狗屎運(yùn)碰到一個(gè)懂技術(shù)的老板，否則真的沒(méi)辦法逃脫碼農(nóng)的宿命。但大部分人還振振有詞不以為然。而在Web前端開(kāi)發(fā)領(lǐng)域情況更甚。前端工程師是最喜歡搞重構(gòu)的，但在快節(jié)奏的需求面前，你很難用"提高了可維護(hù)性"、"提升了性能"這類虛無(wú)縹緲的詞藻為自己爭(zhēng)取到時(shí)間來(lái)搞重構(gòu)，說(shuō)的露骨一點(diǎn)，可能你真的對(duì)某次重構(gòu)帶來(lái)的實(shí)際價(jià)值無(wú)法量化，只是"感覺(jué)代碼更整潔了"而已。我會(huì)在下文的"偽架構(gòu)"中會(huì)展開(kāi)分析前端工程師的這種浮躁獻(xiàn)媚的技術(shù)情結(jié)。而這正是前端工程師最欠缺的素質(zhì)之一：用數(shù)據(jù)說(shuō)話，用嚴(yán)謹(jǐn)科學(xué)的論據(jù)來(lái)支撐你的觀點(diǎn)，老板不傻，有價(jià)值的東西當(dāng)然會(huì)讓你去做。

　　當(dāng)然，情況不總是這么糟糕，我們看到中文社區(qū)中已經(jīng)鍛煉出了很多寫手，他們?cè)谟酶哔|(zhì)量的文字推銷自己的技術(shù)理念，這是一個(gè)好兆頭，好的文筆是可以鍛煉出來(lái)的。而在職場(chǎng)，特別是對(duì)前端工程師這個(gè)特殊職位來(lái)講，這種基本技能可以幫你反思梳理需求的輕重緩急，從凌亂的需求中把握七寸所在。因?yàn)楫?dāng)你開(kāi)始認(rèn)真寫一封郵件的時(shí)候，這種思考已經(jīng)包含其中了。

　　所以，雅虎技術(shù)的推銷是相對(duì)成功和遠(yuǎn)播的。關(guān)鍵在于兩方面，扎實(shí)的技術(shù)功底和高超的寫手。而真正的技術(shù)大牛一定是集兩者與一身，不僅鉆研劍道，還能產(chǎn)出秘籍。這也是Yahoo!優(yōu)雅的學(xué)院派氣息的動(dòng)力源泉。國(guó)內(nèi)很多技術(shù)團(tuán)體想在這方面有所建樹(shù)，應(yīng)當(dāng)首先想清楚這一點(diǎn)。

　　規(guī)范的破與立 1

　　雅虎的技術(shù)運(yùn)作非常規(guī)范，剛才已經(jīng)提到，包括技術(shù)、組織、文化，一切看起來(lái)有模有樣，也堪稱標(biāo)桿，自然成了國(guó)內(nèi)很多技術(shù)團(tuán)隊(duì)和社區(qū)的效仿對(duì)象。一時(shí)間各種"規(guī)范"成風(fēng)、各色"標(biāo)準(zhǔn)"大行其道，結(jié)果是質(zhì)量參差不齊。

　　我們到底需要什么樣的規(guī)范?雅虎的技術(shù)規(guī)范到底有何種魔力?以何種思路構(gòu)建的規(guī)范才是貨真價(jià)實(shí)的?規(guī)范有著怎樣的生命周期?想清楚這些問(wèn)題，能很大程度減輕很多Web前端工程師的思想負(fù)擔(dān)，看清一部分技術(shù)本質(zhì)，避免盲目跟風(fēng)。

　　我們的確需要規(guī)范，但好的規(guī)范一定是務(wù)實(shí)的，一定是"解決問(wèn)題"的。比如針對(duì)項(xiàng)目構(gòu)建的DPL可以收納公用的視覺(jué)元件以減少重復(fù)開(kāi)發(fā)、規(guī)定某 OPOA項(xiàng)目的事件分發(fā)原則以確立增量開(kāi)發(fā)的代碼慣性。反之，糟糕的規(guī)范卻顯得過(guò)于"抽象"，比如頁(yè)面性能指標(biāo)、響應(yīng)式設(shè)計(jì)原則。另外，盡管他山之石可以攻玉，但拿來(lái)主義有一個(gè)大前提，就是你了解你的項(xiàng)目的關(guān)鍵問(wèn)題，你要優(yōu)先解決的是些關(guān)鍵問(wèn)題，而外來(lái)規(guī)范正好能解決你的問(wèn)題。因此規(guī)范是一本案頭手冊(cè)，是一攬子問(wèn)題的解決方案，應(yīng)當(dāng)是"字典"，而不是"教程"。可見(jiàn)規(guī)范的源頭是"問(wèn)題"。所以，當(dāng)你想用CoffeeScript重構(gòu)你的項(xiàng)目時(shí)、當(dāng)你想引入 CommonJS規(guī)范時(shí)、當(dāng)你想在頁(yè)面中揉進(jìn)Bootstrap時(shí)、當(dāng)你打算重復(fù)造輪子搞一套JS庫(kù)時(shí)、當(dāng)你想重寫一套assets打包工具時(shí)，想想這些東東解決了你的什么問(wèn)題?會(huì)不會(huì)帶來(lái)新的問(wèn)題、把事情搞復(fù)雜了?還是為了嘗鮮?或者為了在簡(jiǎn)歷中堂而皇之的寫上使用并精通各種新技術(shù)?