我一直認(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ù)膷徫?a target="_blank">招聘描述，而這正恰恰反映了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和書寫工整的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ō)明書一樣。因此，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ù)？

規(guī)范之立應(yīng)當(dāng)有動(dòng)因，動(dòng)因來(lái)源于項(xiàng)目需求，項(xiàng)目需求則來(lái)自對(duì)產(chǎn)品的理解和把握，這是Web前端初級(jí)工程師走向中級(jí)甚至高級(jí)的一次重要蛻變，軟件工程領(lǐng)域早就有“架構(gòu)師”角色，而架構(gòu)師往往存在于項(xiàng)目需求分析和概設(shè)、詳設(shè)階段。我看到的情況是，Web前端工程師的思維過(guò)多的限制在“界面”之內(nèi)，向前和產(chǎn)品需求離的太遠(yuǎn)（認(rèn)為這是視覺(jué)設(shè)計(jì)師的事）、向后和數(shù)據(jù)邏輯又隔離開(kāi)來(lái)（認(rèn)為這是后臺(tái)工程師該干的事），因此前端規(guī)范也大都泛泛，無(wú)關(guān)項(xiàng)目痛癢，成了玩具。

雅虎技術(shù)規(guī)范的優(yōu)秀之初在于它們解決問(wèn)題。所以，學(xué)習(xí)使用規(guī)范應(yīng)當(dāng)多問(wèn)一句，“他們?yōu)槭裁催@樣做？”其實(shí)，想清楚這些問(wèn)題時(shí)，腦海中自然形成了一種“遇山開(kāi)山”的創(chuàng)造性思維。

【規(guī)范的破與立 2】

如果說(shuō)新技術(shù)的嘗鮮缺少針對(duì)性，但至少滿足程序員的某種潔癖和快感，那么“負(fù)擔(dān)”從何而來(lái)呢？對(duì)于初學(xué)者來(lái)說(shuō)，有價(jià)值學(xué)習(xí)資料可能只有這些規(guī)范，如果說(shuō)規(guī)范價(jià)值不大，那又當(dāng)從何入手呢？

剛才我說(shuō)的不是依賴于規(guī)范，而是對(duì)規(guī)范的反思，擺脫規(guī)范灌輸給我們的思維定勢(shì)。新人們大概是看了Wiki中的很多指標(biāo)、結(jié)論、實(shí)踐，在做項(xiàng)目之初就附加了不少“八股式”的負(fù)擔(dān)，甚至影響我們對(duì)項(xiàng)目關(guān)鍵需求和關(guān)鍵問(wèn)題的洞察力和判斷力，負(fù)擔(dān)過(guò)重就無(wú)法輕裝上陣，Wiki中提到的這些指標(biāo)和規(guī)范是結(jié)論性的，是大量的實(shí)踐之后得出的，也只有經(jīng)歷過(guò)大量實(shí)踐才會(huì)真正理解這些結(jié)論，比如DomReady時(shí)間和http請(qǐng)求數(shù)是否有因果關(guān)系，http請(qǐng)求數(shù)增加是否真的會(huì)導(dǎo)致頁(yè)面性能下降，什么條件下會(huì)導(dǎo)致性能下降？我們從那些條文和結(jié)論中無(wú)法找到答案。

舉個(gè)具體的例子，Kissy剛剛出了DPL，也是一大堆結(jié)論，比如他的布局就采用了經(jīng)典的雙飛翼，使用容器浮動(dòng)來(lái)實(shí)現(xiàn)，那么，這種做法就是不可撼動(dòng)的“標(biāo)準(zhǔn)”嗎？看看淘寶車險(xiǎn)首頁(yè)，布局容器齊刷刷的inline-block，只要頂層容器去掉寬度，布局容器自身就能根據(jù)瀏覽器寬度調(diào)整自然水平/垂直排列，輕易的適應(yīng)終端寬度了。

再比如，淘寶旅行計(jì)劃項(xiàng)目中的部署方式，也沒(méi)有完全使用Loader管理依賴，而是將依賴層級(jí)做的很少，業(yè)務(wù)邏輯使用腳本來(lái)合并，這樣就可以更容易在build環(huán)節(jié)加入語(yǔ)法檢查和代碼風(fēng)格檢查。

類似這種擺脫原有編程思維，有針對(duì)性的用新思路新方法解決問(wèn)題的做法顯然讓人感覺(jué)更加清爽，編程的樂(lè)趣也正體現(xiàn)在打破常規(guī)的快感之中，小馬曾經(jīng)說(shuō)過(guò)：“制造規(guī)范是為了打破規(guī)范”，萬(wàn)不要因?yàn)檫@些規(guī)范標(biāo)準(zhǔn)加重負(fù)擔(dān)，導(dǎo)致開(kāi)始做一個(gè)簡(jiǎn)單頁(yè)面時(shí)也顯得縮手縮腳，無(wú)法放開(kāi)身手。大膽的動(dòng)手實(shí)踐，才能真正得出屬于自己的“結(jié)論 “和“標(biāo)準(zhǔn)“，才會(huì)真正深刻理解那些“結(jié)論”的意義所在。代碼寫的多了，自然熟能生巧，也容易形成成熟的技術(shù)觀點(diǎn)。

在這個(gè)過(guò)程中，我們唯一的對(duì)手是懶惰，惰于思考，就無(wú)法真正發(fā)現(xiàn)問(wèn)題，自然形不成自己的觀點(diǎn)。還是那句話，任何規(guī)范、方法、結(jié)論、實(shí)踐都是為了解決項(xiàng)目中的問(wèn)題的，所以，我們所接觸到那些看似“八股文”式的規(guī)范標(biāo)準(zhǔn)也是為了解決某些問(wèn)題而提出的，想清楚這些問(wèn)題，理解方法論背后的“因“，內(nèi)心自然有“果”。

因此，“著眼當(dāng)下、對(duì)癥下藥”的品質(zhì)就顯得彌足珍貴了，比如，雙飛翼布局方法是為了解決一套（html）代碼適應(yīng)多種布局設(shè)計(jì)，這里的布局相對(duì)于固定的產(chǎn)品來(lái)說(shuō)也是固定的，而無(wú)針對(duì)終端的自適應(yīng)（適用于移動(dòng)端的榻榻米布局似乎還沒(méi)有最佳實(shí)踐）。這是雙飛翼產(chǎn)生的背景，如今終端環(huán)境較之5年前已經(jīng)翻天覆地，問(wèn)題早已不在“多種布局”上，而在“終端適應(yīng)“上，這才是我們面臨的問(wèn)題，需要我們給出新的技術(shù)方案。

所以，勤于思考，輕裝上陣，大膽實(shí)踐，勇于創(chuàng)新，發(fā)掘問(wèn)題所在，實(shí)打?qū)嵉慕鉀Q（潛在）問(wèn)題，這才是我們真正需要的能力。放下思維定勢(shì)枷鎖，也會(huì)有一種豁然開(kāi)朗的感覺(jué)。

第二日：科班秀才

【秀才仕途】

Web前端工程師是一個(gè)特別的崗位，只存在于互聯(lián)網(wǎng)領(lǐng)域。最近幾年隨著互聯(lián)網(wǎng)產(chǎn)業(yè)的火爆，對(duì)前端工程師的需求量暴增，兵源幾近枯竭。各大公司技術(shù)掌門一定都有過(guò)類似的苦惱：“招一個(gè)靠譜的前端工程師、難于上青天”。

我想，一部分原因是，當(dāng)前不少入道的前端工程師大都是轉(zhuǎn)行而來(lái)，畢竟，正兒八經(jīng)的學(xué)校里也不會(huì)教這玩意，覺(jué)得“切頁(yè)面”有啥好教的，甚至不覺(jué)得html/css是一門語(yǔ)言。轉(zhuǎn)行這事自不必詳說(shuō)，大家也各自瞄準(zhǔn)當(dāng)前市場(chǎng)需求，造成的現(xiàn)象是，初級(jí)前端工程師堆成山，中高級(jí)人才卻一將難求，計(jì)算機(jī)系的科班出身就更加鳳毛麟角了。一方面反映了教育部門的后知后覺(jué)，另一方面也體現(xiàn)了大部分人急功近利的跟風(fēng)。當(dāng)然最重要的原因是，所謂中國(guó)“第一代前端工程師”并未做好布道的工作。導(dǎo)致大家對(duì)于基礎(chǔ)和潛力的態(tài)度從之前的忽視演變?yōu)槿缃竦拿镆暋Ｋ^基礎(chǔ)，就是在大學(xué)上的那些計(jì)算機(jī)基礎(chǔ)課。所謂潛力，就是戒驕戒躁的務(wù)實(shí)作風(fēng)。這些會(huì)在后文中多次提到。

對(duì)于科班出身的莘莘學(xué)苗來(lái)說(shuō)，根正苗紅本身就是一種優(yōu)勢(shì)，事實(shí)證明，這些人在前端技術(shù)上的成長(zhǎng)軌跡有一定的套路，而且大都能如期的突破技能瓶頸。從一個(gè)人大學(xué)畢業(yè)到他最滿意的工作狀態(tài)，中間會(huì)經(jīng)過(guò)幾個(gè)階段。

前2年是學(xué)習(xí)技能的階段，這個(gè)階段主要精力放在專業(yè)技能的提升上，2年內(nèi)起碼要趕上平均水平，即所謂“中級(jí)“，在這個(gè)階段的人通常對(duì)軟技能不怎么關(guān)注，溝通能力達(dá)不到平均水平，基本上是來(lái)啥活干啥活，干不完就加班的這種，對(duì)需求的合理性不甚理解，對(duì)項(xiàng)目也沒(méi)什么把控，盡管在技能上有提高的空間，也不是公司最需要的人，但有不少成長(zhǎng)空間。

工作2-3年的人在前端技能上趨于穩(wěn)定，也就是技能上的第一次瓶頸，這種人干活熟練，切頁(yè)面可能也很快，代碼看上去也比較規(guī)范，屬于熟練工，開(kāi)始注重溝通技巧和一些職業(yè)技能的積累，比如帶人帶項(xiàng)目，至少有這方面的意識(shí)，并有過(guò)推動(dòng)項(xiàng)目、和業(yè)務(wù)方pk需求的經(jīng)歷，這就達(dá)到了中級(jí)應(yīng)當(dāng)具備的職業(yè)技能，但應(yīng)當(dāng)注意的是，這時(shí)最容易出現(xiàn)偏科的情況，特別是對(duì)于那些“專門切頁(yè)面的“和“專門寫腳本的“人，畢竟html/css/js三者不分彼此，三者是一個(gè)合格前端工程師都必須要掌握的。如果你覺(jué)察到自身有偏廢的嫌疑，則要小心了，要清楚的了解自身的差距，并意識(shí)到瓶頸的存在，為過(guò)渡到“中級(jí)“的打下基礎(chǔ)。

過(guò)了這道坎之后，工作3年以上的人大部分技能也趨穩(wěn)，有些人對(duì)前端新技術(shù)有鉆研，能夠熟練應(yīng)對(duì)日常工作，軟技能也ok，具備有針對(duì)性的“拿來(lái)主義“，代碼也具有一定的架構(gòu)性，開(kāi)始突破“代碼民工”的這一層瓶頸，對(duì)團(tuán)隊(duì)氣氛、培訓(xùn)、工作環(huán)境有個(gè)性化的要求，一般來(lái)講，這種人是典型的具有潛力的“中級(jí)”工程師，但很快會(huì)遇到職業(yè)發(fā)展中的第二個(gè)技術(shù)瓶頸。

有少數(shù)工作3年或4年以上，在不斷尋求新的技能上的突破，最明顯的一點(diǎn)體現(xiàn)是，開(kāi)始關(guān)注“底層協(xié)議”，即HTTP、第三方應(yīng)用、系統(tǒng)對(duì)接、制造工具、工作流程等，這時(shí)思考的重點(diǎn)已經(jīng)脫離了“切頁(yè)面”，變?yōu)椤俺龇桨浮埃热缫茉O(shè)一個(gè)站點(diǎn)，能夠搭建站點(diǎn)框架，預(yù)見(jiàn)站點(diǎn)后續(xù)（前端）開(kāi)發(fā)中的所有風(fēng)險(xiǎn)，并一一給出解決方案。項(xiàng)目后續(xù)開(kāi)發(fā)遇到問(wèn)題只要翻閱你提供的“手冊(cè)”即能找到答案。這種人是標(biāo)準(zhǔn)的“高級(jí)”Web前端工程師。

出方案是一件挺難的事情，它要求一個(gè)工程師同時(shí)具備經(jīng)驗(yàn)、技術(shù)、氣場(chǎng)等諸多硬技能。尤其是對(duì)技術(shù)底子的要求非常高。

【半路出家】

那么，轉(zhuǎn)行做前端的人又當(dāng)如何呢？其實(shí)發(fā)展軌跡和科班秀才們非常類似，只是時(shí)間跨度可能會(huì)長(zhǎng)一些，你要花更多的精力、做更多的項(xiàng)目、更多的反思和總結(jié)才能理解某個(gè)知識(shí)點(diǎn)的本質(zhì)（比如HTTP協(xié)議）。當(dāng)然這只是一般情況。

此外，這些人還需要擺脫很多思維定勢(shì)的禁錮。這里我推薦大家閱讀阿當(dāng)?shù)摹禬eb前端開(kāi)發(fā)修煉之道》。當(dāng)然，如果你有一個(gè)靠譜的師兄帶你入道，自然幸運(yùn)萬(wàn)倍。

但不管怎樣，我始終認(rèn)為應(yīng)當(dāng)秉承興趣第一的原則，不管你是誤打誤撞、還是意欲為之，不管你是科班秀才、還是半路出家，興趣始終應(yīng)當(dāng)是第一原則，然后才是你“想做好“。我對(duì)自己的要求無(wú)法強(qiáng)加于人，所以很多業(yè)界大牛在回顧自己成功之路時(shí)，提到最多的是：“熱愛(ài)你的工作、擁抱它給你帶來(lái)的挑戰(zhàn)”。N.C.Zakas曾經(jīng)這樣勉勵(lì)大家：

“我對(duì)Web開(kāi)發(fā)人員最大的建議就是：熱愛(ài)你的工作。熱愛(ài)跨瀏覽器開(kāi)發(fā)帶來(lái)的挑戰(zhàn)、熱愛(ài)互聯(lián)網(wǎng)技術(shù)的種種異端，熱愛(ài)業(yè)內(nèi)的同行，熱愛(ài)你的工 具。互聯(lián)網(wǎng)發(fā)展太快了，如果你不熱愛(ài)它的話，不可能跟上它的步伐。這意味著你必須多閱讀，多動(dòng)手，保證自己的才能與日俱增。下了班也不能閑著，要做一些對(duì)自己有用的 事兒。可以參與一些開(kāi)源軟件的開(kāi)發(fā)，讀讀好書，看看牛人的博客。經(jīng)常參加一些會(huì)議，看看別人都在干什么。要想讓自己快速成長(zhǎng)，有很多事兒可以去做，而且付出一定會(huì)有回報(bào)。“

第三日，幸福感

【先精通十行？！】

興趣第一，聽(tīng)上去很美，但現(xiàn)實(shí)卻不總是這么酷。練就了一身本領(lǐng)，那也要找到對(duì)口的怪物來(lái)打一打才過(guò)癮。

自然，每個(gè)人都想做出好東西，每個(gè)工程師也都渴求這樣的機(jī)遇，用層次分明的設(shè)計(jì)、漂亮優(yōu)雅的代碼、精妙的細(xì)節(jié)雕琢，做出美觀、安全、實(shí)用耐用的產(chǎn)品，不過(guò)現(xiàn)實(shí)是如此殘酷，以至于工程師們一直都缺乏對(duì)產(chǎn)品的歸屬感。作為前端工程師，如何才能在江湖中把握住前進(jìn)方向、步步走高？畢竟，在職位繁雜的大公司，缺乏人性化的工作流程影響著工程師的工作幸福感。產(chǎn)品從設(shè)計(jì)之初、到技術(shù)方案評(píng)審、再到實(shí)現(xiàn)，處處充滿了妥協(xié)，大部分產(chǎn)品都是雜交的產(chǎn)物，人與人相互掣肘，每個(gè)人都對(duì)產(chǎn)品不滿意……，大躍進(jìn)式的敏捷開(kāi)發(fā)早就被證明百害無(wú)一利。但，或許這就是成長(zhǎng)的代價(jià)。年輕的工程師需要更多的了解需求和設(shè)計(jì)、產(chǎn)品經(jīng)理更要懂得軟件迭代規(guī)律。對(duì)于前端工程師來(lái)講更是如此，多學(xué)習(xí)交互設(shè)計(jì)和UI，多了解網(wǎng)絡(luò)協(xié)議和軟件迭代模型，更能幫助前端工程師和需求方溝通、和后臺(tái)的銜接、以及控制版本的迭代。

說(shuō)來(lái)奇怪，前端工程師不是寫html/css/js的嗎，搞懂那些邊緣知識(shí)有什么用？《Web前端開(kāi)發(fā)修煉之道》中也提到，精通一行需要先精通十行。這里我來(lái)解釋一下原因。

作為交互設(shè)計(jì)師的下游，前端工程師學(xué)需要習(xí)設(shè)計(jì)知識(shí)是很容易理解的，因?yàn)樗軒椭愀鼫?zhǔn)確的理解設(shè)計(jì)師的意圖，在原型不完整的時(shí)候也能正確的反饋設(shè)計(jì)缺陷，將問(wèn)題阻擋在設(shè)計(jì)的環(huán)節(jié)，會(huì)大大減少UI bug數(shù)量，比如說(shuō)，設(shè)計(jì)師會(huì)給出理想狀態(tài)下的容器樣式，卻往往忽略了文字溢出折行、長(zhǎng)連續(xù)字符、容器寬高是否適應(yīng)內(nèi)容尺寸變化而變化，溢出部分是作截字還是隱藏等諸多細(xì)節(jié)，因?yàn)樵O(shè)計(jì)師不懂“邊界值測(cè)試”的道理，而這些問(wèn)題往往在測(cè)試階段才被發(fā)現(xiàn)，所以，如果能在拿到UI設(shè)計(jì)稿時(shí)就提醒設(shè)計(jì)師補(bǔ)充完整這些場(chǎng)景，自然減少測(cè)試回歸次數(shù)。

另外，前端工程師必須要了解網(wǎng)絡(luò)協(xié)議，原因很簡(jiǎn)單，我們做的產(chǎn)品運(yùn)行在Web上。很多依賴于Ajax的實(shí)現(xiàn)，只有前端工程師才會(huì)提出實(shí)現(xiàn)方案，產(chǎn)品經(jīng)理不了解技術(shù)瓶頸，后臺(tái)工程師更不會(huì)在意客戶端的用戶體驗(yàn)，舉個(gè)簡(jiǎn)單的例子：通過(guò)JS實(shí)現(xiàn)一個(gè)Ajax，如果Ajax抓取的數(shù)據(jù)源是一個(gè)302跳轉(zhuǎn)，則需要在JS程序中多做一些事情，這就需要前端工程師了解一些HTTP協(xié)議。應(yīng)當(dāng)說(shuō)，這是很常見(jiàn)的一個(gè)場(chǎng)景。

那么，為什么說(shuō)前端工程師也要關(guān)注代碼版本控制呢？因?yàn)閣eb開(kāi)發(fā)和軟件開(kāi)發(fā)本質(zhì)無(wú)異，同樣具有迭代周期，需求不是一攬子提完、一口氣開(kāi)發(fā)完的，是有步驟的開(kāi)發(fā)，因此，每次上線開(kāi)發(fā)哪些功能、為后續(xù)擴(kuò)展功能留足哪些接口、代碼在可擴(kuò)展和可維護(hù)性上應(yīng)當(dāng)作哪些考慮……，這些應(yīng)當(dāng)是每個(gè)工程師關(guān)注的事情，所謂迭代就是指這種需求的疊加，這是軟件開(kāi)發(fā)的常態(tài)，也是web開(kāi)發(fā)的常態(tài)，剛開(kāi)始，前端工程師總會(huì)不斷抱怨沒(méi)完沒(méi)了的需求，代碼起初還算干凈，但很快就越來(lái)越亂，代碼的版本管理對(duì)于Web前端工程師來(lái)說(shuō)有些困難，這也使得大部分前端工程師很難上檔次，從這個(gè)角度講，前端工程師是需要向后臺(tái)工程師學(xué)習(xí)的，他們的開(kāi)發(fā)量不比前端少，維護(hù)代碼的能力要超過(guò)前端工程師。另外，對(duì)于剛?cè)胄械那岸斯こ處煟膽B(tài)要放對(duì)，提需求是產(chǎn)品經(jīng)理的職責(zé)所在，整理出有價(jià)值的需求是交互設(shè)計(jì)師的職責(zé)所在，將需求作版本控制分步實(shí)現(xiàn)是前端工程師的職責(zé)所在，前端工程師沒(méi)必要去抱怨產(chǎn)品經(jīng)理提一大堆沒(méi)規(guī)律的需求，而更應(yīng)當(dāng)去理解需求緣由，將需求提煉成UC（用例），讓需求在自己手中可控制。只是多數(shù)前端工程師缺乏提煉、整理需求的能力，一味的在接需求，才會(huì)搞的手忙腳亂，帶著情緒堆代碼。

所以，只有練就了一身本領(lǐng)，才會(huì)更有目標(biāo)的去尋找對(duì)產(chǎn)品的責(zé)任感和對(duì)團(tuán)隊(duì)的歸屬感，不要誤以為能切出漂亮的頁(yè)面就是能力的提高，純粹的寫代碼每個(gè)人都差不多的，要成為合格的工程師，眼界要進(jìn)一步放開(kāi)，前端工程師能做的，不僅僅是切頁(yè)面而已，作一個(gè)精品項(xiàng)目，一定不乏專業(yè)的過(guò)程把控，這也是大多數(shù)人最易忽略的地方。

【勵(lì)志之本】

其實(shí)，除了個(gè)人需要明確努力的方向，每個(gè)人都更渴望身處一個(gè)好團(tuán)隊(duì)，誰(shuí)都不希望有豬一樣的隊(duì)友。我們都很羨慕處身這樣的團(tuán)隊(duì)，可以放心的將精力放在純粹的技術(shù)上，身邊每個(gè)人都自覺(jué)的補(bǔ)充文檔注釋，代碼也層次清晰解偶充分重用率高，精妙的設(shè)計(jì)實(shí)現(xiàn)可以更快的傳播，bug得到的改進(jìn)建議也是務(wù)實(shí)專業(yè)的，技術(shù)在這種良性互動(dòng)中價(jià)值倍增。我想這也算是好團(tuán)隊(duì)的一種境界了，這有賴于團(tuán)隊(duì)成員水平水漲船高。不過(guò)，反觀Yahoo的成長(zhǎng)之路，他們的技術(shù)積淀也是靠點(diǎn)滴的積累，其實(shí)他們當(dāng)初的狀況不比現(xiàn)在的我們好哪去，10年的進(jìn)化，才造就了Yahoo技術(shù)團(tuán)隊(duì)的專業(yè)性和Hack精神，我們每個(gè)人才剛剛起步而已。為了積攢工作中的幸福感，多付出一些是值得的。

但我猜，你現(xiàn)在的處境一定不會(huì)太過(guò)樂(lè)觀，產(chǎn)品亂提需求、一句話的PRD、不被重視，被生硬的當(dāng)作“資源“……反正，情況就是這么個(gè)情況，要么你選擇抱怨下去，要么想辦法去改變。“積極主動(dòng)“是源自內(nèi)心的一種堅(jiān)韌品質(zhì)，也是勵(lì)志之本，有些人在現(xiàn)實(shí)中被磨平了理想，有些人卻在黑暗森林中找到了方向，這就是犬儒主義和英雄氣概之間的差別。這自不必詳說(shuō)，因?yàn)檫@讓我想起了“大長(zhǎng)今”，這簡(jiǎn)直就是前端工程師的勵(lì)志典范：“這是一個(gè)可怕的環(huán)境，足以消磨任何人的斗志和信念，所有來(lái)這里的人都變得麻木和無(wú)所作為，‘多栽軒‘惡劣的環(huán)境沒(méi)有改變長(zhǎng)今，但長(zhǎng)今卻改變了‘多栽軒‘所有的人“。

如果你想做到“資深”，就一定要想清楚這一點(diǎn)，因?yàn)槟闶菆F(tuán)隊(duì)的頂梁柱（業(yè)務(wù)），也是幸福感的源頭（士氣）。

第四日，架構(gòu)和偽架構(gòu)

【代碼設(shè)計(jì)的本質(zhì)】

讀到這里，你不禁會(huì)問(wèn)，前端領(lǐng)域存在“架構(gòu)師”嗎？這個(gè)問(wèn)題會(huì)在后面的“碼農(nóng)的宿命”中展開(kāi)解釋。這里先說(shuō)下代碼架構(gòu)的一些瑣事吧。

什么是架構(gòu)？架構(gòu)是由“架”和“構(gòu)”組成，架，即元件，構(gòu)，即連接件。因此，架構(gòu)即是將總體分解為單元，然后定義單元之間的連接方式。架構(gòu)的含義源自禪宗，而禪宗的基本信條則之一就是真理是無(wú)法用語(yǔ)言來(lái)描述的。這個(gè)基本信條有其背景，即語(yǔ)言具有某種抽象性。而人們對(duì)這種抽象性的悟道則直接影響對(duì)事物的看法，進(jìn)而決定了對(duì)客觀世界的分解方法。

而在編程語(yǔ)言中，同樣存在這種禪宗所隱喻的悖論。在面向?qū)ο蟮慕炭茣校ǔＥe一些顯而易見(jiàn)的例子，比如“水果”是一個(gè)類，包含有蘋果、桔子、香蕉等實(shí)例，“蔬菜”也是一個(gè)類，包含白菜、冬瓜、茄子等實(shí)例。這兩個(gè)類之間并無(wú)交集，因此很容易理解。但實(shí)際項(xiàng)目中情況要復(fù)雜的多，比如兩個(gè)圖書類目“文學(xué)”和“歷史”，那么“明朝那些事”應(yīng)當(dāng)是“文學(xué)”類的實(shí)例還是“歷史”類的實(shí)例呢？即一旦用語(yǔ)言說(shuō)出了某一事物，即人為的割裂了世界，于是就會(huì)陷入迷途。這在程序設(shè)計(jì)領(lǐng)域情況更甚，也是造成混亂的主要根源，也就是說(shuō)，如果你的程序可擴(kuò)展性不好，一定是程序作者對(duì)“單元”的定義不夠準(zhǔn)確，即單元的概念之間不夠“正交”。而這種架構(gòu)終是徒有其形，根基不穩(wěn)。

因此，變量和類的命名才是真正考驗(yàn)架構(gòu)功力的關(guān)鍵（命名是否準(zhǔn)確清晰、單元之間是否有概念重疊或盲區(qū)），而和所謂“組合”、“繼承”、“橋接”等模式化的“外表”無(wú)本質(zhì)聯(lián)系。

【偽架構(gòu)】

實(shí)際情況是，程序員早早的就想讓自己和“架構(gòu)”扯上關(guān)系，并自封xx架構(gòu)師。在項(xiàng)目中應(yīng)用各種模式分層、解耦方法，每個(gè)項(xiàng)目都可以產(chǎn)出一套看上去很復(fù)雜的“架構(gòu)圖”，感覺(jué)很牛逼的樣子，沒(méi)錯(cuò)，實(shí)踐這些方法論總不是壞事，但世界觀才是方法論的基礎(chǔ)，只有在概念上對(duì)產(chǎn)品模塊有科學(xué)的定義，方法論便自然形成了，《編程珠璣》中一再提及數(shù)據(jù)結(jié)構(gòu)就是靜態(tài)的算法，在Web前端領(lǐng)域亦是如此，在頁(yè)面的建模過(guò)程中，定義分解維度要比分解方法更加基礎(chǔ)和重要。我想阿當(dāng)可以在《Web前端開(kāi)發(fā)修煉之道》的第二版里加上這部分內(nèi)容。

真正的高手用記事本就能寫出高質(zhì)量的代碼、用cvs就能做到完美的版本控制、用字典式的分解就能做好系統(tǒng)架構(gòu)，我想，這正是劍宗一派的最高境界吧。

第五日：尋找突破

【動(dòng)心忍性】

技術(shù)流派看上去是如此吸引人，高手就像俠客一般，來(lái)去如風(fēng)瀟灑自如。但反觀自己怎么看怎么沒(méi)有俠客那股范兒。盡管上文提到了一些道理，了解這些盡管不是壞事，但缺少實(shí)踐總感覺(jué)是紙上談兵。更何況，日常的工作又是枯燥無(wú)味、繁雜單調(diào)。每個(gè)人都盼望更高的目標(biāo)、接觸新鮮技術(shù)、將新技術(shù)運(yùn)用到日常，在探索嘗試之中尋找成就感。這種感覺(jué)可以理解，但卻缺少更深層次的思考。因?yàn)樵降阶詈笤綍?huì)發(fā)現(xiàn)一線的工作才是最有挑戰(zhàn)的。當(dāng)然，我說(shuō)這話的前提是，你能如前文所說(shuō)具備合格的軟技能，需要一些技巧讓工作變得工整有序、節(jié)奏健康，這樣你才能將注意力放在純粹的代碼中，擺脫了外界的煩擾，方能從技術(shù)的角度思考突破。這也是從初級(jí)到高級(jí)的進(jìn)化過(guò)程需要大量的歷練的原因。正如玉伯所說(shuō)，“枯燥是創(chuàng)新的源泉。如果你發(fā)現(xiàn)自己沒(méi)什么新想法，做事缺少激情，很可能是因?yàn)槟氵€未曾體驗(yàn)過(guò)真正的枯燥的工作”。

關(guān)于如何尋找突破，我的建議是馬上動(dòng)手做、不要等，相信自己的直覺(jué)（這里和上文提到的先思后行是兩碼事）。比如，Slide幻燈控件理應(yīng)支持觸屏事件以更好的適應(yīng)移動(dòng)終端，或許你在用的Slide幻燈版本很舊、或者時(shí)間不允許、再或者你害怕對(duì)Slide改造而引入bug，不要擔(dān)心，大不了多花業(yè)余時(shí)間，只要想，只要感覺(jué)合理和必要，就去做。因?yàn)檫@個(gè)過(guò)程帶來(lái)的編程體驗(yàn)才是工程師們獨(dú)有的美妙體味。我現(xiàn)在還時(shí)常深夜寫代碼，沒(méi)有打擾、思如泉涌、代碼也更加工整嚴(yán)謹(jǐn)，不失為一種享受。因此，用眼睛去觀察，用心去感觸，“所以動(dòng)心忍性，才會(huì)增益其所不能”啊。

【得與失】

互聯(lián)網(wǎng)的發(fā)展的確太快，Web前端技術(shù)也在花樣翻新，有人經(jīng)不起誘惑，開(kāi)始做新的嘗試。前端技術(shù)雖然范圍廣，但各個(gè)分支都還比較容易入門，比如服務(wù)器端腳本編程、再比如純粹的WebApp，我認(rèn)為這兩者都是前端技術(shù)的范疇，畢竟他們都沒(méi)有脫離“瀏覽器”，或者說(shuō)類似瀏覽器的環(huán)境。NodeJS依賴于V8，WebApp更是軟件化的WebPage。只要打好基礎(chǔ)，這些方向都是值得深入鉆研的，因?yàn)椋ヂ?lián)網(wǎng)的形態(tài)越發(fā)多元，新的技術(shù)總能找到用武之地，這就要憑借自己的技術(shù)嗅覺(jué)和產(chǎn)品直覺(jué)，尋找技術(shù)和業(yè)務(wù)的契合點(diǎn)。

這看上去是一種放棄，放棄了自己賴以生存的鐵飯碗（熟練的切頁(yè)面至少不會(huì)失業(yè)），實(shí)則不然。這種想法是一種誤區(qū)，新的選擇并不會(huì)讓你放棄什么，就像學(xué)會(huì)了開(kāi)車，并不意味著就不會(huì)騎車了。其實(shí)改變的是思維方式而已，是一種進(jìn)步，如果你能想通這一點(diǎn)，你也能跟得上互聯(lián)網(wǎng)發(fā)展的腳步了，打開(kāi)你的思維，讓技術(shù)變成你的金剛鉆，而不是包袱。

所以，所謂得失之間的權(quán)衡，其實(shí)就是“解放思想”。做到了這一點(diǎn)，那么你已經(jīng)在做“技術(shù)驅(qū)動(dòng)”了。

【誤區(qū)】

但是，不要高興的太早，“技術(shù)驅(qū)動(dòng)”是需要大量的積累和經(jīng)驗(yàn)的。在入行初期，很多人過(guò)于著迷與此，從而陷入了迷途。比如有人糾結(jié)于是否將dt、dd的樣式清除從reset.css中拿掉，原因是覺(jué)得這兩個(gè)標(biāo)簽的清除樣式會(huì)耗費(fèi)一些渲染性能；或者是否需要將for循環(huán)改為while循環(huán)以提高js執(zhí)行速度。盡管這些考慮看上去是合理的，但并不是性能的瓶頸所在，也就是說(shuō)，你花了很大力氣重構(gòu)的代碼帶來(lái)的頁(yè)面性能提升，往往還不如將兩個(gè)css文件合成一個(gè)帶來(lái)的提升明顯。就好比用一把米尺量東西，沒(méi)必要精確到小數(shù)點(diǎn)后10位，因?yàn)榫_到小數(shù)點(diǎn)后2位就已經(jīng)是不準(zhǔn)確的了。這種技術(shù)誤區(qū)常常讓人撿了芝麻丟了西瓜。

話說(shuō)回來(lái)，這里提到的懷疑權(quán)威的精神是絕對(duì)應(yīng)當(dāng)鼓勵(lì)的，但不應(yīng)當(dāng)止于表象，如果懷疑dt的清除樣式會(huì)對(duì)性能帶來(lái)影響，就應(yīng)當(dāng)想辦法拿到數(shù)據(jù)，用事實(shí)來(lái)證明自己的猜測(cè)。數(shù)據(jù)是不會(huì)騙人的。而求證過(guò)程本身就是一種能力的鍛煉。

【技術(shù)驅(qū)動(dòng)】

說(shuō)到這里，你大概對(duì)“技術(shù)驅(qū)動(dòng)”有那么一點(diǎn)點(diǎn)感覺(jué)了。身邊太多人在抱怨“公司不重視前端”、公司不是技術(shù)驅(qū)動(dòng)的、技術(shù)沒(méi)機(jī)會(huì)推動(dòng)產(chǎn)品業(yè)績(jī)、我的價(jià)值得不到體現(xiàn)？

什么是技術(shù)驅(qū)動(dòng)？簡(jiǎn)單講，就是技術(shù)對(duì)業(yè)務(wù)有積極推動(dòng)作用。更多的是工程師發(fā)起、工程師影響、工程師負(fù)責(zé)。剛才提到的用數(shù)據(jù)說(shuō)話只是一種“驅(qū)動(dòng)”技巧，那么我需要何種數(shù)據(jù)，數(shù)據(jù)從哪里來(lái)？我來(lái)分享一個(gè)實(shí)際的場(chǎng)景吧。

工程師A被委派一個(gè)重要的頻道首頁(yè)，因?yàn)槭切履臧妫砸s在年前上線。A學(xué)了一點(diǎn)點(diǎn)響應(yīng)式設(shè)計(jì)，想在這次重構(gòu)中加上，但誰(shuí)也沒(méi)做過(guò)響應(yīng)式設(shè)計(jì)，需求方根本不懂，設(shè)計(jì)師也懵懵懂懂，交互設(shè)計(jì)師太忙，做完交互稿就忙別的去了。A糾結(jié)了，按部就班的把項(xiàng)目做完上線發(fā)布，盡管不會(huì)出什么問(wèn)題，但總覺(jué)少點(diǎn)什么。這時(shí)A做了兩個(gè)決定，1，我要按時(shí)完成項(xiàng)目，2，趁機(jī)實(shí)踐我在響應(yīng)式設(shè)計(jì)中的想法和思考，若成功，作為附加值贈(zèng)送給需求方，若失敗，權(quán)當(dāng)技術(shù)玩具耍一耍罷了。所以A熟練的提前完成了項(xiàng)目，剩下的時(shí)間開(kāi)始考慮如何將首頁(yè)適應(yīng)到各個(gè)平臺(tái)中，視覺(jué)設(shè)計(jì)是一大難題，他用吃飯的時(shí)間找了設(shè)計(jì)師收集建議，對(duì)窄屏中的內(nèi)容模塊做了看似合理的編排，代碼上hack一下，能夠正確適配，就發(fā)布上線了。這件事情需求方不知道，視覺(jué)設(shè)計(jì)師也不了解，交互設(shè)計(jì)師更沒(méi)工夫操心。A感覺(jué)挺爽，開(kāi)始給工程師弟兄們到處?kù)乓@個(gè)好玩的功能，B看了問(wèn)，手機(jī)端訪問(wèn)量如何，A覺(jué)得這個(gè)問(wèn)題有道理，就去部署埋點(diǎn)，一周后拿到數(shù)據(jù)出奇的意外，首先，移動(dòng)段的訪問(wèn)量穩(wěn)步增加，趨勢(shì)健康，再者，移動(dòng)端首屏焦點(diǎn)廣告位的點(diǎn)擊率較PC端高了近一倍，這個(gè)數(shù)據(jù)讓A喜出望外，興奮的拿著報(bào)表找到交互設(shè)計(jì)師C和市場(chǎng)研究的同事D，D看了報(bào)表之后立即啟動(dòng)一個(gè)項(xiàng)目，專門調(diào)研公司全站響應(yīng)式設(shè)計(jì)頁(yè)面在PC端和移動(dòng)端的點(diǎn)擊率、PV、UV趨勢(shì)方面的影響……后來(lái)發(fā)生的事情就都水到渠成了，設(shè)計(jì)師C開(kāi)始注意設(shè)計(jì)頁(yè)面交互時(shí)（至少是有條件的考慮）對(duì)移動(dòng)端的適配，D的調(diào)研報(bào)告也放到了UED老大的案頭……接下來(lái)的事情，你懂得。A被指派要出一套響應(yīng)式最佳實(shí)踐和規(guī)范，最終，A走在了技術(shù)的前沿，也因此拿到了好績(jī)效。

這件事情就是一個(gè)典型的技術(shù)驅(qū)動(dòng)的例子。誰(shuí)不讓你玩技術(shù)了，誰(shuí)不重視你了，誰(shuí)把你當(dāng)工具了，誰(shuí)覺(jué)得你的代碼沒(méi)價(jià)值？這世界只有自己把自己看扁，誰(shuí)想跟你這個(gè)蠅頭小卒過(guò)不去？用實(shí)力說(shuō)話，用數(shù)據(jù)說(shuō)話，用獨(dú)到的見(jiàn)解說(shuō)話，想不做技術(shù)驅(qū)動(dòng)都難。

第六日：碼農(nóng)的宿命

【青春飯】

“碼農(nóng)”是IT從業(yè)者一個(gè)自嘲的稱號(hào)，也有從事沒(méi)有發(fā)展前景的軟件開(kāi)發(fā)職位，靠寫代碼為生的意思。但我認(rèn)為碼農(nóng)是一個(gè)愛(ài)稱，編碼的農(nóng)民，和農(nóng)民一樣有著執(zhí)著純真樸實(shí)豪爽的共性，僅僅分工不同而已。就好比農(nóng)業(yè)社會(huì)對(duì)糧食的依賴，工業(yè)化進(jìn)程對(duì)計(jì)算機(jī)應(yīng)用也有著很強(qiáng)的依賴，大量的需求催生出這樣一群人。他們有智慧的大腦，對(duì)于編程，設(shè)計(jì)，開(kāi)發(fā)都有著熟練的技巧，但多數(shù)人看來(lái)，碼農(nóng)的特點(diǎn)是：

1，收入低

2，工作單調(diào)

3，工作時(shí)間長(zhǎng)

實(shí)際上這個(gè)描述非常片面，或者說(shuō)是外行看熱鬧。第一，全行業(yè)比較來(lái)看，軟件開(kāi)發(fā)領(lǐng)域收入為中等偏上；第二，程序員一般都是有癖好的，沉浸在自己的癖好中是不會(huì)感覺(jué)單調(diào)的；第三，程序員有一定的時(shí)間自由度（如果你是一名合格的程序員的話），至少不會(huì)像流水生產(chǎn)線工人一樣。其實(shí)，通過(guò)幾十年的發(fā)展，我們對(duì)程序員的定義更加科學(xué)，比如很多IT企業(yè)都開(kāi)始建立詳細(xì)的JM（Job Module），即職級(jí)模型，程序員沿著專業(yè)方向可以走到很高，甚至可以說(shuō)，程序員是可以被當(dāng)成一生的事業(yè)的。

然而，有一個(gè)非常普遍的觀點(diǎn)是，程序員和做模特一樣是吃青春飯的，到了三十歲就要考慮轉(zhuǎn)行或者轉(zhuǎn)管理。盡管這種觀點(diǎn)頗具欺騙性，但至少它對(duì)一種人是適用的，即入錯(cuò)了行的人。如果你骨子里不想寫程序，就算年紀(jì)輕輕為了生計(jì)寫幾年代碼，之后肯定會(huì)另有他途。心非所屬則不必勉強(qiáng)，但問(wèn)題是，即便如此，你知道你的心之所屬嗎？

我們知道，一個(gè)成熟的產(chǎn)業(yè)一定需要各色崗位來(lái)支撐，若要成熟，則需要時(shí)間的沉淀，比如實(shí)體經(jīng)濟(jì)制造業(yè)，創(chuàng)意、生產(chǎn)線、高級(jí)技工、技術(shù)管理四個(gè)方面都產(chǎn)出大量的高級(jí)人才。因?yàn)闅v史悠久，我們能看得到。而軟件產(chǎn)業(yè)則不然，九成以上是剛出道的新手，并沒(méi)有太多“高級(jí)”和“資深”的具體樣板可供參照，在前端開(kāi)發(fā)領(lǐng)域中情況更甚，絕大部分人根本搞不清楚什么樣才是“資深”前端工程師，相比傳統(tǒng)軟件行業(yè)近四十年的進(jìn)化，我不相信僅有幾年光景的前端技術(shù)崗位能產(chǎn)出多少貨真價(jià)實(shí)的“資深”。但互聯(lián)網(wǎng)崛起速度太快，還沒(méi)有等技術(shù)基礎(chǔ)打牢，互聯(lián)網(wǎng)形態(tài)就又花樣翻新了，這種變化是一種常態(tài)，而崗位的設(shè)定也在這種變化之中自然的優(yōu)勝劣汰，比如兩年前可能還難以想象數(shù)據(jù)部門會(huì)需要前端工程師，他們甚至不直接和瀏覽器打交道。前端工程師需要適應(yīng)這種變化帶來(lái)的觀念沖擊，不要以為自己只能做切頁(yè)面、或者只會(huì)給頁(yè)面搞重構(gòu)、只會(huì)搞兼容性，要把自己放在整個(gè)軟件行業(yè)來(lái)看。

所以，由于歷史“不悠久”導(dǎo)致的崗位模糊本身不是什么大問(wèn)題，崗位的演化本身就包含在互聯(lián)網(wǎng)的發(fā)展軌跡之中。所以，當(dāng)今的互聯(lián)網(wǎng)IT狀況，就好比移動(dòng)終端的大哥大時(shí)代、云計(jì)算的肉雞時(shí)代、或者桌面操作系統(tǒng)的DOS時(shí)代。因此，前端工程師當(dāng)前要?jiǎng)?wù)是要想清楚看清楚，在互聯(lián)網(wǎng)中我能做什么，而不是作為前端工程師我能做什么，所以，從這個(gè)角度講，技術(shù)是一個(gè)工具，放大來(lái)看，技術(shù)也只是你職業(yè)生涯中很小的組成部分，而你的從業(yè)積累、和知識(shí)面的廣度深度才是你隨著時(shí)間的推移慢慢步入“資深”的原因所在，而不是寫了個(gè)什么框架就變“資深”了。如果有一天互聯(lián)網(wǎng)形態(tài)固定了，它的崗位可能真正就定型了，才會(huì)有真正清晰的職能邊界，就像藍(lán)色巨人IBM中的各色崗位一樣，邊界清晰，權(quán)責(zé)分明，普通程序員只能實(shí)現(xiàn)接口而無(wú)機(jī)會(huì)設(shè)計(jì)接口、低層級(jí)的工程師也無(wú)機(jī)會(huì)躍進(jìn)式的接觸項(xiàng)目架構(gòu)、技術(shù)經(jīng)理人也不能輕易對(duì)產(chǎn)品有決策性影響，到這時(shí)，人的能力才真正的被限制在方圓之內(nèi)，容不得越界，這種環(huán)境下人的成長(zhǎng)非常緩慢。根本不會(huì)有像今天互聯(lián)網(wǎng)亂局之中所提倡的創(chuàng)新、革命、成長(zhǎng)和思想解放。簡(jiǎn)單講，一旦產(chǎn)業(yè)定型，就不太需要很多“創(chuàng)造”了，更多的是“維護(hù)”。所以，我個(gè)人寧愿互聯(lián)網(wǎng)IT“黑暗”的中世紀(jì)越久越好，至少對(duì)于年輕氣盛程序員來(lái)說(shuō)，黑暗的叢林環(huán)境才是真正的自然進(jìn)化最理想的土壤，這時(shí)我想起了狄更斯在“雙城記”中的開(kāi)篇。

“這是最好的時(shí)代，這是最壞的時(shí)代；這是智慧的時(shí)代，這是愚蠢的時(shí)代；這是信仰的時(shí)期，這是懷疑的時(shí)期；這是光明的季節(jié)，這是黑暗的季節(jié)；這是希望之春，這是失望之冬；人們面前有著各樣事物，人們面前一無(wú)所有；人們正在直登天堂，人們正在直下地獄”。

【半路出家的危與機(jī)】

然而，不管怎樣，信心的樹(shù)立不是一蹴而就的，對(duì)于轉(zhuǎn)行做前端的人來(lái)說(shuō)更是如此。俗話說(shuō)，隔行入隔山。每個(gè)行業(yè)自有其道，自然不是想做就做。前端技術(shù)領(lǐng)域半路出家者非常多，我們來(lái)分析一下轉(zhuǎn)行的心理。第一，看到前端技術(shù)入門簡(jiǎn)單、互聯(lián)網(wǎng)對(duì)前端技術(shù)的需求缺口巨大；第二，前端技術(shù)所見(jiàn)即所得、感覺(jué)學(xué)習(xí)起來(lái)很快；第三，我身邊的某某轉(zhuǎn)行作前端看上去不錯(cuò)、我似乎也可以；第四，我不喜歡我現(xiàn)在做的工作、想換行業(yè)、正好前端技術(shù)上手較快，就選他吧；第五，我真的喜歡做Web前端，為它付出再多都是值得的。

轉(zhuǎn)行者的心態(tài)比較容易走兩個(gè)極端，一是只看到新行業(yè)的好，二是只覺(jué)得原工作很糟糕。但不管是什么行業(yè)的轉(zhuǎn)行，對(duì)自己的職業(yè)規(guī)劃的思考都應(yīng)當(dāng)先行一步。即務(wù)必首先清晰的回答這些問(wèn)題：

1，我能做什么？

2，我不能做什么？

3，我的優(yōu)勢(shì)是什么？

4，我的劣勢(shì)是什么？

5，做新行業(yè)對(duì)我有何好處？

6，換行會(huì)讓我付出何種代價(jià)？

7，如何定義轉(zhuǎn)行成功？

因?yàn)槊嬖嚨臅r(shí)候一定會(huì)被這些問(wèn)題所挑戰(zhàn)。如果支支吾吾說(shuō)不清楚，要么是對(duì)自己未來(lái)不負(fù)責(zé)任，要么骨子里就是草根一族，習(xí)慣做什么都蜻蜓點(diǎn)水淺嘗輒止，也難讓人信服你的轉(zhuǎn)行是一個(gè)權(quán)衡再三看起來(lái)合理的選擇。我無(wú)法幫每個(gè)人回答這些問(wèn)題，但至少有兩點(diǎn)是確定的，第一，Web前端技術(shù)是一個(gè)朝陽(yáng)行業(yè)，絕對(duì)值得義無(wú)反顧的堅(jiān)持下去；第二，你將經(jīng)歷從未有過(guò)的枯燥、苛刻的歷練，所謂痛苦的“行弗亂其所為“階段。不過(guò)話說(shuō)回來(lái)，經(jīng)歷過(guò)高考的人，還怕個(gè)屁啊。

有心之人自有城府、懂得放棄，看得清大勢(shì)中的危機(jī)、識(shí)得懂繁華里的機(jī)遇。尤其當(dāng)立足于Web前端技術(shù)時(shí)，這種感覺(jué)就愈發(fā)強(qiáng)烈。因?yàn)閲?guó)內(nèi)外前端技術(shù)領(lǐng)域從2000年至今一直非常活躍，前端技術(shù)前進(jìn)的步伐也很快，對(duì)于一些人來(lái)說(shuō)，不管你是在大公司供職還是創(chuàng)業(yè)，不管你是在接外包項(xiàng)目還是自己寫開(kāi)源項(xiàng)目，從轉(zhuǎn)行到跟得上新技術(shù)的腳步是有一些方法和“捷徑”的。

第一，梳理知識(shí)架構(gòu)

我們知道知識(shí)積累有兩種思路，第一種是先構(gòu)建知識(shí)面、建立技術(shù)體系的大局觀，即構(gòu)建樹(shù)干，然后分別深入每一個(gè)知識(shí)點(diǎn)，即構(gòu)建枝葉，最終形成大樹(shù)。第二種是先收集知識(shí)點(diǎn)，越多越好，最后用一根線索將這些知識(shí)點(diǎn)串接起來(lái)，同樣形成大樹(shù)。第一種方法比較適合科班秀才，第二種方法則更適合轉(zhuǎn)行作前端的人，即實(shí)踐先行，理論升華在后。比如對(duì)“IE6怪異模式“這條線索來(lái)說(shuō)，要首先將遇到的IE6下的樣式bug收集起來(lái)，每個(gè)bug都力爭(zhēng)寫一個(gè)簡(jiǎn)單的demo復(fù)現(xiàn)之，等到你收集到第100個(gè)bug的時(shí)候，再笨的人都能看出一些規(guī)律，這時(shí)就會(huì)自然的理解IE的hasLayout、BFC和各種bug的原因、你就成為了IE6的hack專家了，當(dāng)你成為100個(gè)知識(shí)線索的專家的時(shí)候，你已經(jīng)可以稱得上“資深”的水平了。我們知道，10個(gè)人中有9個(gè)是堅(jiān)持不下來(lái)的，他們會(huì)以項(xiàng)目忙等各種理由萬(wàn)般推托，將自己硬生生的限制在草根一族，坐等被淘汰。所以，對(duì)于立志作前端的人來(lái)說(shuō)，這種點(diǎn)滴積累和梳理知識(shí)非常重要。

第二，分解目標(biāo)

將手頭的工作分解為幾部分來(lái)看待，1，基本技能，2，項(xiàng)目經(jīng)驗(yàn)，3，溝通能力，4，主動(dòng)性和影響力。想清楚做一件事情你想在哪方面得到歷練，比如，我之前在做第一次淘寶彩票常規(guī)性重構(gòu)的時(shí)候（正好是一次視覺(jué)和交互上的全新設(shè)計(jì)），我清楚的明白這次重構(gòu)的目的是鍛煉自己在架構(gòu)準(zhǔn)富應(yīng)用時(shí)的模塊解偶能力，尋找在其他項(xiàng)目中架構(gòu)的共通之處，所以我寧愿加班或花更多精力做這個(gè)事情，當(dāng)然更沒(méi)打算向業(yè)務(wù)方多解釋什么，這件事情對(duì)我來(lái)說(shuō)純粹是技能的鍛煉。而經(jīng)過(guò)這一次重構(gòu)之后，我意外的發(fā)現(xiàn)對(duì)業(yè)務(wù)的理解更透徹深入、更清晰的把握用戶體驗(yàn)上的瓶頸所在。如果一開(kāi)始就把這次常規(guī)改版當(dāng)成一個(gè)普通的項(xiàng)目按部就班的做，我只能說(shuō)，你也能按時(shí)完成項(xiàng)目，按時(shí)發(fā)布，但真真浪費(fèi)了一次寶貴的鍛煉機(jī)會(huì)，項(xiàng)目總結(jié)時(shí)也難有“動(dòng)心忍性”的體會(huì)。

所以，每個(gè)項(xiàng)目的每個(gè)事情都應(yīng)當(dāng)認(rèn)真對(duì)待，甚至要超出認(rèn)真的對(duì)待，想清楚做好每件事對(duì)于自己哪方面有所提升？哪怕是一個(gè)bug的解決，即便不是自己的問(wèn)題也不要草草踢出去了事，而是分析出問(wèn)題原因，給出方案，有目的involve各方知曉……，正規(guī)的對(duì)待每個(gè)不起眼的小事，時(shí)間久了歷練了心智，這時(shí)如果突然遇到一個(gè)p0級(jí)的嚴(yán)重線上bug（比如淘寶首頁(yè)白屏，夠嚴(yán)重的了吧）也不會(huì)立即亂了方寸，這也是我上文提到的心有城府自然淡定萬(wàn)倍，而這種淡定的氣場(chǎng)對(duì)身邊浮躁的人來(lái)說(shuō)也是一種震懾和療傷，影響力自然而然就形成了。

第三，作分享

做分享這事兒真的是一本萬(wàn)利。有心的人一定要逼著自己做分享，而且要做好。首先，自己了解的知識(shí)不叫掌握，只有理解并表達(dá)出來(lái)能讓別人理解才叫掌握，比如如果你解釋不清楚hasLayout，多半說(shuō)明自己沒(méi)理解，如果你搞不懂雙飛翼的使用場(chǎng)景，可能真的不知道布局的核心要素。再者，作分享絕對(duì)鍛煉知識(shí)點(diǎn)的提煉能力和表達(dá)能力，我們作為工程師不知道多少次和強(qiáng)硬的需求方pk，被擊敗的一塌糊涂。也反映出工程師很難提煉出通俗易懂的語(yǔ)言將技術(shù)要點(diǎn)表述清楚。而做ppt和分享正是鍛煉這種能力，將自己的觀點(diǎn)提煉出要點(diǎn)和線索，分享次數(shù)多了，自然熟能生巧。檔次也再慢慢提高。另一方面，逼迫自己站在公眾場(chǎng)合里大聲講話，本來(lái)就是提高自信的一種鍛煉。

這時(shí)，你或許會(huì)問(wèn)，我講的東西大家都明白，我講的是不是多余，我第一次講講不好怎么辦，大家會(huì)不會(huì)像看玩猴似的看我“這SB，講這么爛還上來(lái)講”？要是講不好我以后再講沒(méi)人聽(tīng)怎么辦，我今后怎么做人啊？

老實(shí)說(shuō)，這是一道坎，任何人都要跨過(guò)去的，誰(shuí)都一樣，你敢鼓起勇氣在大庭廣眾之下向愛(ài)人表白，就沒(méi)勇氣對(duì)自己的職業(yè)宿命說(shuō)不？其實(shí)勇敢的跨越這一步，你會(huì)意外的收獲他人的掌聲和贊許，這些掌聲和贊許不是送給你所分享的內(nèi)容，而是送給你的認(rèn)真和勇氣。這個(gè)心結(jié)過(guò)不去，那就老老實(shí)實(shí)呆在自己的象牙塔里遺老終生，當(dāng)一輩子工程師里的鉆石王老五吧。

【匠人多福】

如果你能耐心讀到這里，心里一定有一個(gè)疑問(wèn)，上面說(shuō)的都是技術(shù)上能力上怎樣怎樣，那我所做項(xiàng)目不給力又當(dāng)如何？如果項(xiàng)目不掙錢、黃了、裁了，我的努力不就白費(fèi)了嗎？我又有什么績(jī)效和價(jià)值呢？

沒(méi)錯(cuò)，有這種想法的人不在少數(shù)。特別是剛出道的校招同學(xué)往往更加心高氣傲，以為自己有改變世界的本事，一定要參與一個(gè)牛逼的團(tuán)隊(duì)做一款光鮮靚麗受人追捧能給自己臉上貼金的項(xiàng)目。如果你有這種想法，趁早打消掉這個(gè)念頭，當(dāng)然，我們這里先不討論創(chuàng)業(yè)的情形。

第一，如果你剛畢業(yè)就加入一個(gè)牛逼團(tuán)隊(duì)，說(shuō)難聽(tīng)點(diǎn)，你就是團(tuán)隊(duì)中其他人眼中的“豬一樣的隊(duì)友”，不創(chuàng)造價(jià)值且拖項(xiàng)目后腿（顯然大家都要照顧你的成長(zhǎng)啊），按照271理論，你沒(méi)有理由不是這個(gè)1。至少相當(dāng)長(zhǎng)一段時(shí)間內(nèi)是這樣。

第二，你在所謂牛逼團(tuán)隊(duì)中的創(chuàng)造性受限，因?yàn)閯?chuàng)新多來(lái)自于團(tuán)隊(duì)中的“資深“和大牛們，你參與討論但觀點(diǎn)通常不會(huì)被采納，他們只會(huì)給你這個(gè)菜鳥分活干，想想看，你如何能花兩到三年就超越身邊的大牛們？甚至連拉近與他們的距離都難。

第三，如果身在牛逼團(tuán)隊(duì)，自然心理對(duì)周圍的牛人們有所期待，希望他們能灌輸給你一些牛逼的知識(shí)和牛逼的理念。這種思想上的惰性在職場(chǎng)生涯之初是非常危險(xiǎn)的。要知道技術(shù)和知識(shí)本身是很簡(jiǎn)單和淳樸的，只不過(guò)披上了一個(gè)光鮮項(xiàng)目的外衣而讓人感覺(jué)與眾不同。

第四，由簡(jiǎn)入奢易，由奢入簡(jiǎn)難，做過(guò)一個(gè)看似光彩的項(xiàng)目，心理再難放平穩(wěn)，去踏實(shí)的做一個(gè)看上去不那么酷的產(chǎn)品。這種浮躁心態(tài)會(huì)嚴(yán)重影響今后的職業(yè)發(fā)展和成長(zhǎng)。

第五，光鮮靚麗的項(xiàng)目被各種老大關(guān)注，是難容忍犯錯(cuò)誤的，傻瓜都知道犯錯(cuò)誤在成長(zhǎng)之初的重要性。

就我所看到的情形看，一開(kāi)始加入看似很牛的項(xiàng)目組，三年后得到的成長(zhǎng)，比那些開(kāi)始加入一個(gè)不被重視的項(xiàng)目的同學(xué)要小很多，而后者在能力上的彈性卻更大。所以，道理很簡(jiǎn)單，你是要把一個(gè)很酷的項(xiàng)目做的和之前差不多酷，還是把一個(gè)不酷的項(xiàng)目做的很酷？項(xiàng)目是不是因?yàn)槟愕募尤攵兊门c眾不同了？

從這個(gè)角度講，不管是轉(zhuǎn)行的新人還是剛出道的秀才，最好將自己當(dāng)作“匠人”來(lái)對(duì)待，你的工作是“打磨”你的項(xiàng)目，并在這個(gè)過(guò)程中收獲經(jīng)驗(yàn)和成長(zhǎng)。付出的是勤奮，鍛煉的是手藝，磨練的是心智。因此，你的價(jià)值來(lái)自于你“活兒“的質(zhì)量，“活兒”的質(zhì)量來(lái)自于你接手的項(xiàng)目之前和之后的差別。做好活兒是匠人應(yīng)有的職業(yè)心態(tài)。想通這一點(diǎn)，內(nèi)心自然少一些糾結(jié)，才會(huì)對(duì)自己對(duì)項(xiàng)目的貢獻(xiàn)度有客觀的認(rèn)識(shí)，不會(huì)感覺(jué)被項(xiàng)目所綁架。

做一名多福的匠人，擁有了金剛鉆、就不怕攬不到瓷器活兒。但對(duì)于人的成長(zhǎng)來(lái)說(shuō)，如果說(shuō)“項(xiàng)目”重要但不關(guān)鍵，那么什么才是關(guān)鍵呢？這個(gè)話題還會(huì)在接下來(lái)的“伯樂(lè)與千里馬”這篇中給出答案。

【若干年后】

現(xiàn)在，讓我們回過(guò)頭回答一下“青春飯”的問(wèn)題。在“青春飯”小節(jié)中提到，“程序員到三十歲之后需要轉(zhuǎn)行或者轉(zhuǎn)管理嗎？”

上文提到，工業(yè)化生產(chǎn)的四個(gè)領(lǐng)域，1，創(chuàng)意，2，生產(chǎn)線，3，高級(jí)技工，4，技術(shù)管理。Web前端技術(shù)也是如此，可以在這四個(gè)領(lǐng)域找到各自的歸宿。

第一，“創(chuàng)意“

即和產(chǎn)品需求越走越近，擁有良好的產(chǎn)品感，對(duì)產(chǎn)品需求、設(shè)計(jì)交互把握準(zhǔn)確，能夠用適當(dāng)?shù)募夹g(shù)方案推動(dòng)產(chǎn)品用戶體驗(yàn)，屬于“架構(gòu)師”的范疇，因?yàn)槁毮芨涌壳埃俺鲋饕狻毙偷摹＿@種人更貼近用戶，需要活躍的思維、廣闊眼界、厚實(shí)的項(xiàng)目經(jīng)驗(yàn)。更多的影響產(chǎn)品體驗(yàn)方面的決策。

第二，“生產(chǎn)線“

即前端基礎(chǔ)設(shè)施建設(shè)，優(yōu)化前端開(kāi)發(fā)流程，開(kāi)發(fā)工具，包括開(kāi)發(fā)環(huán)境、打包上線自動(dòng)化、和各種監(jiān)控平臺(tái)和數(shù)據(jù)收集等，屬于“技術(shù)支持”的范疇，相比于很多企業(yè)粗獷難用的平臺(tái)工具，前端技術(shù)方面的基礎(chǔ)設(shè)施建設(shè)基礎(chǔ)還需更加夯實(shí)，因?yàn)檫@是高效生產(chǎn)的基本保證。

第三，“高級(jí)技工“

即高級(jí)前端開(kāi)發(fā)工程師，專職做項(xiàng)目，將產(chǎn)品做精做透，用代碼將產(chǎn)品用戶體驗(yàn)推向極致，偏“實(shí)戰(zhàn)”型的，是項(xiàng)目的中堅(jiān)力量，直接產(chǎn)出成果，影響產(chǎn)品效益。屬于項(xiàng)目里的“資深”。

第四，“技術(shù)管理“

即做技術(shù)經(jīng)理，這才是多數(shù)人所理解的“管理”，其實(shí)就是帶團(tuán)隊(duì)、靠團(tuán)隊(duì)拿成果。這類人具有敏感的技術(shù)情結(jié)，在技術(shù)風(fēng)潮中把握方向，能夠指導(dǎo)培訓(xùn)新人，為各個(gè)業(yè)務(wù)輸出前端人才，偏“教練”型的，促進(jìn)新技術(shù)對(duì)業(yè)務(wù)的影響。并有意識(shí)的開(kāi)辟新的技術(shù)領(lǐng)域。

可見(jiàn)，轉(zhuǎn)管理可不是想當(dāng)然，也不是所謂做項(xiàng)目變資深了就能轉(zhuǎn)管理，轉(zhuǎn)了也不一定能做好。根據(jù)“彼得原理”，即人總是傾向于晉升到他所不能勝任的崗位，這時(shí)就又陷入“帕金森”定律所隱喻的惡性循環(huán)之中，直到你帶的團(tuán)隊(duì)整個(gè)垮掉。

所以，轉(zhuǎn)管理應(yīng)當(dāng)是一件非常慎重的事情，不是所謂程序員混不下去就轉(zhuǎn)管理這么簡(jiǎn)單。但不管怎樣，有一件事情是需要尤其要想清楚，即，轉(zhuǎn)了管理，技術(shù)就丟了嗎？我們?cè)诘谄呷铡安畼?lè)與千里馬”中再深入聊聊這個(gè)事兒。

第七日，伯樂(lè)與千里馬

【師兄們的抉擇 1】

千里馬常有，而伯樂(lè)不常有。——韓愈，“馬說(shuō)”。

一個(gè)人這輩子能遇到一個(gè)好師兄是一種緣分，可遇不可求。很多人工作中的幸福感似乎也源自這種被認(rèn)同，被師兄的了解和認(rèn)同，有人能直言不諱的指出你的不足，幫你發(fā)現(xiàn)機(jī)會(huì)，并將最適合你做的事情分配給你，這是莫大的幸運(yùn)，但如此幸運(yùn)的人十之一二，大多數(shù)人因?yàn)槿鄙俨畼?lè)的提點(diǎn)，漸漸辱于“奴隸人之手“，潛力漸失，毀于中庸。

在前端技術(shù)領(lǐng)域，這種情況很普遍也很特殊，當(dāng)然有很多客觀原因。即前端技術(shù)進(jìn)入公眾視野時(shí)間不長(zhǎng)，有實(shí)力的伯樂(lè)更加是鳳毛麟角。更何況，Web前端技術(shù)還有著一些江湖氣，知識(shí)點(diǎn)過(guò)于瑣碎，技術(shù)價(jià)值觀的博弈也難分伯仲，即全局的系統(tǒng)的知識(shí)結(jié)構(gòu)并未成體系，這些因素也客觀上影響了“正統(tǒng)“前端技術(shù)的沉淀，奇技淫巧被濫用，前端技術(shù)知識(shí)的傳承也過(guò)于泛泛，新人很難看清時(shí)局把握主次，加之業(yè)務(wù)上的壓力，未免過(guò)早導(dǎo)致技術(shù)動(dòng)作變形。而這些問(wèn)題也無(wú)法全賴自己全盤消化，若有人指點(diǎn)迷津，情況要好上萬(wàn)倍。因此，前端技術(shù)領(lǐng)域，為自己覓得一個(gè)靠譜的師兄，重要性要蓋過(guò)項(xiàng)目、團(tuán)隊(duì)、公司、甚至薪水。

這也是上文所說(shuō)的“項(xiàng)目不重要，師兄才重要“的原因。說(shuō)到這里就有一個(gè)問(wèn)題，每個(gè)人都問(wèn)下自己，你是想當(dāng)師弟呢還是想當(dāng)師兄呢？當(dāng)師兄有什么好處呢？

沒(méi)錯(cuò)，很多師兄都是被師兄，甚至沒(méi)有做好當(dāng)師兄的準(zhǔn)備，更進(jìn)一步說(shuō)，不少經(jīng)理人也都是“被經(jīng)理人“，沒(méi)有做好準(zhǔn)備就被推到了管理崗位。帶人是耗精力的，師兄要做很多思想斗爭(zhēng)才舍得把這些寶貴的精力放在那些菜鳥身上，這不是一個(gè)技術(shù)問(wèn)題，而是一個(gè)道德問(wèn)題。要記住，沒(méi)有誰(shuí)應(yīng)該無(wú)緣無(wú)故把自己所掌握技能給你傾囊相授，如此皆命也。讀到這里，作為菜鳥，作為學(xué)徒，作為新人，作為師弟，你做到對(duì)這份命運(yùn)的足夠尊重了嗎？

尊師重教的傳統(tǒng)美德并沒(méi)有在技術(shù)領(lǐng)域得以很好的延續(xù)。也正因?yàn)榇耍瞬盘蓐?duì)難建立起來(lái)，但對(duì)于師兄來(lái)說(shuō)，卻是有更多機(jī)遇的。

【師兄們的抉擇 2】

作為師兄，不管是主動(dòng)還是被動(dòng)，肯定會(huì)想當(dāng)師兄對(duì)我有什么提升？對(duì)于初次做師兄的人來(lái)說(shuō)，最大的提升在于兩方面，1，任務(wù)分解，2，問(wèn)題分析。

第一，任務(wù)分解，作為師兄要給師弟派分任務(wù)，就涉及到任務(wù)分解，分解這事兒往低了說(shuō)，就是派活，往高了說(shuō)，其實(shí)就是做“架構(gòu)”，比如一個(gè)頁(yè)面，按照什么思路進(jìn)行模塊劃分，模塊劃分是否適合單人開(kāi)發(fā)，如何控制共用樣式和共用腳本，我需要為他提供什么接口，如何控制他的代碼并入整個(gè)頁(yè)面時(shí)不會(huì)影響整體頁(yè)面代碼的熵值，這些都是實(shí)打?qū)嵉摹凹軜?gòu)“應(yīng)該包含的問(wèn)題，而從小頁(yè)面開(kāi)始就做這種鍛煉，做的多了，“架構(gòu)感”自然就形成了。

第二，問(wèn)題分析，在之前自己寫代碼都是單打獨(dú)斗，什么都是用代碼解決問(wèn)題，但一旦涉及協(xié)作，就要強(qiáng)迫自己分析問(wèn)題，或者說(shuō)給徒弟分析問(wèn)題，告訴他應(yīng)當(dāng)用什么方法來(lái)解決問(wèn)題，當(dāng)說(shuō)到“方法”時(shí)，腦子里定形成了一個(gè)方案，按照這個(gè)方案路子走一定能解決問(wèn)題。分析問(wèn)題比寫代碼要更抽象、更高效，因?yàn)樵谀X子里構(gòu)建方案要比寫代碼要快，思考也會(huì)更加縝密，當(dāng)鍛煉的多了，思考越來(lái)越快，代碼的草稿也很快就在腦海中形成了，這也是我們說(shuō)為什么很多人不寫代碼但編碼思路和水平都很高的原因。

這些工作方法對(duì)了，積累多了，就是提高。對(duì)于技術(shù)經(jīng)理人來(lái)說(shuō)，也是同樣的道理。所以，就像在第五日的“得與失”部分提到的那樣，轉(zhuǎn)身師兄、變身管理并不意味著“失“掉技術(shù)飯碗，而是一種進(jìn)步。

【做自己的伯樂(lè)】

那么，在前端技術(shù)領(lǐng)域里什么樣的人才算千里馬，其實(shí)人人都是千里馬，人人都可以發(fā)掘自己的潛力，如果上面的文字你能讀懂，能認(rèn)可，這種自我發(fā)掘已經(jīng)開(kāi)始了，沒(méi)有一個(gè)好伯樂(lè)又何妨呢？做一個(gè)勤快的小碼農(nóng)，少一些勢(shì)利的紛爭(zhēng)，很快會(huì)發(fā)現(xiàn)，自己才是最好的伯樂(lè)。

但這并不是說(shuō)，他人對(duì)自己的觀點(diǎn)不重要，有時(shí)甚至要綜合各種聲音，所以，多找身邊的大牛們聊聊天，多找你的師兄和主管，不管他們給你的建議是多么形而上，總有一些聲音對(duì)你是有益的，多收集，有好處。

第八日，做地球上最牛的UED

【誰(shuí)推動(dòng)了歷史前進(jìn)，英雄？還是人民？】

“做地球上最牛的UED！”，這是淘寶UED創(chuàng)立之初的口號(hào)，現(xiàn)在被漸漸淡忘了，因?yàn)槲⒉┥系囊恍┯懻摚窒肫鹆诉@份曾經(jīng)美好的初衷。玉伯也感嘆道：“這愿景曾吸引了多少好漢前往投奔呀。只可惜短短幾年間，這愿景好像越來(lái)越遠(yuǎn)了”。問(wèn)題是，要做好一個(gè)團(tuán)隊(duì)，靠的是個(gè)人、還是整體？愿景是越來(lái)越遠(yuǎn)了嗎？

是誰(shuí)推動(dòng)了歷史的前進(jìn)，是英雄？還是人民？微觀來(lái)看，是英雄，宏觀來(lái)看，是人民。再放大了看，是互聯(lián)網(wǎng)大潮之崛起推動(dòng)了前端技術(shù)的進(jìn)步，時(shí)勢(shì)需要UED、需要用戶體驗(yàn)。

所以，UED團(tuán)隊(duì)的創(chuàng)立發(fā)展受這些積極的外因影響，趕上了好時(shí)候，成員也跟著沾光。然而，我并不關(guān)心這個(gè)口號(hào)，我只關(guān)心體制內(nèi)的關(guān)鍵人物，那些帶動(dòng)整個(gè)團(tuán)隊(duì)水漲船高的人們。往往我們發(fā)現(xiàn)，某些人的高度代表了整個(gè)團(tuán)隊(duì)的高度，個(gè)體的影響力代表了整個(gè)團(tuán)隊(duì)的影響力，某個(gè)人的水平代表了整個(gè)團(tuán)隊(duì)的水平。支付寶、淘寶、騰訊、百度、盛大，都是如此。而我們作為普通的個(gè)體，正是要?jiǎng)?lì)志成為這種人，成為真真用技術(shù)推動(dòng)用戶體驗(yàn)前進(jìn)的尖刀人物。

這時(shí)我想起了很多人在知乎上的問(wèn)題，關(guān)于跳槽、關(guān)于轉(zhuǎn)行、關(guān)于創(chuàng)業(yè)、關(guān)于各種UED團(tuán)隊(duì)。我想，讀得懂我上面的文字，你心理也許會(huì)有自己的答案。

【歸宿】

最后，還有一個(gè)不得不說(shuō)的問(wèn)題，即歸屬問(wèn)題，前端開(kāi)發(fā)應(yīng)當(dāng)歸屬于UED還是技術(shù)部門？應(yīng)當(dāng)說(shuō)，當(dāng)前Web前端技術(shù)的價(jià)值體現(xiàn)在“用戶體驗(yàn)“上。是用戶體驗(yàn)這塊陣地最后一道坎。也就是說(shuō)，前端工程師應(yīng)當(dāng)重點(diǎn)考慮我所作的頁(yè)面的感官體驗(yàn)。這是需要一些靈感和感性的，應(yīng)當(dāng)看到帥氣優(yōu)雅的界面會(huì)心有所動(dòng)、或者實(shí)現(xiàn)一款精巧的小組件時(shí)萌生一陣快意。這種所見(jiàn)即所得的美妙編程體驗(yàn)正是其他后端工程師無(wú)法體驗(yàn)到的。因此，這種精確到像素級(jí)的精工雕琢雖然不直接決定產(chǎn)品生死，但卻是提升產(chǎn)品品味和時(shí)尚感的要素。物質(zhì)越來(lái)越豐富的今天，大眾的更高訴求不就是品味和時(shí)尚嗎？

如果將前端歸到技術(shù)部門，一方面和“設(shè)計(jì)“離的更遠(yuǎn)，代碼寫的規(guī)規(guī)矩矩但漸缺少了靈性，另一方面作為工程師又缺少計(jì)算機(jī)專業(yè)課的功底，才真正喪失了優(yōu)勢(shì)所在，如果有一天，前端工程師的平均水平足夠高，清一色的計(jì)算機(jī)科班出身，似乎更合適歸入到技術(shù)部門。所以，Web前端工程師是“工程師“，需要科學(xué)嚴(yán)謹(jǐn)?shù)木幊棠芰Γ硖嶶ED所應(yīng)當(dāng)具備的美感和靈性是萬(wàn)不可被剝奪去的。

還有一點(diǎn)，Web前端工程師作為UED之中最具實(shí)踐精神和邏輯思維的工種，是能夠?qū)⒓夹g(shù)對(duì)設(shè)計(jì)的影響發(fā)揮到最大，可以催生出大量的創(chuàng)造和革新的，這一點(diǎn)也是傳統(tǒng)后端工程師所不具備的。

第九日，前端技術(shù)體系

現(xiàn)在越來(lái)越感覺(jué)到前端技術(shù)需要成體系的積累，一方面可以規(guī)范我們的前端技術(shù)培訓(xùn)，另一方面，作為知識(shí)線索為新人做指引，省的走彎路，避免陷入奇技淫巧的深坑之中不能自拔。

之前我整理了一下“前端技術(shù)知識(shí)結(jié)構(gòu)”，羅列的比較散，但也基本表述清楚了我的觀點(diǎn)。今年上半年也在整個(gè)研發(fā)中心組織了一次前端技術(shù)培訓(xùn)，對(duì)于前端技術(shù)的演化規(guī)律也有過(guò)整理，都放在了這個(gè)ppt中，希望對(duì)大家有所幫助。

概觀國(guó)內(nèi)前端技術(shù)界，其實(shí)我不認(rèn)為和國(guó)外頂尖的前端技術(shù)有多少年差別，甚至很多方面都走在了他們前面，比如對(duì)IE6暴力式的兼容，以及各種外殼瀏覽器的風(fēng)靡（呵呵，開(kāi)玩笑哈）。唯一的美中不足是國(guó)外頂尖的前端技術(shù)很難第一時(shí)間就在國(guó)內(nèi)普及，可能是兩方面原因，一是多數(shù)人英文底子很差，這可是個(gè)大問(wèn)題啊。二是國(guó)內(nèi)前端技術(shù)方面高質(zhì)量的譯文圖書實(shí)在是少的可憐。那么……