Web前端開發(fā)工程師成長之路

前端開發(fā)工程師必備技能：

1.2.3.4.5.6.7.8.9.

會點設(shè)計，不要求精湛，處理圖片，設(shè)計個小廣告是要的；精通HTML+CSS，并能快速處理各瀏覽器兼容問題；熟練掌握Javascript或Actionscript，精通加分；

熟練使用JS框架，如jQuery/YUI等，并解讀過源碼，熟練多框架加分；精通Ajax技術(shù)，必須的；

精通開發(fā)調(diào)試工具，如Firebug等；代碼語義化，懂優(yōu)化，壓縮和反壓縮；

對SEO有一定的了解，尤其是HTML結(jié)構(gòu)和標簽的使用；高效合成CSSSprite；

10.了解服務(wù)器方面基本知識；

11.熟練掌握一門后端語言，如PHP/ASP.NET等，絕對加分項；12.有自己的網(wǎng)站（看對網(wǎng)站所有東西的把握）；13.對移動開發(fā)有一定的了解和涉入；

14.熟練HTML5和CSS3技術(shù)（主要用于移動應用開發(fā)）；15.效率開發(fā)，精湛的開發(fā)軟件操作；

16.有過用戶體驗研究，更關(guān)注人性化頁面開發(fā)；17.了解瀏覽器工作原理，了解w3c標準，了解web2.0；

初階：

了解Web前端開發(fā)工程師是干嘛的？

參考閱讀：

學習HTML

參考閱讀：

學習CSS

參考閱讀：學習JavaScript

參考閱讀：

學習HTMLDOM

參考閱讀：

學習Ajax

參考閱讀：

學習jQuery

參考閱讀：

擴展閱讀：

擴展閱讀：WEB前端研發(fā)工程師編程能力成長之路

WEB前端研發(fā)工程師編程能力成長之路

【背景】

如果你是剛進入WEB前端研發(fā)領(lǐng)域，想試試這潭水有多深，看這篇文章吧；

如果你是做了兩三年WEB產(chǎn)品前端研發(fā)，迷茫找不著提高之路，看這篇文章吧；如果你是四五年的前端開發(fā)高手，沒有難題能難得住你的寂寞高手，來看這篇文章吧；

WEB前端研發(fā)工程師，在國內(nèi)是一個朝陽職業(yè)，自07-08年正式有這個職業(yè)以來，也不過三四年的時間。這個領(lǐng)域沒有學校的正規(guī)教育，沒有行內(nèi)成體系的理論指引，幾乎所有從事這個職業(yè)的人都是靠自己自學成才。自學成才，一條艱辛的坎坷路，我也是這樣一路走來。從201*年開始接觸WEB前端研發(fā)至今已然有了9個年頭，如今再回首，期間的走了很多彎路。推已及人，如果能讓那些后來者少走些彎路，辛甚辛甚！【前言】

所謂的天才，只不過是比平常人更快的掌握技能、完成工作罷了；只要你找到了正確的方向，并輔以足夠的時間，你一樣能夠踏上成功彼岸。

本文將WEB前端研發(fā)編程能力劃分了八個等級，每個等級都列舉出了對應的特征及破級提升之方法，希望每位在看本文的同學先準確定位自己的等級（不要以你目前能力的最高點，而是以你當前能力的中檔與之等級作對比，以免多走彎路），參考突破之法破之。

所謂的級別，只是你面對需求時的一種態(tài)度：能夠完成、能夠完美地完成、能夠超出預期地完成。以追求完美的態(tài)度加以扎實的編程功力，那就是你的編程水平。

切記心浮氣燥，級別夠了，那級別里的東西自然就懂了。悟了就是悟了，沒悟也沒關(guān)系，靜下心來，投入時間而已。

一.【入門】

能夠解決一些問題的水平。有一定的基礎(chǔ)（比如最常見的HTML標簽及其屬性、事件、方法；最常見的CSS屬性；基礎(chǔ)的JavaScript編程能力），能夠完成一些簡單的WEB前端研發(fā)需求。舉個例子：刪除一字符串中指定的字符。

varstr="";str=str.replace("?page","");alert(str);

str=str.substring(0,str.indexOf("/"));alert(str);

首先不要苛責代碼的對錯嚴謹，畢竟每個程序員都有這樣的一個過程；其次，這兩段代碼在這個實例里沒有什么大過錯，可能會有瑕疵，但能夠解決問題（刪除指定的字符），這就是這個級別的特征。再舉個例子：

//計算系統(tǒng)當前是星期幾varstr="";

varweek=newDate().getDay();if(week==0){

str="今天是星期日";}elseif(week==1){str="今天是星期一";}elseif(week==2){str="今天是星期二";}elseif(week==3){str="今天是星期三";}elseif(week==4){str="今天是星期四";}elseif(week==5){str="今天是星期五";}elseif(week==6){str="今天是星期六";}

//或者更好一些

varstr1="今天是星期";

varweek=newDate().getDay();switch(week){case0:

str1+="日";break;case1:

str1+="一";break;case2:

str1+="二";break;case3:

str1+="三";break;

case4:

str1+="四";break;

case5:

str1+="五";break;case6:

str1+="六";break;}

alert(str);alert(str1);

入門”階段是每個程序員的必經(jīng)之路，只要“入門”，你就上路了。所謂“師傅領(lǐng)進門，修行靠個人”，有了這個“入門”的基礎(chǔ)，自己就可以摸索著前進了。【進階之路】

將JavaScript、HTML、CSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍！只有將基礎(chǔ)打好，以后的路才能走的順暢。參考這些幫助文檔，力爭寫出無瑕疵的代碼。

這些編碼文檔建議不僅是在入門提高期看，在你以后每個階段破階的時候都應該看看，最基礎(chǔ)的東西往往也是最給力的東西，有時能夠給你帶來意想不到的收獲。二.【登堂】

能夠正確地解決問題。不管你是通過搜索網(wǎng)絡(luò)，或者通過改造某些成品代碼（jQuery/Dojo/Ext/YUI）案例，只要能夠無錯地完成需求。同樣以上面的那段“字符串剪裁”代碼為例：

varstr="";str=str.replace(/?page/,"");alert(str);

僅僅解決問題對于“登堂”階段來說已經(jīng)不是問題，這個級別所給出方案不能是漏洞百出。以上面這段代碼為例：replace方法的第一個參數(shù)雖然可以支持字符串，但最佳的類型是正則表達式；

vara=newArray("日","一","二","三","四","五","六");varweek=newDate().getDay();varstr="今天是星期"+a[week];alert(str);

對比“入門級”的代碼，不管是從代碼量、代碼效率、代碼優(yōu)美性、代碼思路來說，“登堂”級的這個日期處理代碼都要優(yōu)秀很多�！具M階之路】

這個階段雖然能夠給出正確的解題方案，但是不一定是最優(yōu)秀的方案。如何才能得到最優(yōu)秀的方案呢？首先就是積累各種能夠解決需求的方案，然后再驗證每個方案，在這些方案中選擇最好的一種。因此該階段的進階之路就是“行萬里路，看萬卷書”，積累各個需求的各個解決方案。

你可以扎身在專業(yè)論壇（藍色理想、無憂、CSDN）里，通讀所有的FAQ及帖子；你可以打開搜索引擎，窮舉所有的搜索結(jié)果。自己建立測試環(huán)境一一驗證這些代碼：去揣摩每段代碼的意圖，去比較每段代碼之間的差異。這兩條路可以讓你快速完成原始積累，當你再面對大多數(shù)需求時能夠說這些問題我以前做過，那你就水到渠成地晉階了。

三.【入室】

最強代碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優(yōu)秀的方案滿足需求。這個級別基本上產(chǎn)品開發(fā)編程中的代碼主力。給出的一招一式，招招都是絕招。

還以上面的那個例子為例，你能說出1、2、3之間的差別，以及適用于那種環(huán)境嗎？

varstr="";

//1、字符串剪裁

str.substring(0,str.indexOf("?page"));//2、正則表達式

str.replace(/?page/,"");//3、字符串分拆、合并

str.split("?page").join("");

能夠解決問題的方法會有很多，但是對于程序員來說應該選擇最優(yōu)秀的。上面這段代碼從代碼量來說“正則表達式”最優(yōu)秀；從代碼執(zhí)行效率來說：“字符串剪裁”法最高（Chrome中“正則表達式”效率最高），split法最次；從可擴展性上來說，“正則表達式”法最優(yōu)。具體使用那種方案視具體的需求環(huán)境而定。

“入室”階段，程序員應該能夠肯定的回答：對于這個需求而言，我的代碼就是最優(yōu)秀的代碼。再以“今天是星期幾”為例，“登堂”級的代碼你敢說是最優(yōu)秀的代碼了嗎？

//計算系統(tǒng)當前是星期幾

varstr="今天是星期"+"日一二三四五六".charAt(newDate().getDay());

對比“登堂”級的示例代碼，上面這段代碼給你什么感受？程序員追求的就是完美�！叭胧摇奔墑e追求的就是每一招每一式的完美無缺。從WEB前端編程來說，通過2年左右的努力，很多人能夠達到這個水平，但是，很大一部分人的編程能力也就止步于此�；蛳抻诋a(chǎn)品的需求單一性，或限于需求開發(fā)的時間緊迫性，或限于人的惰性，能夠完美地解決當前的需求就夠了。

由于長期處于技術(shù)平臺期，技術(shù)上得不到提高，通常這個級別的工程師會比較燥。技術(shù)上小有所成；或追求個人的突破；或追求產(chǎn)品差異性帶來的新鮮感；或者只是想換個心情；因此很多此級別的工程師會經(jīng)常換公司。戒驕戒躁：

切勿以為自己能寫一手漂亮的代碼而自滿；

切莫以為別人“尊稱”你一聲“大俠”你就以“大俠”自居；切莫以為自己積累了一些得意的代碼就成了框架式開發(fā)。

細節(jié)決定成敗，優(yōu)秀的方案并不能保證最終的成功。還以“刪除指定字符串”為例，原始字符串從格式上來看應該是了個URL鏈接，在去除“pn=0”之后，最末尾處留了一個尾巴“?”；如果原始字符串是

“”，去除“pn=0”之后?和&兩個符號緊貼一起，這更是明顯的bug�！具M階之路】

此階段進階之路就是：切勿心浮氣躁；你不再被需求牽著走，而是你牽著需求走。注重細節(jié)，注意那些當前需求里沒有明文給出的細節(jié)：代碼性能的差異、運行平臺（瀏覽器）的差異、需求的隱性擴展、代碼的向后兼容等等。再通讀幾遍HTML/CSS/JavaScript幫助文檔。

我建議這個級別的工程師做一做WebTreeView控件，要求總節(jié)點量一萬左右操作流暢，你的晉升之路就在這個控件的編碼過程中。四.【入微】

最強解決方案。你能夠走在需求的前面，將當前需求里有的、沒有直接提出來的、現(xiàn)在暫時沒有但將來可能有的等等，及前端編程潛規(guī)則等各個方方面面都綜合考慮，給出最優(yōu)方案。以一招勝萬招。

varstr="";//刪除指定字符pn=0

//我將這個字符串里所可能想到的各種情況都列舉出來vara=[

""http://pn=可能出現(xiàn)在?前

,""http://URL里允許pn值為空

,""http://URL里可有多個字段,""http://可能排在最后

,""http://可能有多個pn字段,""http://可能在中間

,""http://可能在中間成組,""http://可能零星分布];

/*需求的不言之秘：

?若出現(xiàn)在字符串最尾則要去之?&兩個符號不可重疊

*/

varreg=/((\\?)(pn=[^&]*&)+(?!pn=))|(((\\?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g;

for(vari=0;i

alert(a[i]+"\\n"+a[i].replace(reg,"$2"));}這個階段已經(jīng)不再追求一招一式，對你來說不是使用什么創(chuàng)新絕招解決需求，而是給出成熟穩(wěn)重的方案，從根上解決問題。針對某個當前需求你的代碼可能不是最優(yōu)，但是針對此類的需求你的代碼卻是最優(yōu)秀的代碼�！具M階之路】

很多WEB前端研發(fā)工程師在做了3-4年之后就會進入一個瓶頸期：產(chǎn)品開發(fā)需求是小菜一碟，沒有新鮮的可以挑戰(zhàn)的東西；代碼開發(fā)中的稀奇的解題方法都已經(jīng)嘗試過。沒有了可挑戰(zhàn)的難題，失去了探索的激情，也就沒有了再上升的動力，好不容易走過“入室”級別的人又會有八九成止步于此�；蜣D(zhuǎn)做技術(shù)領(lǐng)導人，或轉(zhuǎn)到其它的領(lǐng)域，或換公司。

這些人的上升之路在哪里呢？

這個階段單單依靠技巧和數(shù)量的累積已經(jīng)沒有什么效果了，突破之路在第5層《化蝶》里會詳細說明，我建議你在這個階段末尾著重關(guān)注編程理論：面向?qū)ο?過程、代碼組織形式、編譯、代碼規(guī)范、其它的框架設(shè)計等等。我建議這個級別的工程師做一做WebEditor控件，不要求完整功能，但是該控件里的模塊劃分、代碼組織、編程思想做到位，給出一個系統(tǒng)的解決方案。五.【化蝶】

破繭重生，這個層次關(guān)注的是編程語言本身，而不再關(guān)心產(chǎn)品需求。什么是繭？產(chǎn)品需求就是繭。當你一招勝萬招，打遍天下需求之時，你如果還拘泥于需求開發(fā)，那就是你限于繭中而不自知。要么就在這個繭里默默地老去，要么就破開繭獲得新生。

還是以那個“字符串剪裁”的老例子：

/**

*在拼接正則表達式字符串時，消除原字符串中特殊字符對正則表達式的干擾*@author:meizz

*@version:201*/12/16

*@param{String}str被正則表達式字符串保護編碼的字符串*@return{String}被保護處理過后的字符串*/

functionescapeReg(str){

returnstr.replace(newRegExp("([.*+?^=!:\\x24{}()|[\\\\]\\/\\\\\\\\])","g"),"\\\\\\x241");}/**

*刪除URL字符串中指定的Query*@author:meizz

*@version:201*/12/16

*@param{String}urlURL字符串*@param{String}key被刪除的Query名

*@return{String}被刪除指定query后的URL字符串*/

functiondelUrlQuery(url,key){

key=escapeReg(key);

varreg=newRegExp("((\\\\?)("+key+"=[^&]*&)+(?!"+key+"=))|(((\\\\?|&)"+key+"=[^&]*)+$)|(&"+key+"=[^&]*)","g");returnurl.replace(reg,"\\x241")}//應用實例

varstr="";//刪除指定字符pn=0delUrlQuery(str,"pn");

這段代碼相對于層次4《入微》有什么區(qū)別嗎？從代碼實現(xiàn)上來說沒有太大的區(qū)別，但是從思路上來說卻有著本質(zhì)的區(qū)別：1、不再是就事論事，頭疼醫(yī)頭，而是把一類問題抽象理論化，一招破萬招；2、有封裝的概念，不再是每次從零開始，而是站在半山腰開始爬。

在WEB前端研發(fā)隊伍里也有很大一部分人《入室》層次時就自我感覺良好，直接跨躍到《化蝶》，積累自己的代碼庫，抽象化問題。但沒有基礎(chǔ)，缺少強大的后勁，即使能夠破繭也經(jīng)受不了風吹雨打。一份不成熟的架構(gòu)設(shè)計對團隊開發(fā)帶來的危害遠大于它帶來的好處，這種例子在業(yè)界屢見不鮮。不要拔苗助長，不要不會走就想著跑，夯實基礎(chǔ)，水到渠成地成長，厚積薄發(fā)，強力地破繭而出�！具M階之路】

你已經(jīng)從原始積累，到厚積薄發(fā)，到破繭而出之后，你所關(guān)注的應該不再是一招一式、一個項目、一個模塊，而應該是一種思路，一種理論。你可以做以下幾個步驟以突破到更高層次：再仔細看幾遍HTML/CSS/JavaScript接口幫助文檔；選擇一門強語言（C++/C#/Java等）觀察理解這些語言的組織結(jié)構(gòu)，語言設(shè)計；看看原型鏈，鏈式語法編程，泛型，接口編程，DOM遙控器等等；仔細閱讀成熟的WEB前端開發(fā)框架的設(shè)計文檔，看他們?yōu)槭裁匆�這樣設(shè)計。六.【大俠】

這里所說的大俠，不是大家互相吹捧的“大俠”，而是實至名歸的高手。這個級別的人完全有能力寫出不差于Bindows/jQuery/Ext/YUI/Dojo的同等級別規(guī)模的前端開發(fā)框架。應用成熟的開發(fā)框架指導、解決問題。

//庫文件/mz/string/escapeReg.js

/**

*在拼接正則表達式字符串時，消除原字符串中特殊字符對正則表達式的干擾

*@author:meizz

*@version:201*/12/16

*@param{String}str被正則表達式字符串保護編碼的字符串*@return{String}被保護處理過后的字符串*/

mz.string.escapeReg=function(str){

returnstr.replace(newRegExp("([.*+?^=!:\\x24{}()|[\\\\]\\/\\\\\\\\])","g"),"\\\\\\x241");}

//庫文件/mz/url/delQuery.js///includemz.string.escapeReg;/**

*刪除URL字符串中指定的Query*@author:meizz

*@version:201*/12/16

*@param{String}urlURL字符串

*@param{String}key被刪除的Query名

*@return{String}被刪除指定query后的URL字符串*/

mz.url.delQuery=function(url,key){key=mz.string.escapeReg(key);

varreg=newRegExp("((\\\\?)("+key+"=[^&]*&)+(?!"+key+"=))|(((\\\\?|&)"+key+"=[^&]*)+$)|(&"+key+"=[^&]*)","g");returnurl.replace(reg,"\\x241")}

//應用實例

///includemz.url.delQuery;

varstr="";//刪除指定字符pn=0mz.url.delQuery(str,"pn");

自成體系，有基礎(chǔ)，也有理論高度。知道為什么這樣設(shè)計，也知道什么樣的設(shè)計最好。比如這個例子可以有這樣的封裝：

//庫文件/mz/url/delQuery.js///includemz.string.escapeReg;/**

*刪除URL字符串中指定的Query*@author:meizz

*@version:201*/12/16

*@param{String}urlURL字符串

*@param{String}key被刪除的Query名

*@return{String}被刪除指定query后的URL字符串*/

String.prototype.delQuery=function(key){key=mz.string.escapeReg(key);

varreg=newRegExp("((\\\\?)("+key+"=[^&]*&)+(?!"+key+"=))|(((\\\\?|&)"+key+"=[^&]*)+$)|(&"+key+"=[^&]*)","g");returnthis.replace(reg,"\\x241")}

//應用實例

///includemz.url.delQuery;

varstr="";//刪除指定字符pn=0str.delQuery("pn");

而為什么不采用下面的那種封裝呢？經(jīng)過了《知微》和《化蝶》你就懂了�！具M階出路】

道法自然，從根上去尋找突破的契機。你可以研讀HTML解析引擎設(shè)計與實現(xiàn)，JS解析引擎設(shè)計與實現(xiàn)，其它語言的代碼解析與編譯實現(xiàn)等等。

或者出些書。低級別的人寫的書要么是一大抄，空無一物；要么是害人。七.【宗師】

這個級別的人已然到了無招勝有招的境界。項目開發(fā)中的難題？沒有難題！運行平臺的差異？從根本上搞定！代碼規(guī)范、開發(fā)模式，早已經(jīng)被拋在身后。這個級別的人已經(jīng)不再關(guān)注于某個前端開發(fā)框架，而是應對具體的環(huán)境給出最佳的理論指導。

這個級別的人所注意的應該是以最合理的系統(tǒng)架構(gòu)引領(lǐng)著整個團隊的進步，在什么樣的場景下該用什么樣的架構(gòu)設(shè)計。3個、10個、50個、100個人的團隊最應該用哪種模式？等你到了宗師級別，你再來回答吧�！具M階出路】

每一個宗師就是一個高山，就是一個領(lǐng)域里的神，但是你僅滿足于在一群比你弱的群體展現(xiàn)你的強大嗎？如果還你是止步原地，那總會有人乘著飛機、宇宙飛船從你的頭領(lǐng)掠過，高處不勝寒！要突破這片領(lǐng)域，那就必須跳出這片領(lǐng)域。要想突破WEB前端研發(fā)的宗師級，那就跳出WEB前端吧，上面還有WEB開發(fā)。即使你是WEB前端的宗師，但沒有快速的數(shù)據(jù)響應，沒有高速的網(wǎng)絡(luò)架構(gòu)，沒有優(yōu)美的系統(tǒng)支持，你又能如何？所以突破之路就是把目光投到整條WEB開發(fā)的鏈條中去。八.【飛升】

其實嚴格來說，飛升已經(jīng)不是原領(lǐng)域的范圍了。在WEB研發(fā)領(lǐng)域，對于這個層次的有一個很好聽的稱謂：架構(gòu)師。當然那些“偽架構(gòu)師”另當別論。

一法通，萬法通。在其它的技術(shù)領(lǐng)域，也可以按照《入門》《登堂》《入室》《入微》《化蝶》《大俠》《宗師》來劃分等級；一樣也可以按照我這里所寫的每個級別的【進階之路】來快速提升。祝賀你再獲輝煌！

友情提示：本文中關(guān)于《Web前端開發(fā)工程師成長之路》給出的范例僅供您參考拓展思維使用，Web前端開發(fā)工程師成長之路：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責聲明：本文僅限學習分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《Web前端開發(fā)工程師成長之路》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.taixiivf.com/gongwen/585522.html

• 上一篇：web前端性能
• 下一篇：java個人小結(jié)