編寫可維護(hù)的JavaScript
技術(shù)支持服務(wù)電話：15308000360 【7x24提供運(yùn)維服務(wù)，解決各類系統(tǒng)/軟硬件疑難技術(shù)問題】
在我的編程生涯中，曾遇到過各種各樣的開發(fā)者，他們的編程風(fēng)格天馬行空，有時甚至讓人哭笑不得。有一種風(fēng)格被稱為“霰彈槍編程”，例如某個方法調(diào)用出錯了，我嘗試將參數(shù)0改為'0'、NaN甚至false，直到試出能“正確”運(yùn)行的參數(shù)為止。當(dāng)你和這種人組成團(tuán)隊(duì)一起編程時，你會發(fā)現(xiàn)你的智商變得很低。
比“霰彈槍編程”更溫柔一點(diǎn)的編程方式是“撞大運(yùn)編程”，就是我根本看不懂程序到底在干嘛，但確實(shí)能正常運(yùn)行，這往往是因?yàn)檫@些程序中有很多錯誤成對出現(xiàn)，于是就負(fù)負(fù)得正，看起來就正確了，這種程序?qū)嵲谑?ldquo;動彈不得”，只能重構(gòu)。當(dāng)你和這種人組成團(tuán)隊(duì)時，上帝都會同情你。
當(dāng)然，當(dāng)漸漸意識到這類隨意編程風(fēng)格帶來的危害時，很多人開始思考什么才是“好”的編程風(fēng)格。不少人開始向高手學(xué)習(xí)，盡管有時并不知道高手為什么要把代碼寫成這個樣子。于是越來越多的hack代碼出現(xiàn)了，那些看起來晦澀難懂、短小精悍卻又暫時行之有效的代碼片段越來越流行，尤其是在處理瀏覽器兼容性問題時，這種情況更甚。有些人會在這些hack代碼片段旁邊打上記號，以便以后有問題時能留意到此。這時，問題又出現(xiàn)了，不同人做記號的方法又不一樣，我的天哪！
如果你自詡為一名有能力有良知的程序員，遇到這種“爛”代碼時往往將之重構(gòu)，為了修改幾個拼寫錯誤的bug，而修改10個類，并且重構(gòu)與這10個類有關(guān)聯(lián)的另外20個類，甚至修改了打包腳本以及部署配置文件。這就是一種有著代碼潔癖的人很“青睞”的編程風(fēng)格—“屠宰式編程”。
霰彈槍式、撞大運(yùn)式、不求甚解式、屠宰式……
編程是一項(xiàng)復(fù)雜的工程，卻又如此充滿喜感，讓人又愛又恨。但有一點(diǎn)確定無疑，即這些風(fēng)格因?yàn)槿鄙倩镜募s束，會導(dǎo)致團(tuán)隊(duì)協(xié)作效率低下，甚至影響產(chǎn)品的存亡。而對于Web開發(fā)領(lǐng)域最為流行卻有著先天設(shè)計缺陷的語言JavaScript來說，情況更加糟糕。一直以來都缺少宏觀的設(shè)計模式和微觀的編程風(fēng)格的指導(dǎo)，從而導(dǎo)致JavaScript編程始終沒有權(quán)威和統(tǒng)一的指導(dǎo)思想和方法論。因此，大部分Web前端團(tuán)隊(duì)依然將很大精力放在解決注入代碼沖突、命名規(guī)范性、代碼復(fù)用模式等團(tuán)隊(duì)編程最基本的問題上。遲遲走不上創(chuàng)新、高效的快車道。
我們很欣喜地看到，在設(shè)計模式領(lǐng)域，《JavaScript設(shè)計模式》（JavaScript Design Patterns）和《JavaScript編程模式》（JavaScript Patterns）兩本書填補(bǔ)了這方面的空白，而在編程風(fēng)格領(lǐng)域，這本《編寫可維護(hù)的JavaScript》（Maintainable JavaScript）真可謂姍姍來遲。
本書正是向開發(fā)人員闡述如何在團(tuán)隊(duì)開發(fā)中編寫高可維護(hù)的JavaScript代碼，涵蓋了編碼風(fēng)格、編程技巧、自動化、測試等幾方面，不過，同樣的原則也適用于其他任何語言。本書作者是大名鼎鼎的Nicholas C. Zakas。他曾是Yahoo!的首席前端開發(fā)工程師，在完成了從一名獨(dú)行俠到團(tuán)隊(duì)精英的蛻變后，他站在前端工程師的角度為我們提煉出許多的最佳編程實(shí)踐，其中包括很多來自工業(yè)生產(chǎn)的最佳法則。應(yīng)用這些技巧和技術(shù)，可以使你的團(tuán)隊(duì)編程從俠義的個人偏好的陰霾走出來，走向真正的高效和高水準(zhǔn)。
本書由淘寶北京前端團(tuán)隊(duì)翻譯，在翻譯過程中，我們始終保持一種學(xué)習(xí)的心態(tài)，因?yàn)檎袂懊嫣岬降?，作者給出的很多經(jīng)驗(yàn)正是我們手頭工作中不在意卻又至關(guān)重要的，這種學(xué)習(xí)心態(tài)也讓我們在這次翻譯過程收獲頗豐。我們盡最大的努力，力求翻譯后的表述在還原作者原意的同時又不失中文的流暢。但難免由于譯者水平有限而有所紕漏，還請各位高手多多批評指正。
序言
由于前端工程師的成長道路自成軌跡，這讓（Web前端技術(shù)）這個專業(yè)看起來是如此的與眾不同，甚至諸如Yahoo！這種大公司里的很多前端工程師也多是靠自身野蠻生長，我行我素地寫著各種hack！ ?；蛟S你曾經(jīng)也是一名小公司里的“頁面仔”（the web guy），那時的你幾乎什么都干。當(dāng)大公司開始利用這些之前未被發(fā)掘的資源時 ，團(tuán)隊(duì)協(xié)作的環(huán)境短時間內(nèi)吸納了很多“hacker” ，這時這些hacker碰到了各種條條框框。單兵作戰(zhàn)再也沒了優(yōu)勢，所有那些自學(xué)成才和以自我為中心的人都不得不開始思考如何才能在團(tuán)隊(duì)環(huán)境中生存下來。
我是在20世紀(jì)90年代末開始學(xué)習(xí)JavaScript的：靠的是自學(xué)。因?yàn)楫?dāng)時的JavaScript還很新潮，學(xué)習(xí)資料很少。和其他很多開發(fā)者一樣，我通過不斷鉆研IE和Netscape Navigator來自學(xué)。我做各種嘗試、梳理我所掌握的知識，我一遍遍反復(fù)試驗(yàn)，直到搞清楚其工作原理。幸運(yùn)的是，這份好奇和勤勉為我?guī)砹说谝环莨ぷ鳌?/div>
在我職業(yè)生涯的第一個五年中，我是一個“腳本仔”。在我最早呆過的兩家公司里，沒有人比我更了解JavaScript和Web開發(fā)。所有問題，不管是非常簡單的還是非常復(fù)雜的，我都能搞定。我剛剛從學(xué)校畢業(yè)，是一名初出茅廬的小伙子，卻有著一種危機(jī)感。因?yàn)槲艺也怀瞿芎臀耶a(chǎn)生思想碰撞的人，并且在我遇到問題時也沒有人能為我解難。我力爭做到最好，因?yàn)槲抑牢沂俏ㄒ荒茏龅竭@樣的人。
在這五年之中，我不斷磨煉我的技能。我讓我的做事方式和工作流程更為合理。我不用擔(dān)心其他人去研究我的代碼，因?yàn)閯e人都沒有能力給我做代碼評審（review）或?yàn)槲业拇a提交bug修復(fù)。我是一個純粹意義上的hacker：我行我素地寫著代碼，而且不用擔(dān)心它會被修改。
在我職業(yè)生涯的第六年，我換了工作，加入了一個團(tuán)隊(duì)，在這個團(tuán)隊(duì)中，每個人都會為項(xiàng)目的各個方面貢獻(xiàn)代碼。我的主要精力不再是JavaScript和Web開發(fā)，而是大部分時間在寫后端代碼和SQL。同時，傳統(tǒng)的后端工程師卻開始被迫寫前端（頁面）代碼。這種體驗(yàn)真正讓我大開眼界：我之前寫代碼的方式和團(tuán)隊(duì)其他人實(shí)在是格格不入，這是一個大問題。
我很快意識到要想更高效地參與團(tuán)隊(duì)開發(fā)，我寫代碼的方式必須和團(tuán)隊(duì)保持一致。后臺代碼和SQL對我來說有點(diǎn)陌生，因此我采納了身邊一些有頭腦的人寫代碼的模式。與此同時，我開始與其他工程師討論我們應(yīng)當(dāng)采納何種HTML、CSS和JavaScript的編程模式。我甚至在編譯階段加入了JavaScirpt語法檢查來強(qiáng)制推行標(biāo)準(zhǔn)—這也是我第一次在公司做 Web 代碼的檢查。不久以后，這個團(tuán)隊(duì)就像上了潤滑油的機(jī)器一樣高效。
我在2006年加入了Yahoo！。我一到Y(jié)ahoo！就發(fā)現(xiàn)幾乎所有工作都和相互協(xié)作有關(guān)。整個團(tuán)隊(duì)就像把不同的動物糾集在一起。我所加入的第一個團(tuán)隊(duì)是My Yahoo！團(tuán)隊(duì)，這個團(tuán)隊(duì)非常龐大，比我之前工作過的任何團(tuán)隊(duì)都要大。團(tuán)隊(duì)里也有很多成型的編程指南，我有很多需要學(xué)習(xí)的東西。新技術(shù)、新流程以及新工具一股腦地展現(xiàn)在我面前。我花了大量的時間來學(xué)習(xí)這些新環(huán)境，吸收新知識，而這些知識是我從大學(xué)里接觸不到的。在這里我完全沉浸在知識的海洋里，感覺自己像被重塑了一般。
幾個月后，我開始遇到一些問題。我所習(xí)慣的開發(fā)流程并不是總能好好工作。有不少人以不同的方式來做事，這導(dǎo)致了很多bug。我的主管發(fā)現(xiàn)了這一苗頭，一天他把我叫到一邊，告訴我他希望我來負(fù)責(zé)梳理我們的開發(fā)?，F(xiàn)在回想起他的話依然是那么鼓舞人心：“你寫的代碼都可以運(yùn)行得很好，很少出bug。我希望其他人都像你一樣寫代碼。”就這樣，我打算著手為My Yahoo！前端開發(fā)團(tuán)隊(duì)注入一些結(jié)構(gòu)和規(guī)范。
我為My Yahoo！團(tuán)隊(duì)做的工作非常成功，最終我被遴選為2008年Yahoo！新版首頁的首席前端工程師。這次委任讓我有機(jī)會將代碼組織和測試高質(zhì)量代碼的技巧，應(yīng)用于一個擁有20名前端工程師的團(tuán)隊(duì)，讓這20名工程師只開發(fā)一種（風(fēng)格的）代碼。通過幾個月的學(xué)習(xí)和調(diào)整，這個團(tuán)隊(duì)的生產(chǎn)效率和產(chǎn)品質(zhì)量達(dá)到了一個很高的水平，讓很多人嘆為觀止。不管是誰寫的代碼，它們都看起來像出自一個人之手，此外，多數(shù)工程師都可以快速地接手別人的工作來修復(fù)bug或開發(fā)新功能。在此期間，作為一個工程師團(tuán)隊(duì)所產(chǎn)出的業(yè)績，在過去的幾年里一直是我職業(yè)生涯的最大亮點(diǎn)。
我在Yahoo！的這段時間都是在參與大型的團(tuán)隊(duì)開發(fā)，我將在此期間積累的所有經(jīng)驗(yàn)和方法整理出來成書于此。所討論的主題也體現(xiàn)了我的這種蛻變，我從一名我行我素的獨(dú)行俠，蛻變?yōu)橐幻浖こ處?，一名團(tuán)隊(duì)協(xié)作者，我放棄了我身上固有的俠氣和個性，來讓整個團(tuán)隊(duì)以更高的水準(zhǔn)運(yùn)作。這正是這本書的內(nèi)容：如何站在團(tuán)隊(duì)的角度去寫JavaScript代碼。
開發(fā)者最不容易理解的事情是，我們?yōu)楹涡枰ㄟ@么多時間來“維護(hù)”代碼。很少有人會打開一個文本編輯器從頭開始寫代碼。大多數(shù)時間里，你面對的都是已經(jīng)寫好的代碼。以一種可維護(hù)的方式來寫代碼，可以讓你和協(xié)作者很容易就知道上段代碼寫到什么地方什么程度。正如我在Yahoo！時常說的：“當(dāng)你開始工作時，你不是在給你自己寫代碼，而是為后來人寫代碼。”
本書收集了很多關(guān)于JavaScript編程規(guī)范的討論。“Java語言編碼規(guī)范”（Code Conventions for the Java Programming Language） 是當(dāng)前最流行的關(guān)于編碼規(guī)范的文檔之一，它指出編碼規(guī)范如此重要的幾個原因。
軟件生命周期中80%的成本消耗在了維護(hù)上。
幾乎所有的軟件維護(hù)者都不是它的最初作者。
編碼規(guī)范提高了軟件的可讀性，它讓工程師能夠快速且充分地理解新的代碼。
如果你將源碼作為產(chǎn)品來發(fā)布，你需要確保它是可完整打包的，且像你創(chuàng)建的其他產(chǎn)品一樣整潔。
這些原因在今天看來依然適用。本書所討論的編程規(guī)范也是著眼于幫助你和你的團(tuán)隊(duì)寫出高效的JavaScript代碼。
因?yàn)槟阏陂喿x這本書，你需要對本書提到的一些建議保持開放的心態(tài)。要知道這里說的很多技術(shù)，真正的目標(biāo)是解決多人開發(fā)的環(huán)境中很多工程師如何書寫統(tǒng)一風(fēng)格的代碼的問題。作為團(tuán)隊(duì)的一員，意味著做出這種決策不僅對個人有好處，對于團(tuán)隊(duì)也同樣有好處。對于個人來說，需要在一定程度上犧牲個人偏好、個人觀點(diǎn)甚至個人英雄主義。你所收獲的是一個能做大事的高效的團(tuán)隊(duì)，我希望這本書可以幫助你做到這一點(diǎn)。
下一篇：Editplus配置PHP詳細(xì)圖文教程
相關(guān)熱詞搜索：JavaScript
