最近又重讀了@拔赤 的web前端開發(fā)十日談，覺得比第一次讀又多了些許感悟路星，于是做了次搬運工溯街。
原文地址（似乎也不是原文，真正的原文鏈接沒找到）：[http://kb.cnblogs.com/page/159704/]

一直想寫這篇“十日談”洋丐，聊聊我對Web前端開發(fā)的體會呈昔，順便解答下周圍不少人的困惑和迷惘。我不打算聊太多技術友绝，我想堤尾，通過技術的歷練，得到的反思應當更重要迁客。
　　我一直認為自己是“初級”前端開發(fā)工程師郭宝，一方面我入道尚淺辞槐，只有短短幾年，另一方面我自知對技術的鉆研并不深入剩蟀，可能是由于環(huán)境的原因催蝗，當然最重要的是，我幸運的參與到互聯(lián)網(wǎng)崛起的浪潮之巔育特。時勢造就了一批技能薄弱但備受追捧的“弄潮者”丙号，這在很大程度上影響我們對“技術本質(zhì)”的洞察力，多年來也一直未有成體系的“前端技術”布道佳作缰冤，以至于當下多數(shù)人對前端技術的了解犬缨，蓋始于表述并不嚴謹?shù)膷徫徽衅该枋觯@正恰恰反映了Web前端開發(fā)對自身的模糊定位棉浸。對于很多Web前端工程師來說怀薛，初嘗禁果的快感無法持續(xù)很久，就陷入一輪又一輪的迷惘迷郑，思索自己的職業(yè)規(guī)劃枝恋，試圖尋找到適合自己的成長道路、看清自身技能的瓶頸嗡害，尋找突破焚碌。但遺憾的是，Web前端技術被廣泛接納時日尚短霸妹，沒有多少勵志的成功樣板可供遵循十电。然而情況不總是這么糟，畢竟Web前端技術是一門“技術”叹螟，和計算機科學系出同門鹃骂，只是因為互聯(lián)網(wǎng)的高速崛起而被蒙上了迷霧，遮住了雙眼罢绽，讓我們傻傻看不清時局畏线。
　　那么，如何定義Web前端技術崗位邊界良价？Web前端技術的價值體現(xiàn)在何處寝殴？前端工程師的價值僅僅體現(xiàn)在物以稀為貴嗎？前端工程師的初級棚壁、中級、高級和專家之間到底如何界定栈虚？當前“我”處在什么位置袖外？接下來的路子應當怎樣走？何謂前端技術之“道”魂务？我想多數(shù)人都思考過這些問題曼验，本篇“十日談”里的觀點可能有些偏激泌射，但拋磚引玉，讀者權且把這些言論當作一個引子吧鬓照。

第一日：初嘗禁果

【上帝說：“要有光熔酷！”便有了光】

萬物生靈、陽光雨露蓋源于造物之初的天工開物豺裆，我們無法想象上帝創(chuàng)造光明之前的世界模樣拒秘。但幸運的是，前端開發(fā)沒有神祗般的詭魅臭猜。這個技術工種的孕育躺酒、定型、發(fā)展自有軌跡蔑歌，也頗有淵源羹应，當然，這非常容易理解次屠。不嚴格的講园匹，在楊致遠和費羅在斯坦福大學的機房里攛掇出Yahoo!時，Web前端技術就已經(jīng)開始進入公眾視野劫灶，只不過當時沒有一個響亮的名字裸违。從那時起，“基于瀏覽器端的開發(fā)”就成了軟件開發(fā)的新的分支浑此，這也是Web前端技術的核心累颂，即不論何時何地何種系統(tǒng)以及怎樣的設備，但凡基于瀏覽器凛俱，都是Web前端開發(fā)的范疇（當然紊馏，這個定義很狹隘，下文會提到）蒲犬。
　　在2000年之后瀏覽器技術漸漸成熟朱监，Web產(chǎn)品也越來越豐富，中國有大批年輕人開始接觸互聯(lián)網(wǎng)原叮，有一點需要注意赫编，大部分人接觸互聯(lián)網(wǎng)不是始于對瀏覽器功能的好奇，而是被瀏覽器窗口內(nèi)的豐富內(nèi)容所吸引奋隶，我們的思維模式從一開始就被限制在一個小窗口之內(nèi)擂送，以至于很長時間內(nèi)我們將“視覺”認為是一種“功能”，Web產(chǎn)品無非是用來展現(xiàn)信息之用唯欣。起初的入行者無一例外對“視覺”的關注超過了對“內(nèi)容”的重視嘹吨，先讓頁面看起來漂亮，去關注html/css境氢，沿著“視覺呈現(xiàn)”的思路蟀拷，繼續(xù)深入下去碰纬。因此，這類人是被“視覺”所吸引问芬，從切頁面入行悦析，著迷于結構化的html和書寫工整的css，喜歡簡潔優(yōu)雅的UI和工整的頁面設計此衅，之后開始接觸視覺特效强戴，并使用jQuery來實現(xiàn)視覺特效，以此為線索炕柔，開始深入研究Dom酌泰、Bom和瀏覽器的渲染機制等，html/css在這些人手中就像進攻兵器匕累，而JavaScript則更如防守的盾牌陵刹。
　　還有另外一群人從另一條道路接觸Web前端，即工程師轉行做前端欢嘿，他們有較多的后臺語言開發(fā)背景衰琐，從讀寫數(shù)據(jù)開始，漸漸觸及瀏覽器端炼蹦，接觸JavaScript庫羡宙，起初是在html代碼上加js邏輯，后來開始涉及html和css掐隐，他們喜歡OO狗热、邏輯清晰、結構悅目的代碼虑省，更關注界面背后的“程序語言”和數(shù)據(jù)邏輯匿刮。html/css在這些人手中則更像盾牌，而JavaScript更如進攻的兵器探颈。
　　應當說這兩類人是互補的熟丸，他們各自了解瀏覽器本質(zhì)的一部分，一撥人對渲染引擎了如指掌伪节，另一撥人則將JS引擎奉為至寶光羞，其實任何一部分的優(yōu)勢發(fā)揮出來都能做出精品。大部分前端工程師都能從這兩條淵源中找到自己的影子怀大。但纱兑，這兩類人的思維模式和觀點是如此不同，以至于形成了一些不必要的對抗化借，比如在某些公司潜慎，干脆將Web前端技術一分為二，“切頁面的”和“寫js的”。這樣做看上去明確了分工提高了效率勘纯，但他對員工的職業(yè)發(fā)展帶來巨大傷害。在第二日“科班秀才”中會有進一步討論钓瞭。
　　我應該屬于第二類驳遵，即在學校正兒八經(jīng)的學習C/Java和C#之類，以為大學畢業(yè)后能去做ERP軟件山涡、桌面軟件或者進某些通信公司寫TCP/IP相關的程序堤结。校園招聘時選擇了中國雅虎，因為當年（08年）雅虎還是有一點兒名氣鸭丛，而且我聽說雅虎比較算技術流的公司……自此就上了賊船竞穷，一發(fā)不可收拾。
　　在雅虎的這段時間鳞溉，我有幸接觸到一股正氣凜然的技術流派瘾带，也形成了我對前端技術的一些基本看法，這些基本觀點一直影響我至今熟菲。

【優(yōu)雅的學院派】

當年雅虎的技術流派正如日中天看政，擁有眾多“之父”級的高人，所營造出的Hack氛圍實在讓人陶醉的無法自拔抄罕，那段時間我甚至寧愿加班到深夜閱讀海量的文檔和源代碼允蚣，感覺真的很舒服，我深深的被雅虎工程師這種低調(diào)務實呆贿、精工細琢的“服務精神”所打動嚷兔，而這種不起眼的優(yōu)秀品質(zhì)很大程度的影響雅虎產(chǎn)品的用戶體驗和高質(zhì)量的技術輸出。那么做入，何謂“服務精神”冒晰？即你所做的東西是服務于人的，要么是產(chǎn)品客戶母蛛、要么是接手你項目的人翩剪、要么是使用你開發(fā)的功能的人，所以技術文檔成為伴隨代碼的標配彩郊。因此前弯，工程師之間通過代碼就能做到心有靈犀的溝通。這是工程師的一項基本素質(zhì)秫逝，即恕出，思路清晰的完成項目，且配備了有價值的技術文檔违帆，如果你的程序是給其他程序員用的浙巫，則更要如此，就好比你制造一款家電都要配備說明書一樣。因此的畴，YDN成了當時最受全球程序員最喜愛的技術文檔庫渊抄，這種優(yōu)雅務實的“學院氣息”讓人感覺獨具魅力。
　　讓人感覺奇怪的是丧裁，在中文社區(qū)始終未見這種學院派护桦。甚至在具有先天開源優(yōu)勢的Web前端技術社區(qū)里也是波瀾不驚，可見寫一篇好的技術文案真的比登天還難煎娇。我所見到的大部分所謂文檔索性把代碼里輸出數(shù)據(jù)的語句塊拷貝粘貼出來二庵，至于為什么數(shù)據(jù)格式要設計成這樣、如果字段有修改怎么做缓呛、編碼解碼要求如何等等關鍵信息只字不提催享，或者開發(fā)者也沒想過這些問題呢。因此哟绊，我們一直在強調(diào)代碼的質(zhì)量和可維護性因妙，但一直以來都未見效，蓋源于缺少這種“服務”意識的灌輸票髓。這種意識在下文中還會多次提到兰迫，因為它能影響你做事的每個細節(jié)，是最應當首先突破的思想糾結炬称。
　　除了意識問題汁果，另一方面是技術問題，即文筆玲躯。這也是工程師最瞧不上眼的問題据德，難以置信這竟然是阻礙工程師突破瓶頸的關鍵所在。我已看到過數(shù)不清的人在晉升這道關卡吃了大虧跷车，很多工程師技術實力很強棘利，但就是表達不出來，要么羅列一大堆信息毫無重點朽缴、要么毫無趣味的講代碼細節(jié)善玫，不知云云。除非你走狗屎運碰到一個懂技術的老板密强，否則真的沒辦法逃脫碼農(nóng)的宿命茅郎。但大部分人還振振有詞不以為然。而在Web前端開發(fā)領域情況更甚或渤。前端工程師是最喜歡搞重構的系冗，但在快節(jié)奏的需求面前，你很難用“提高了可維護性”薪鹦、“提升了性能”這類虛無縹緲的詞藻為自己爭取到時間來搞重構掌敬，說的露骨一點惯豆，可能你真的對某次重構帶來的實際價值無法量化，只是“感覺代碼更整潔了”而已奔害。我會在下文的“偽架構”中會展開分析前端工程師的這種浮躁獻媚的技術情結楷兽。而這正是前端工程師最欠缺的素質(zhì)之一：用數(shù)據(jù)說話，用嚴謹科學的論據(jù)來支撐你的觀點华临，老板不傻拄养，有價值的東西當然會讓你去做。
　　當然银舱，情況不總是這么糟糕，我們看到中文社區(qū)中已經(jīng)鍛煉出了很多寫手跛梗，他們在用高質(zhì)量的文字推銷自己的技術理念寻馏，這是一個好兆頭，好的文筆是可以鍛煉出來的核偿。而在職場诚欠，特別是對前端工程師這個特殊職位來講，這種基本技能可以幫你反思梳理需求的輕重緩急漾岳，從凌亂的需求中把握七寸所在轰绵。因為當你開始認真寫一封郵件的時候，這種思考已經(jīng)包含其中了尼荆。
　　所以左腔，雅虎技術的推銷是相對成功和遠播的。關鍵在于兩方面捅儒，扎實的技術功底和高超的寫手液样。而真正的技術大牛一定是集兩者與一身，不僅鉆研劍道巧还，還能產(chǎn)出秘籍鞭莽。這也是Yahoo!優(yōu)雅的學院派氣息的動力源泉。國內(nèi)很多技術團體想在這方面有所建樹麸祷，應當首先想清楚這一點澎怒。

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

雅虎的技術運作非常規(guī)范，剛才已經(jīng)提到阶牍，包括技術喷面、組織、文化走孽，一切看起來有模有樣乖酬，也堪稱標桿，自然成了國內(nèi)很多技術團隊和社區(qū)的效仿對象融求。一時間各種“規(guī)范“成風咬像、各色“標準“大行其道，結果是質(zhì)量參差不齊。
　　我們到底需要什么樣的規(guī)范县昂？雅虎的技術規(guī)范到底有何種魔力肮柜？以何種思路構建的規(guī)范才是貨真價實的？規(guī)范有著怎樣的生命周期倒彰？想清楚這些問題审洞，能很大程度減輕很多Web前端工程師的思想負擔，看清一部分技術本質(zhì)待讳，避免盲目跟風芒澜。
　　我們的確需要規(guī)范，但好的規(guī)范一定是務實的创淡，一定是“解決問題“的痴晦。比如針對項目構建的DPL可以收納公用的視覺元件以減少重復開發(fā)、規(guī)定某OPOA項目的事件分發(fā)原則以確立增量開發(fā)的代碼慣性琳彩。反之誊酌，糟糕的規(guī)范卻顯得過于“抽象“，比如頁面性能指標露乏、響應式設計原則碧浊。另外，盡管他山之石可以攻玉瘟仿，但拿來主義有一個大前提箱锐，就是你了解你的項目的關鍵問題，你要優(yōu)先解決的是些關鍵問題劳较，而外來規(guī)范正好能解決你的問題瑞躺。因此規(guī)范是一本案頭手冊，是一攬子問題的解決方案兴想，應當是“字典”幢哨，而不是“教程“∩┍悖可見規(guī)范的源頭是“問題”捞镰。所以，當你想用CoffeeScript重構你的項目時毙替、當你想引入CommonJS規(guī)范時岸售、當你想在頁面中揉進Bootstrap時、當你打算重復造輪子搞一套JS庫時厂画、當你想重寫一套assets打包工具時凸丸，想想這些東東解決了你的什么問題？會不會帶來新的問題袱院、把事情搞復雜了屎慢？還是為了嘗鮮瞭稼？或者為了在簡歷中堂而皇之的寫上使用并精通各種新技術？
　　規(guī)范之立應當有動因腻惠，動因來源于項目需求环肘，項目需求則來自對產(chǎn)品的理解和把握，這是Web前端初級工程師走向中級甚至高級的一次重要蛻變集灌，軟件工程領域早就有“架構師”角色悔雹，而架構師往往存在于項目需求分析和概設、詳設階段欣喧。我看到的情況是腌零，Web前端工程師的思維過多的限制在“界面”之內(nèi)，向前和產(chǎn)品需求離的太遠（認為這是視覺設計師的事）唆阿、向后和數(shù)據(jù)邏輯又隔離開來（認為這是后臺工程師該干的事）益涧，因此前端規(guī)范也大都泛泛，無關項目痛癢酷鸦，成了玩具。
　　雅虎技術規(guī)范的優(yōu)秀之初在于它們解決問題牙咏。所以臼隔，學習使用規(guī)范應當多問一句，“他們?yōu)槭裁催@樣做妄壶？”其實摔握，想清楚這些問題時，腦海中自然形成了一種“遇山開山”的創(chuàng)造性思維丁寄。

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

如果說新技術的嘗鮮缺少針對性氨淌，但至少滿足程序員的某種潔癖和快感，那么“負擔”從何而來呢伊磺？對于初學者來說盛正，有價值學習資料可能只有這些規(guī)范，如果說規(guī)范價值不大屑埋，那又當從何入手呢豪筝？
　　剛才我說的不是依賴于規(guī)范，而是對規(guī)范的反思摘能，擺脫規(guī)范灌輸給我們的思維定勢续崖。新人們大概是看了Wiki中的很多指標、結論团搞、實踐严望，在做項目之初就附加了不少“八股式”的負擔，甚至影響我們對項目關鍵需求和關鍵問題的洞察力和判斷力逻恐，負擔過重就無法輕裝上陣像吻，Wiki中提到的這些指標和規(guī)范是結論性的峻黍，是大量的實踐之后得出的，也只有經(jīng)歷過大量實踐才會真正理解這些結論萧豆，比如DomReady時間和http請求數(shù)是否有因果關系奸披，http請求數(shù)增加是否真的會導致頁面性能下降，什么條件下會導致性能下降涮雷？我們從那些條文和結論中無法找到答案阵面。
　　舉個具體的例子，Kissy剛剛出了DPL洪鸭，也是一大堆結論样刷，比如他的布局就采用了經(jīng)典的雙飛翼，使用容器浮動來實現(xiàn)览爵，那么置鼻，這種做法就是不可撼動的“標準”嗎？看看淘寶車險首頁蜓竹，布局容器齊刷刷的inline-block箕母，只要頂層容器去掉寬度，布局容器自身就能根據(jù)瀏覽器寬度調(diào)整自然水平/垂直排列俱济，輕易的適應終端寬度了嘶是。
　　再比如，淘寶旅行計劃項目中的部署方式蛛碌，也沒有完全使用Loader管理依賴聂喇，而是將依賴層級做的很少，業(yè)務邏輯使用腳本來合并蔚携，這樣就可以更容易在build環(huán)節(jié)加入語法檢查和代碼風格檢查希太。
　　類似這種擺脫原有編程思維，有針對性的用新思路新方法解決問題的做法顯然讓人感覺更加清爽酝蜒，編程的樂趣也正體現(xiàn)在打破常規(guī)的快感之中誊辉，小馬曾經(jīng)說過：“制造規(guī)范是為了打破規(guī)范”，萬不要因為這些規(guī)范標準加重負擔亡脑，導致開始做一個簡單頁面時也顯得縮手縮腳芥映，無法放開身手。大膽的動手實踐远豺，才能真正得出屬于自己的“結論 “和“標準“奈偏，才會真正深刻理解那些“結論”的意義所在。代碼寫的多了躯护，自然熟能生巧惊来，也容易形成成熟的技術觀點。
　　在這個過程中棺滞，我們唯一的對手是懶惰裁蚁，惰于思考矢渊，就無法真正發(fā)現(xiàn)問題，自然形不成自己的觀點枉证。還是那句話矮男，任何規(guī)范、方法室谚、結論毡鉴、實踐都是為了解決項目中的問題的，所以秒赤，我們所接觸到那些看似“八股文”式的規(guī)范標準也是為了解決某些問題而提出的猪瞬，想清楚這些問題，理解方法論背后的“因“入篮，內(nèi)心自然有“果”陈瘦。
　　因此，“著眼當下潮售、對癥下藥”的品質(zhì)就顯得彌足珍貴了痊项，比如，雙飛翼布局方法是為了解決一套（html）代碼適應多種布局設計酥诽，這里的布局相對于固定的產(chǎn)品來說也是固定的鞍泉，而無針對終端的自適應（適用于移動端的榻榻米布局似乎還沒有最佳實踐）。這是雙飛翼產(chǎn)生的背景盆均，如今終端環(huán)境較之5年前已經(jīng)翻天覆地塞弊，問題早已不在“多種布局”上漱逸，而在“終端適應“上泪姨，這才是我們面臨的問題，需要我們給出新的技術方案饰抒。
　　所以肮砾，勤于思考，輕裝上陣袋坑，大膽實踐仗处，勇于創(chuàng)新，發(fā)掘問題所在枣宫，實打?qū)嵉慕鉀Q（潛在）問題婆誓，這才是我們真正需要的能力。放下思維定勢枷鎖也颤，也會有一種豁然開朗的感覺洋幻。

原文比較長，如需閱覽全部內(nèi)容請移步[http://kb.cnblogs.com/page/159704/]