如何成為一個(gè)偉大的前端工程師
最近，我的一個(gè)博客讀者給我發(fā)了一封電子郵件。內(nèi)容是：
你好，請(qǐng)問如何才能成為一個(gè)偉大的前端工程師？
你有什么好的建議嗎？
這讓我不由得陷入思考中。我不得不承認(rèn)看到這個(gè)問題的時(shí)候我很驚訝，因?yàn)槲覐奈凑嬲X得自己是一個(gè)“偉大”的前端工程師。事實(shí)上，在這個(gè)行業(yè)開頭幾 年時(shí)間里，對(duì)于我的每一份工作，我甚至可以說(shuō)我都是不合格的。我申請(qǐng)了這些職位——我沒有意識(shí)到自己懂得其實(shí)并不多，然后又因?yàn)槊嬖嚬俨恢涝搯柺裁磫?題，又讓我通過了面試得到了工作。
話雖這么說(shuō)，但***每一份工作我都完成得很好，并成為了團(tuán)隊(duì)中的重要成員。甚至于當(dāng)我要辭職的時(shí)候（奔赴下一個(gè)工作挑戰(zhàn)），我通常還會(huì)被要求負(fù)責(zé)找 到合適的人來(lái)頂替。回想我當(dāng)初的面試——只將重點(diǎn)放在知識(shí)點(diǎn)上——我簡(jiǎn)直要被自己蠢哭了。現(xiàn)在的我根本不會(huì)聘請(qǐng)以前的自己來(lái)?yè)?dān)任這個(gè)職位，即使從我個(gè)人的 經(jīng)驗(yàn)來(lái)看——我依然勝任了這個(gè)職位。
在網(wǎng)絡(luò)上工作的時(shí)間越長(zhǎng)，我就越發(fā)意識(shí)到，能將優(yōu)秀人才和真正優(yōu)秀人才區(qū)分出來(lái)的不是他們知道什么，而是他們是如何思考的。顯然，知識(shí)很重要——在 有些情況下甚至是關(guān)鍵的——但在一個(gè)變化迅速的領(lǐng)域，如何去獲取知識(shí)更重要（至少?gòu)拈L(zhǎng)遠(yuǎn)來(lái)看）。也許最重要的是：你如何利用這些知識(shí)來(lái)解決日常問題。
現(xiàn)在有很多的文章大談特談?wù)夜ぷ餍枰裁凑Z(yǔ)言、什么框架和什么工具。我不愿意走這條已經(jīng)走爛了的道路。所以在這篇文章中，我會(huì)談?wù)勄岸斯こ處煹乃季S模式，希望能夠解決一個(gè)永恒的問題：如何成為一個(gè)偉大的前端工程師？
不要只解決問題，要弄清楚到底發(fā)生了什么
很多用CSS和JavaScript的程序員碰到問題時(shí)，會(huì)一頭扎進(jìn)去，但一旦發(fā)現(xiàn)某種解決方法有效，就立刻馬不停蹄地進(jìn)入下一個(gè)環(huán)節(jié)。這在代碼審查環(huán)節(jié)已經(jīng)是司空見慣的情景。
我經(jīng)常會(huì)問：“你為什么要在這里添加float: left？”或者“此處的overflow: hidden真的有必要嗎？”，對(duì)方回答：“我不知道，但如果我刪掉的話，它就不工作了。”
JavaScript中的情況也是如此。我們可以看到setTimeout被用來(lái)防止多線程之間的資源競(jìng)爭(zhēng)，或者阻止傳播那些不考慮對(duì)頁(yè)面上其他事件處理程序產(chǎn)生影響的事件。
我意識(shí)到，當(dāng)你需要完成某一個(gè)工作的時(shí)候，現(xiàn)在就解決出現(xiàn)的問題當(dāng)然是ok的。但如果你不花時(shí)間去了解這個(gè)問題的根源，那么你會(huì)發(fā)現(xiàn)自己將一次又一次地陷入同樣的問題中。
抽出點(diǎn)時(shí)間來(lái)弄清楚你的解決方案奏效的原因，這看似費(fèi)時(shí)費(fèi)力，但我保證將來(lái)它能節(jié)省你很多時(shí)間。更全面地理解你正在工作的系統(tǒng)，將意味著前進(jìn)道路上更少的猜測(cè)和檢查工作。
學(xué)會(huì)預(yù)測(cè)未來(lái)瀏覽器的變化
前端和后端代碼之間的主要區(qū)別就是后端代碼通常運(yùn)行在一個(gè)受控制的環(huán)境中。相反的，前端則完全在控制之外。用戶使用的平臺(tái)和設(shè)備隨時(shí)可能徹底改變，所以你的代碼得能夠優(yōu)雅地處理這樣的情況。
我還記得2011年的時(shí)候我在一個(gè)流行的JavaScript框架的源代碼中，看到以下代碼行（為了簡(jiǎn)便起見已作修改）：
var isIE6 = !isIE7 && !isIE8 && !isIE9;
在當(dāng)時(shí)的情況下，IE6的確涵蓋了所有的IE瀏覽器版本，能夠處理所有高于IE6的版本，但一旦IE10出來(lái)，應(yīng)用程序大部分地方就會(huì)徹底不行。
我知道在現(xiàn)實(shí)世界中特征檢測(cè)并不會(huì)100％時(shí)間工作，有時(shí)你不得不依靠bug行為或進(jìn)入白名單的瀏覽器，讓它們來(lái)幫助檢測(cè)錯(cuò)誤，但是你這么做的時(shí)候，你得能預(yù)測(cè)到未來(lái)某個(gè)時(shí)候這些bug將不復(fù)存在，這個(gè)是絕對(duì)的關(guān)鍵。
對(duì)于許多人來(lái)說(shuō)，今天寫的代碼的存活時(shí)間會(huì)比我們就職于當(dāng)前工作的時(shí)間要更久。我8年前一些代碼，今天依然在一些大型的生產(chǎn)網(wǎng)站運(yùn)行，固步自封的思想，既令人滿足，又讓人害怕。
閱讀規(guī)格說(shuō)明
瀏覽器bug是不可避免的，但是當(dāng)兩個(gè)瀏覽器對(duì)相同的代碼有著不同呈現(xiàn)的時(shí)候，人們往往不檢查自己，就直接認(rèn)為，那個(gè)所謂“好”的瀏覽器是正確的， “壞”的瀏覽器是錯(cuò)誤的。但是，事實(shí)并不總是如此，當(dāng)你被這個(gè)假設(shè)所誤導(dǎo)的時(shí)候，無(wú)論你選擇了什么解決方案，將來(lái)幾乎都會(huì)肯定崩潰。
這方面的一個(gè)例子就是flex項(xiàng)目的默認(rèn)最小尺寸。根據(jù)規(guī)格說(shuō)明，flex項(xiàng)目的初始min-width和min-height為auto（不是0），這意味著在默認(rèn)情況下，不能將其內(nèi)容收縮到比最小尺寸更小。在過去8個(gè)月時(shí)間里，F(xiàn)irefox是唯一正確實(shí)現(xiàn)這一目標(biāo)的瀏覽器。[1]
如果你遇到跨瀏覽器不兼容，發(fā)現(xiàn)你的網(wǎng)站呈現(xiàn)在Chrome、IE、Opera和Safari瀏覽器是相同的，但在Firefox上不一樣，你可能 會(huì)認(rèn)為火狐搞錯(cuò)了。事實(shí)上，我親眼目睹過很多次這樣的情況。報(bào)告的許多Flexbug項(xiàng)目問題，實(shí)際上就是由于這種不兼容性引起的，而提出的解決方法，如 果實(shí)施的話，會(huì)在兩周前Chrome 44出來(lái)的時(shí)候失敗。不遵從規(guī)格說(shuō)明的解決方法會(huì)在不知不覺中損害正確的行為。[2]
當(dāng)兩個(gè)或多個(gè)瀏覽器對(duì)相同的代碼卻有不同的呈現(xiàn)時(shí)，你應(yīng)該花時(shí)間找出哪一個(gè)是正確的，然后謹(jǐn)記這一點(diǎn)來(lái)寫代碼。這樣你的解決方法才不會(huì)在不久的將來(lái)成為過時(shí)的技術(shù)。
此外，所謂的“偉大”的前端工程師往往是那些敢于在主流之前先使用新技術(shù)，甚至促進(jìn)新技術(shù)發(fā)展的人。如果你能培養(yǎng)自己閱讀規(guī)格說(shuō)明和展望技術(shù)前景的能力，那么你就會(huì)成為并影響規(guī)格說(shuō)明發(fā)展的一份子。
閱讀他人的代碼
閱讀他人的代碼，可能并不有趣，但這毫無(wú)疑問是進(jìn)階為一個(gè)更優(yōu)秀的開發(fā)人員的***途徑之一。
依靠自己的本事來(lái)解決問題，是一個(gè)學(xué)習(xí)的好方法，但如果你只這么做，那你很快就會(huì)到達(dá)你的瓶頸。閱讀他人的代碼可以幫助你發(fā)現(xiàn)做事的新方法。閱讀和理解代碼是團(tuán)隊(duì)工作和合作開源項(xiàng)目時(shí)必不可少的能力。
其實(shí)，我覺得很多公司在聘用新的工程師時(shí)犯的***的錯(cuò)誤就是，只要求他們寫代碼——從頭開始寫新的代碼。我從未在任何一場(chǎng)面試中說(shuō)要求我閱讀一些現(xiàn) 有的代碼，去找這些代碼中的問題，然后解決這些問題。這真是太糟糕了，因?yàn)樽鳛橐粋€(gè)工程師你的大部分時(shí)間是花在增加或更改現(xiàn)有的代碼庫(kù)上的。很少需要你從 頭開始構(gòu)建新的東西。
和比你聰明的人一起工作
前端開發(fā)人員比后端開發(fā)人員更想成為自由職業(yè)者。也有可能是因?yàn)榍岸巳送亲詫W(xué)成才的，而后端人往往來(lái)自于正規(guī)學(xué)校。
但是自學(xué)成才和為自己工作也是有缺陷的，那就是你通常不會(huì)明白從比你聰明的人那兒學(xué)習(xí)的好處。不會(huì)有人給你建議，也沒有人為你檢查代碼。
我強(qiáng)烈建議至少在職業(yè)生涯的開始階段，一定要進(jìn)入一個(gè)團(tuán)隊(duì)工作，***團(tuán)隊(duì)人員比你聰明比你有經(jīng)驗(yàn)。
如果你在你職業(yè)生涯某個(gè)時(shí)間點(diǎn)，不想只為自己工作了，那么不妨參與到開源項(xiàng)目中。積極推動(dòng)開源項(xiàng)目能為你提供很多與團(tuán)隊(duì)工作相同的好處，有的時(shí)候甚至好處更多。
重新發(fā)明輪子
“重新發(fā)明輪子”對(duì)企業(yè)是不利的，但卻是偉大的學(xué)習(xí)方式。比如說(shuō)你想掌握來(lái)自于npm的預(yù)輸入控件或事件委托類庫(kù)，那么不妨試想一下如果你自己來(lái)構(gòu)建這些東西，能幫助你學(xué)到多少。
我敢肯定看到這里一定有人想臭罵我一頓。別誤解我的意思。我不是說(shuō)你不應(yīng)該使用第三方代碼。使用經(jīng)過充分測(cè)試的庫(kù)——坐享多年測(cè)試案例和bug報(bào)告總是明智的行為。
但在這篇文章中，我要說(shuō)的是如何從優(yōu)秀進(jìn)步到偉大。在這個(gè)行業(yè)中大多數(shù)我認(rèn)為偉大的人，都是我們無(wú)時(shí)無(wú)刻不在使用的超級(jí)流行的庫(kù)的創(chuàng)造者或維護(hù)者。
可能你也有一個(gè)成功的職業(yè)生涯——但卻不曾構(gòu)建自己的JavaScript庫(kù)，那么你可能從未真正接近過它的本質(zhì)。
很多人會(huì)問的有關(guān)于這個(gè)行業(yè)的一個(gè)常見問題是：接下來(lái)我該構(gòu)建什么？如果你問這個(gè)問題，是因?yàn)椴幌肴W(xué)習(xí)新的工具或創(chuàng)造新的app，那么給你個(gè)建 議：為什么不嘗試重建自己喜歡的JavaScript庫(kù)或CSS框架呢。這樣做的好處是，碰到問題的話，現(xiàn)有的庫(kù)的源代碼會(huì)明晃晃地告訴你所有的答案。
把你學(xué)到的東西寫下來(lái)
***但并非最不重要的一點(diǎn)是，你應(yīng)該把你學(xué)到的東西寫下來(lái)。這么做的理由有很多，但***的理由或許是這能迫使你更好地理解主題。如果你無(wú)法解釋它是如何工作的，那么很有可能其實(shí)你還沒有真正地理解。通常只有當(dāng)你嘗試將內(nèi)容寫下來(lái)的時(shí)候，才能發(fā)現(xiàn)自己其實(shí)還沒搞明白。
根據(jù)我的經(jīng)驗(yàn)，寫作、發(fā)表演講、以及創(chuàng)建演示都是強(qiáng)迫自己從外到內(nèi)挖掘和充分理解事物的***方式之一。即使不會(huì)有人來(lái)閱讀你寫的東西，但是寫的這個(gè)過程絕對(duì)物超所值。
腳注：
[1].2014年12月1日Firefox在版本34中實(shí)現(xiàn)了規(guī)格說(shuō)明變化，Chrome于2015年7月21日添加到日歷在版本44中實(shí)施，這意味著Opera很快也會(huì)這么做。Edge于2015年7月29號(hào)發(fā)布實(shí)施，而Safari似乎正在實(shí)施醞釀中。
[2].對(duì)于這個(gè)問題可以參考Flexbug＃1作為適用于未來(lái)的跨瀏覽器解決方案。
譯文鏈接：http://www.codeceo.com/article/how-to-be-great-front-end-engineer.html
英文原文：How to Become a Great Front-End Engineer
