前端工程師的成長(zhǎng)之路

如果你是剛進(jìn)入WEB前端研發(fā)領(lǐng)域，想試試這潭水有多深，看這篇文章吧。如果你是做了兩三年WEB產(chǎn)品前端研發(fā)，迷茫找不著提高之路，看這篇文章吧。如果你是四五年的前端開(kāi)發(fā)高手，沒(méi)有難題能難得住你的寂寞高手，來(lái)看這篇文章吧。WEB前端研發(fā)工程師，在國(guó)內(nèi)是一個(gè)朝陽(yáng)職業(yè)，自07-08年正式有這個(gè)職業(yè)以來(lái)，也不過(guò)三四年的時(shí)間。這個(gè)領(lǐng)域沒(méi)有學(xué)校的正規(guī)教育，沒(méi)有行內(nèi)成體系的理論指引，幾乎所有從事這個(gè)職業(yè)的人都是靠自己自學(xué)成才。自學(xué)成才，一條艱辛的坎坷路，我也是這樣一路走來(lái)。從2002年開(kāi)始接觸WEB前端研發(fā)至今已然有了9個(gè)年頭，如今再回首，期間的走了很多彎路。推已及人，如果能讓那些后來(lái)者少走些彎路，辛甚辛甚！前言所謂的天才，只不過(guò)是比平常人更快的掌握技能、完成工作罷了；只要你找到了正確的方向，并輔以足夠的時(shí)間，你一樣能夠踏上成功彼岸。本文將WEB前端研發(fā)編程能力劃分了八個(gè)等級(jí)，每個(gè)等級(jí)都列舉出了對(duì)應(yīng)的特征及破級(jí)提升之方法，希望每位在看本文的同學(xué)先準(zhǔn)確定位自己的等級(jí)（不要以你目前能力的最高點(diǎn)，而是以你當(dāng)前能力的中檔與之等級(jí)作對(duì)比，以免多走彎路），參考突破之法破之。所謂的級(jí)別，只是你面對(duì)需求時(shí)的一種態(tài)度：能夠完成、能夠完美地完成、能夠超出預(yù)期地完成。以追求完美的態(tài)度加以扎實(shí)的編程功力，那就是你的編程水平。切忌心浮氣燥，級(jí)別夠了，那級(jí)別里的東西自然就懂了。悟了就是悟了，沒(méi)悟也沒(méi)關(guān)系，靜下心來(lái)，投入時(shí)間而已。1.入門能夠解決一些問(wèn)題的水平。有一定的基礎(chǔ)（比如最常見(jiàn)的HTML標(biāo)簽及其屬性、事件、方法；最常見(jiàn)的CSS屬性；基礎(chǔ)的JavaScript編程能力），能夠完成一些簡(jiǎn)單的WEB前端研發(fā)需求。舉個(gè)例子：刪除一字符串中指定的字符。\o"viewsource"viewsource\o"print"print\o"?"?1varstr="/?page";2str=str.replace('?page',"");3alert(str);4str=str.substring(0,str.indexOf("/"));5alert(str);首先不要苛責(zé)代碼的對(duì)錯(cuò)嚴(yán)謹(jǐn)，畢竟每個(gè)程序員都有這樣的一個(gè)過(guò)程；其次，這兩段代碼在這個(gè)實(shí)例里沒(méi)有什么大過(guò)錯(cuò)，可能會(huì)有瑕疵，但能夠解決問(wèn)題（刪除指定的字符），這就是這個(gè)級(jí)別的特征。再舉個(gè)例子：\o"viewsource"viewsource\o"print"print\o"?"?01//計(jì)算系統(tǒng)當(dāng)前是星期幾02varstr="";03varweek=newDate().getDay();04if(week==0){05str="今天是星期日";06}elseif(week==1){07str="今天是星期一";08}elseif(week==2){09str="今天是星期二";10}elseif(week==3){11str="今天是星期三";12}elseif(week==4){13str="今天是星期四";14}elseif(week==5){15str="今天是星期五";16}elseif(week==6){17str="今天是星期六";18}19//或者更好一些20varstr1="今天是星期";21varweek=newDate().getDay();22switch(week){23case0:24str1+="日";25break;26case1:27str1+="一";28break;29case2:30str1+="二";31break;32case3:33str1+="三";34break;35case4:36str1+="四";37break;38case5:39str1+="五";40break;41case6:42str1+="六";43break;44}45alert(str);46alert(str1);入門"階段是每個(gè)程序員的必經(jīng)之路，只要"入門"，你就上路了。所謂"師傅領(lǐng)進(jìn)門，修行靠個(gè)人"，有了這個(gè)"入門"的基礎(chǔ)，自己就可以摸索著前進(jìn)了。進(jìn)階之路：將JavaScript、HTML、CSS之類的編碼幫助手冊(cè)里的每個(gè)方法/屬性都通讀幾遍！只有將基礎(chǔ)打好，以后的路才能走的順暢。參考這些幫助文檔，力爭(zhēng)寫出無(wú)瑕疵的代碼。這些編碼文檔建議不僅是在入門提高期看，在你以后每個(gè)階段破階的時(shí)候都應(yīng)該看看，最基礎(chǔ)的東西往往也是最給力的東西，有時(shí)能夠給你帶來(lái)意想不到的收獲。2.登堂能夠正確地解決問(wèn)題。不管你是通過(guò)搜索網(wǎng)絡(luò)，或者通過(guò)改造某些成品代碼（jQuery/Dojo/Ext/YUI）案例，只要能夠無(wú)錯(cuò)地完成需求。同樣以上面的那段"字符串剪裁"代碼為例：\o"viewsource"viewsource\o"print"print\o"?"?1varstr="/?page";2str=str.replace(/?page/,"");3alert(str);僅僅解決問(wèn)題對(duì)于"登堂"階段來(lái)說(shuō)已經(jīng)不是問(wèn)題，這個(gè)級(jí)別所給出方案不能是漏洞百出。以上面這段代碼為例：replace方法的第一個(gè)參數(shù)雖然可以支持字符串，但最佳的類型是正則表達(dá)式。\o"viewsource"viewsource\o"print"print\o"?"?1vara=newArray("日","一","二","三","四","五","六");2varweek=newDate().getDay();3varstr="今天是星期"+a[week];4alert(str);對(duì)比"入門級(jí)"的代碼，不管是從代碼量、代碼效率、代碼優(yōu)美性、代碼思路來(lái)說(shuō)，"登堂"級(jí)的這個(gè)日期處理代碼都要優(yōu)秀很多。進(jìn)階之路：這個(gè)階段雖然能夠給出正確的解題方案，但是不一定是最優(yōu)秀的方案。如何才能得到最優(yōu)秀的方案呢？首先就是積累各種能夠解決需求的方案，然后再驗(yàn)證每個(gè)方案，在這些方案中選擇最好的一種。因此該階段的進(jìn)階之路就是"行萬(wàn)里路，看萬(wàn)卷書(shū)"，積累各個(gè)需求的各個(gè)解決方案。你可以扎身在專業(yè)論壇（藍(lán)色理想、無(wú)憂、CSDN）里，通讀所有的FAQ及帖子；你可以打開(kāi)搜索引擎，窮舉所有的搜索結(jié)果。自己建立測(cè)試環(huán)境一一驗(yàn)證這些代碼：去揣摩每段代碼的意圖，去比較每段代碼之間的差異。這兩條路可以讓你快速完成原始積累，當(dāng)你再面對(duì)大多數(shù)需求時(shí)能夠說(shuō)這些問(wèn)題我以前做過(guò)，那你就水到渠成地晉階了。3.入室最強(qiáng)代碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優(yōu)秀的方案滿足需求。這個(gè)級(jí)別基本上產(chǎn)品開(kāi)發(fā)編程中的代碼主力。給出的一招一式，招招都是絕招。還以上面的那個(gè)例子為例，你能說(shuō)出1、2、3之間的差別，以及適用于那種環(huán)境嗎？\o"viewsource"viewsource\o"print"print\o"?"?1varstr="/?page";2//1、字符串剪裁3str.substring(0,str.indexOf("?page"));4//2、正則表達(dá)式5str.replace(/?page/,"");6//3、字符串分拆、合并7str.split("?page").join("");能夠解決問(wèn)題的方法會(huì)有很多，但是對(duì)于程序員來(lái)說(shuō)應(yīng)該選擇最優(yōu)秀的。上面這段代碼從代碼量來(lái)說(shuō)"正則表達(dá)式"最優(yōu)秀；從代碼執(zhí)行效率來(lái)說(shuō)："字符串剪裁"法最高（Chrome中"正則表達(dá)式"效率最高），split法最次；從可擴(kuò)展性上來(lái)說(shuō)，"正則表達(dá)式"法最優(yōu)。具體使用那種方案視具體的需求環(huán)境而定。"入室"階段，程序員應(yīng)該能夠肯定的回答：對(duì)于這個(gè)需求而言，我的代碼就是最優(yōu)秀的代碼。再以"今天是星期幾"為例，"登堂"級(jí)的代碼你敢說(shuō)是最優(yōu)秀的代碼了嗎？\o"viewsource"viewsource\o"print"print\o"?"?1//計(jì)算系統(tǒng)當(dāng)前是星期幾2varstr="今天是星期"+"日一二三四五六".charAt(newDate().getDay());對(duì)比"登堂"級(jí)的示例代碼，上面這段代碼給你什么感受？程序員追求的就是完美。"入室"級(jí)別追求的就是每一招每一式的完美無(wú)缺。從WEB前端編程來(lái)說(shuō)，通過(guò)2年左右的努力，很多人能夠達(dá)到這個(gè)水平，但是，很大一部分人的編程能力也就止步于此。或限于產(chǎn)品的需求單一性，或限于需求開(kāi)發(fā)的時(shí)間緊迫性，或限于人的惰性，能夠完美地解決當(dāng)前的需求就夠了。由于長(zhǎng)期處于技術(shù)平臺(tái)期，技術(shù)上得不到提高，通常這個(gè)級(jí)別的工程師會(huì)比較燥。技術(shù)上小有所成；或追求個(gè)人的突破；或追求產(chǎn)品差異性帶來(lái)的新鮮感；或者只是想換個(gè)心情；因此很多此級(jí)別的工程師會(huì)經(jīng)常換公司。戒驕戒躁：切勿以為自己能寫一手漂亮的代碼而自滿；切莫以為別人"尊稱"你一聲"大俠"你就以"大俠"自居；切莫以為自己積累了一些得意的代碼就成了框架式開(kāi)發(fā)。細(xì)節(jié)決定成敗，優(yōu)秀的方案并不能保證最終的成功。還以"刪除指定字符串"為例，原始字符串從格式上來(lái)看應(yīng)該是了個(gè)URL鏈接，在去除"pn=0"之后，最末尾處留了一個(gè)尾巴"?"；如果原始字符串是"/?pn=0&a=1"，去除"pn=0"之后?和&兩個(gè)符號(hào)緊貼一起，這更是明顯的bug。進(jìn)階之路：此階段進(jìn)階之路就是：切勿心浮氣躁；你不再被需求牽著走，而是你牽著需求走。注重細(xì)節(jié)，注意那些當(dāng)前需求里沒(méi)有明文給出的細(xì)節(jié)：代碼性能的差異、運(yùn)行平臺(tái)（瀏覽器）的差異、需求的隱性擴(kuò)展、代碼的向后兼容等等。再通讀幾遍HTML/CSS/JavaScript幫助文檔。我建議這個(gè)級(jí)別的工程師做一做WebTreeView控件，要求總節(jié)點(diǎn)量一萬(wàn)左右操作流暢，你的晉升之路就在這個(gè)控件的編碼過(guò)程中。4.入微最強(qiáng)解決方案。你能夠走在需求的前面，將當(dāng)前需求里有的、沒(méi)有直接提出來(lái)的、現(xiàn)在暫時(shí)沒(méi)有但將來(lái)可能有的等等，及前端編程潛規(guī)則等各個(gè)方方面面都綜合考慮，給出最優(yōu)方案。以一招勝萬(wàn)招。\o"viewsource"viewsource\o"print"print\o"?"?01varstr="/?pn=0";//刪除指定字符pn=002//我將這個(gè)字符串里所可能想到的各種情況都列舉出來(lái)03vara=[04"/VMpn=?pn=0"http://pn=可能出現(xiàn)在?前05,"/VMpn=?pn="http://URL里允許pn值為空06,"/VMpn=?pn=0&a=1"http://URL里可有多個(gè)字段07,"/VMpn=?a=1&pn=0"http://可能排在最后08,"/VMpn=?a=1&pn=0&pn=1"http://可能有多個(gè)pn字段09,"/VMpn=?a=1&pn=0&b=2"http://可能在中間10,"/VMpn=?a=1&pn=0&pn=1&b=1"http://可能在中間成組11,"/VMpn=?a=1&pn=0&b=1&pn=1"http://可能零星分布12];13/*需求的不言之秘：14?若出現(xiàn)在字符串最尾則要去之15?&兩個(gè)符號(hào)不可重疊16*/17varreg=/((\?)(pn=[^&]*&)+(?!pn=))|(((\?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g;18for(vari=0;i<a.length;i++){19alert(a[i]+"\n"+a[i].replace(reg,"$2"));20}這個(gè)階段已經(jīng)不再追求一招一式，對(duì)你來(lái)說(shuō)不是使用什么創(chuàng)新絕招解決需求，而是給出成熟穩(wěn)重的方案，從根上解決問(wèn)題。針對(duì)某個(gè)當(dāng)前需求你的代碼可能不是最優(yōu)，但是針對(duì)此類的需求你的代碼卻是最優(yōu)秀的代碼。進(jìn)階之路：很多WEB前端研發(fā)工程師在做了3-4年之后就會(huì)進(jìn)入一個(gè)瓶頸期：產(chǎn)品開(kāi)發(fā)需求是小菜一碟，沒(méi)有新鮮的可以挑戰(zhàn)的東西；代碼開(kāi)發(fā)中的稀奇的解題方法都已經(jīng)嘗試過(guò)。沒(méi)有了可挑戰(zhàn)的難題，失去了探索的激情，也就沒(méi)有了再上升的動(dòng)力，好不容易走過(guò)"入室"級(jí)別的人又會(huì)有八九成止步于此?；蜣D(zhuǎn)做技術(shù)領(lǐng)導(dǎo)人，或轉(zhuǎn)到其它的領(lǐng)域，或換公司。這些人的上升之路在哪里呢？這個(gè)階段單單依靠技巧和數(shù)量的累積已經(jīng)沒(méi)有什么效果了，突破之路在第5層《化蝶》里會(huì)詳細(xì)說(shuō)明，我建議你在這個(gè)階段末尾著重關(guān)注編程理論：面向?qū)ο?過(guò)程、代碼組織形式、編譯、代碼規(guī)范、其它的框架設(shè)計(jì)等等。我建議這個(gè)級(jí)別的工程師做一做WebEditor控件，不要求完整功能，但是該控件里的模塊劃分、代碼組織、編程思想做到位，給出一個(gè)系統(tǒng)的解決方案。5.化蝶破繭重生，這個(gè)層次關(guān)注的是編程語(yǔ)言本身，而不再關(guān)心產(chǎn)品需求。什么是繭？產(chǎn)品需求就是繭。當(dāng)你一招勝萬(wàn)招，打遍天下需求之時(shí)，你如果還拘泥于需求開(kāi)發(fā)，那就是你限于繭中而不自知。要么就在這個(gè)繭里默默地老去，要么就破開(kāi)繭獲得新生。還是以那個(gè)"字符串剪裁"的老例子：\o"viewsource"viewsource\o"print"print\o"?"?01/**02*在拼接正則表達(dá)式字符串時(shí)，消除原字符串中特殊字符對(duì)正則表達(dá)式的干擾03*@author:meizz04*@version:2010/12/1605*@param{String}str被正則表達(dá)式字符串保護(hù)編碼的字符串06*@return{String}被保護(hù)處理過(guò)后的字符串07*/08functionescapeReg(str){09returnstr.replace(newRegExp("([.*+?^=!:\x24{}()|[\\]\/\\\\])","g"),"\\\x241");10}11/**12*刪除URL字符串中指定的Query13*@author:meizz14*@version:2010/12/1615*@param{String}urlURL字符串16*@param{String}key被刪除的Query名17*@return{String}被刪除指定query后的URL字符串18*/19functiondelUrlQuery(url,key){20key=escapeReg(key);21varreg=newRegExp("((\\?)("+key+"=[^&]*&)+(?!"+key+22"=))|(((\\?|&)"+key+"=[^&]*)+$)|(&"+key+"=[^&]*)","g");23returnurl.replace(reg,"\x241")24}25//應(yīng)用實(shí)例26varstr="/?pn=0";//刪除指定字符pn=027delUrlQuery(str,"pn");這段代碼相對(duì)于層次4《入微》有什么區(qū)別嗎？從代碼實(shí)現(xiàn)上來(lái)說(shuō)沒(méi)有太大的區(qū)別，但是從思路上來(lái)說(shuō)卻有著本質(zhì)的區(qū)別：不再是就事論事，頭疼醫(yī)頭，而是把一類問(wèn)題抽象理論化，一招破萬(wàn)招；有封裝的概念，不再是每次從零開(kāi)始，而是站在半山腰開(kāi)始爬。在WEB前端研發(fā)隊(duì)伍里也有很大一部分人《入室》層次時(shí)就自我感覺(jué)良好，直接跨躍到《化蝶》，積累自己的代碼庫(kù)，抽象化問(wèn)題。但沒(méi)有基礎(chǔ)，缺少?gòu)?qiáng)大的后勁，即使能夠破繭也經(jīng)受不了風(fēng)吹雨打。一份不成熟的架構(gòu)設(shè)計(jì)對(duì)團(tuán)隊(duì)開(kāi)發(fā)帶來(lái)的危害遠(yuǎn)大于它帶來(lái)的好處，這種例子在業(yè)界屢見(jiàn)不鮮。不要拔苗助長(zhǎng)，不要不會(huì)走就想著跑，夯實(shí)基礎(chǔ)，水到渠成地成長(zhǎng)，厚積薄發(fā)，強(qiáng)力地破繭而出。進(jìn)階之路：你已經(jīng)從原始積累，到厚積薄發(fā)，到破繭而出之后，你所關(guān)注的應(yīng)該不再是一招一式、一個(gè)項(xiàng)目、一個(gè)模塊，而應(yīng)該是一種思路，一種理論。你可以做以下幾個(gè)步驟以突破到更高層次：再仔細(xì)看幾遍HTML/CSS/JavaScript接口幫助文檔；選擇一門強(qiáng)語(yǔ)言（C++/C#/Java等）觀察理解這些語(yǔ)言的組織結(jié)構(gòu)，語(yǔ)言設(shè)計(jì)；看看原型鏈，鏈?zhǔn)秸Z(yǔ)法編程，泛型，接口編程，DOM遙控器等等；仔細(xì)閱讀成熟的WEB前端開(kāi)發(fā)框架的設(shè)計(jì)文檔，看他們?yōu)槭裁匆@樣設(shè)計(jì)。6.大俠這里所說(shuō)的大俠，不是大家互相吹捧的"大俠"，而是實(shí)至名歸的高手。這個(gè)級(jí)別的人完全有能力寫出不差于Bindows/jQuery/Ext/YUI/Dojo的同等級(jí)別規(guī)模的前端開(kāi)發(fā)框架。應(yīng)用成熟的開(kāi)發(fā)框架指導(dǎo)、解決問(wèn)題。\o"viewsource"viewsource\o"print"print\o"?"?01//庫(kù)文件/mz/string/escapeReg.js02/**03*在拼接正則表達(dá)式字符串時(shí)，消除原字符串中特殊字符對(duì)正則表達(dá)式的干擾04*@author:meizz05*@version:2010/12/1606*@param{String}str被正則表達(dá)式字符串保護(hù)編碼的字符串07*@return{String}被保護(hù)處理過(guò)后的字符串08*/09mz.string.escapeReg=function(str){10returnstr.replace(newRegExp("([.*+?^=!:\x24{}()|[\\]\/\\\\])","g"),"\\\x241");11}12//庫(kù)文件/mz/url/delQuery.js13///includemz.string.escapeReg;14/**15*刪除URL字符串中指定的Query16*@author:meizz17*@version:2010/12/1618*@param{String}urlURL字符串19*@param{String}key被刪除的Query名20*@return{String}被刪除指定query后的URL字符串21*/22mz.url.delQuery=function(url,key){23key=mz.string.escapeReg(key);24varreg=newRegExp("((\\?)("+key+"=[^&]*&)+(?!"+key+25"=))|(((\\?|&)"+key+"=[^&]*)+$)|(&"+key+"=[^&]*)","g");26returnurl.replace(reg,"\x241")27}28//應(yīng)用實(shí)例29///includemz.url.delQuery;30varstr="/?pn=0";//刪除指定字符pn=031mz.url.delQuery(str,"pn");自成體系，有基礎(chǔ)，也有理論高度。知道為什么這樣設(shè)計(jì)，也知道什么樣的設(shè)計(jì)最好。比如這個(gè)例子可以有這樣的封裝：\o"viewsource"viewsource\o"print"print\o"?"?01//庫(kù)文件/mz/url/delQuery.js02///includemz.string.escapeReg;03/**04*刪除URL字符串中指定的Query05*@author:meizz06*@version:2010/12/1607*@param{String}urlURL字符串08*@param{String}key被刪除的Query名09*@return{String}被刪除指定query后的URL字符串10*/11Stotype.delQuery=function(key){12key=mz.string.escapeReg(key);13varreg=newRegExp("((\\?)("+key+"=[^&]*&)+(?!"+key+14"=))|