Web前端開發(fā)工程師成長之路
前端開發(fā)工程師必備技能:
1.2.3.4.5.6.7.8.9.
會點設(shè)計,不要求精湛,處理圖片,設(shè)計個小廣告是要的;精通HTML+CSS,并能快速處理各瀏覽器兼容問題;熟練掌握J(rèn)avascript或Actionscript,精通加分;
熟練使用JS框架,如jQuery/YUI等,并解讀過源碼,熟練多框架加分;精通Ajax技術(shù),必須的;
精通開發(fā)調(diào)試工具,如Firebug等;代碼語義化,懂優(yōu)化,壓縮和反壓縮;
對SEO有一定的了解,尤其是HTML結(jié)構(gòu)和標(biāo)簽的使用;高效合成CSSSprite;
10.了解服務(wù)器方面基本知識;
11.熟練掌握一門后端語言,如PHP/ASP.NET等,絕對加分項;12.有自己的網(wǎng)站(看對網(wǎng)站所有東西的把握);13.對移動開發(fā)有一定的了解和涉入;
14.熟練HTML5和CSS3技術(shù)(主要用于移動應(yīng)用開發(fā));15.效率開發(fā),精湛的開發(fā)軟件操作;
16.有過用戶體驗研究,更關(guān)注人性化頁面開發(fā);17.了解瀏覽器工作原理,了解w3c標(biāo)準(zhǔn),了解web2.0;
初階:
了解Web前端開發(fā)工程師是干嘛的?
參考閱讀:
學(xué)習(xí)HTML
參考閱讀:
學(xué)習(xí)CSS
參考閱讀:學(xué)習(xí)JavaScript
參考閱讀:
學(xué)習(xí)HTMLDOM
參考閱讀:
學(xué)習(xí)Ajax
參考閱讀:
學(xué)習(xí)jQuery
參考閱讀:
擴展閱讀:
擴展閱讀:WEB前端研發(fā)工程師編程能力成長之路
WEB前端研發(fā)工程師編程能力成長之路
【背景】
如果你是剛進(jìn)入WEB前端研發(fā)領(lǐng)域,想試試這潭水有多深,看這篇文章吧;
如果你是做了兩三年WEB產(chǎn)品前端研發(fā),迷茫找不著提高之路,看這篇文章吧;如果你是四五年的前端開發(fā)高手,沒有難題能難得住你的寂寞高手,來看這篇文章吧;
WEB前端研發(fā)工程師,在國內(nèi)是一個朝陽職業(yè),自07-08年正式有這個職業(yè)以來,也不過三四年的時間。這個領(lǐng)域沒有學(xué)校的正規(guī)教育,沒有行內(nèi)成體系的理論指引,幾乎所有從事這個職業(yè)的人都是靠自己自學(xué)成才。自學(xué)成才,一條艱辛的坎坷路,我也是這樣一路走來。從201*年開始接觸WEB前端研發(fā)至今已然有了9個年頭,如今再回首,期間的走了很多彎路。推已及人,如果能讓那些后來者少走些彎路,辛甚辛甚!【前言】
所謂的天才,只不過是比平常人更快的掌握技能、完成工作罷了;只要你找到了正確的方向,并輔以足夠的時間,你一樣能夠踏上成功彼岸。
本文將WEB前端研發(fā)編程能力劃分了八個等級,每個等級都列舉出了對應(yīng)的特征及破級提升之方法,希望每位在看本文的同學(xué)先準(zhǔn)確定位自己的等級(不要以你目前能力的最高點,而是以你當(dāng)前能力的中檔與之等級作對比,以免多走彎路),參考突破之法破之。
所謂的級別,只是你面對需求時的一種態(tài)度:能夠完成、能夠完美地完成、能夠超出預(yù)期地完成。以追求完美的態(tài)度加以扎實的編程功力,那就是你的編程水平。
切記心浮氣燥,級別夠了,那級別里的東西自然就懂了。悟了就是悟了,沒悟也沒關(guān)系,靜下心來,投入時間而已。
一.【入門】
能夠解決一些問題的水平。有一定的基礎(chǔ)(比如最常見的HTML標(biāo)簽及其屬性、事件、方法;最常見的CSS屬性;基礎(chǔ)的JavaScript編程能力),能夠完成一些簡單的WEB前端研發(fā)需求。舉個例子:刪除一字符串中指定的字符。
varstr="";str=str.replace("?page","");alert(str);
str=str.substring(0,str.indexOf("/"));alert(str);
首先不要苛責(zé)代碼的對錯嚴(yán)謹(jǐn),畢竟每個程序員都有這樣的一個過程;其次,這兩段代碼在這個實例里沒有什么大過錯,可能會有瑕疵,但能夠解決問題(刪除指定的字符),這就是這個級別的特征。再舉個例子:
//計算系統(tǒng)當(dā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)進(jìn)門,修行靠個人”,有了這個“入門”的基礎(chǔ),自己就可以摸索著前進(jìn)了!具M(jìn)階之路】
將JavaScript、HTML、CSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍!只有將基礎(chǔ)打好,以后的路才能走的順暢。參考這些幫助文檔,力爭寫出無瑕疵的代碼。
這些編碼文檔建議不僅是在入門提高期看,在你以后每個階段破階的時候都應(yīng)該看看,最基礎(chǔ)的東西往往也是最給力的東西,有時能夠給你帶來意想不到的收獲。二.【登堂】
能夠正確地解決問題。不管你是通過搜索網(wǎng)絡(luò),或者通過改造某些成品代碼(jQuery/Dojo/Ext/YUI)案例,只要能夠無錯地完成需求。同樣以上面的那段“字符串剪裁”代碼為例:
varstr="";str=str.replace(/?page/,"");alert(str);
僅僅解決問題對于“登堂”階段來說已經(jīng)不是問題,這個級別所給出方案不能是漏洞百出。以上面這段代碼為例:replace方法的第一個參數(shù)雖然可以支持字符串,但最佳的類型是正則表達(dá)式;
vara=newArray("日","一","二","三","四","五","六");varweek=newDate().getDay();varstr="今天是星期"+a[week];alert(str);
對比“入門級”的代碼,不管是從代碼量、代碼效率、代碼優(yōu)美性、代碼思路來說,“登堂”級的這個日期處理代碼都要優(yōu)秀很多。【進(jìn)階之路】
這個階段雖然能夠給出正確的解題方案,但是不一定是最優(yōu)秀的方案。如何才能得到最優(yōu)秀的方案呢?首先就是積累各種能夠解決需求的方案,然后再驗證每個方案,在這些方案中選擇最好的一種。因此該階段的進(jìn)階之路就是“行萬里路,看萬卷書”,積累各個需求的各個解決方案。
你可以扎身在專業(yè)論壇(藍(lán)色理想、無憂、CSDN)里,通讀所有的FAQ及帖子;你可以打開搜索引擎,窮舉所有的搜索結(jié)果。自己建立測試環(huán)境一一驗證這些代碼:去揣摩每段代碼的意圖,去比較每段代碼之間的差異。這兩條路可以讓你快速完成原始積累,當(dāng)你再面對大多數(shù)需求時能夠說這些問題我以前做過,那你就水到渠成地晉階了。
三.【入室】
最強代碼,知道所有能夠解決需求的各種方案,能夠選擇使用最優(yōu)秀的方案滿足需求。這個級別基本上產(chǎn)品開發(fā)編程中的代碼主力。給出的一招一式,招招都是絕招。
還以上面的那個例子為例,你能說出1、2、3之間的差別,以及適用于那種環(huán)境嗎?
varstr="";
//1、字符串剪裁
str.substring(0,str.indexOf("?page"));//2、正則表達(dá)式
str.replace(/?page/,"");//3、字符串分拆、合并
str.split("?page").join("");
能夠解決問題的方法會有很多,但是對于程序員來說應(yīng)該選擇最優(yōu)秀的。上面這段代碼從代碼量來說“正則表達(dá)式”最優(yōu)秀;從代碼執(zhí)行效率來說:“字符串剪裁”法最高(Chrome中“正則表達(dá)式”效率最高),split法最次;從可擴展性上來說,“正則表達(dá)式”法最優(yōu)。具體使用那種方案視具體的需求環(huán)境而定。
“入室”階段,程序員應(yīng)該能夠肯定的回答:對于這個需求而言,我的代碼就是最優(yōu)秀的代碼。再以“今天是星期幾”為例,“登堂”級的代碼你敢說是最優(yōu)秀的代碼了嗎?
//計算系統(tǒng)當(dāng)前是星期幾
varstr="今天是星期"+"日一二三四五六".charAt(newDate().getDay());
對比“登堂”級的示例代碼,上面這段代碼給你什么感受?程序員追求的就是完美!叭胧摇奔墑e追求的就是每一招每一式的完美無缺。從WEB前端編程來說,通過2年左右的努力,很多人能夠達(dá)到這個水平,但是,很大一部分人的編程能力也就止步于此。或限于產(chǎn)品的需求單一性,或限于需求開發(fā)的時間緊迫性,或限于人的惰性,能夠完美地解決當(dāng)前的需求就夠了。
由于長期處于技術(shù)平臺期,技術(shù)上得不到提高,通常這個級別的工程師會比較燥。技術(shù)上小有所成;或追求個人的突破;或追求產(chǎn)品差異性帶來的新鮮感;或者只是想換個心情;因此很多此級別的工程師會經(jīng)常換公司。戒驕戒躁:
切勿以為自己能寫一手漂亮的代碼而自滿;
切莫以為別人“尊稱”你一聲“大俠”你就以“大俠”自居;切莫以為自己積累了一些得意的代碼就成了框架式開發(fā)。
細(xì)節(jié)決定成敗,優(yōu)秀的方案并不能保證最終的成功。還以“刪除指定字符串”為例,原始字符串從格式上來看應(yīng)該是了個URL鏈接,在去除“pn=0”之后,最末尾處留了一個尾巴“?”;如果原始字符串是
“”,去除“pn=0”之后?和&兩個符號緊貼一起,這更是明顯的bug!具M(jìn)階之路】
此階段進(jìn)階之路就是:切勿心浮氣躁;你不再被需求牽著走,而是你牽著需求走。注重細(xì)節(jié),注意那些當(dāng)前需求里沒有明文給出的細(xì)節(jié):代碼性能的差異、運行平臺(瀏覽器)的差異、需求的隱性擴展、代碼的向后兼容等等。再通讀幾遍HTML/CSS/JavaScript幫助文檔。
我建議這個級別的工程師做一做WebTreeView控件,要求總節(jié)點量一萬左右操作流暢,你的晉升之路就在這個控件的編碼過程中。四.【入微】
最強解決方案。你能夠走在需求的前面,將當(dāng)前需求里有的、沒有直接提出來的、現(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)重的方案,從根上解決問題。針對某個當(dāng)前需求你的代碼可能不是最優(yōu),但是針對此類的需求你的代碼卻是最優(yōu)秀的代碼!具M(jìn)階之路】
很多WEB前端研發(fā)工程師在做了3-4年之后就會進(jìn)入一個瓶頸期:產(chǎn)品開發(fā)需求是小菜一碟,沒有新鮮的可以挑戰(zhàn)的東西;代碼開發(fā)中的稀奇的解題方法都已經(jīng)嘗試過。沒有了可挑戰(zhàn)的難題,失去了探索的激情,也就沒有了再上升的動力,好不容易走過“入室”級別的人又會有八九成止步于此。或轉(zhuǎn)做技術(shù)領(lǐng)導(dǎo)人,或轉(zhuǎn)到其它的領(lǐng)域,或換公司。
這些人的上升之路在哪里呢?
這個階段單單依靠技巧和數(shù)量的累積已經(jīng)沒有什么效果了,突破之路在第5層《化蝶》里會詳細(xì)說明,我建議你在這個階段末尾著重關(guān)注編程理論:面向?qū)ο?過程、代碼組織形式、編譯、代碼規(guī)范、其它的框架設(shè)計等等。我建議這個級別的工程師做一做WebEditor控件,不要求完整功能,但是該控件里的模塊劃分、代碼組織、編程思想做到位,給出一個系統(tǒng)的解決方案。五.【化蝶】
破繭重生,這個層次關(guān)注的是編程語言本身,而不再關(guān)心產(chǎn)品需求。什么是繭?產(chǎn)品需求就是繭。當(dāng)你一招勝萬招,打遍天下需求之時,你如果還拘泥于需求開發(fā),那就是你限于繭中而不自知。要么就在這個繭里默默地老去,要么就破開繭獲得新生。
還是以那個“字符串剪裁”的老例子:
/**
*在拼接正則表達(dá)式字符串時,消除原字符串中特殊字符對正則表達(dá)式的干擾*@author:meizz
*@version:201*/12/16
*@param{String}str被正則表達(dá)式字符串保護(hù)編碼的字符串*@return{String}被保護(hù)處理過后的字符串*/
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")}//應(yīng)用實例
varstr="";//刪除指定字符pn=0delUrlQuery(str,"pn");
這段代碼相對于層次4《入微》有什么區(qū)別嗎?從代碼實現(xiàn)上來說沒有太大的區(qū)別,但是從思路上來說卻有著本質(zhì)的區(qū)別:1、不再是就事論事,頭疼醫(yī)頭,而是把一類問題抽象理論化,一招破萬招;2、有封裝的概念,不再是每次從零開始,而是站在半山腰開始爬。
在WEB前端研發(fā)隊伍里也有很大一部分人《入室》層次時就自我感覺良好,直接跨躍到《化蝶》,積累自己的代碼庫,抽象化問題。但沒有基礎(chǔ),缺少強大的后勁,即使能夠破繭也經(jīng)受不了風(fēng)吹雨打。一份不成熟的架構(gòu)設(shè)計對團隊開發(fā)帶來的危害遠(yuǎn)大于它帶來的好處,這種例子在業(yè)界屢見不鮮。不要拔苗助長,不要不會走就想著跑,夯實基礎(chǔ),水到渠成地成長,厚積薄發(fā),強力地破繭而出!具M(jìn)階之路】
你已經(jīng)從原始積累,到厚積薄發(fā),到破繭而出之后,你所關(guān)注的應(yīng)該不再是一招一式、一個項目、一個模塊,而應(yīng)該是一種思路,一種理論。你可以做以下幾個步驟以突破到更高層次:再仔細(xì)看幾遍HTML/CSS/JavaScript接口幫助文檔;選擇一門強語言(C++/C#/Java等)觀察理解這些語言的組織結(jié)構(gòu),語言設(shè)計;看看原型鏈,鏈?zhǔn)秸Z法編程,泛型,接口編程,DOM遙控器等等;仔細(xì)閱讀成熟的WEB前端開發(fā)框架的設(shè)計文檔,看他們?yōu)槭裁匆@樣設(shè)計。六.【大俠】
這里所說的大俠,不是大家互相吹捧的“大俠”,而是實至名歸的高手。這個級別的人完全有能力寫出不差于Bindows/jQuery/Ext/YUI/Dojo的同等級別規(guī)模的前端開發(fā)框架。應(yīng)用成熟的開發(fā)框架指導(dǎo)、解決問題。
//庫文件/mz/string/escapeReg.js
/**
*在拼接正則表達(dá)式字符串時,消除原字符串中特殊字符對正則表達(dá)式的干擾
*@author:meizz
*@version:201*/12/16
*@param{String}str被正則表達(dá)式字符串保護(hù)編碼的字符串*@return{String}被保護(hù)處理過后的字符串*/
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")}
//應(yīng)用實例
///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")}
//應(yīng)用實例
///includemz.url.delQuery;
varstr="";//刪除指定字符pn=0str.delQuery("pn");
而為什么不采用下面的那種封裝呢?經(jīng)過了《知微》和《化蝶》你就懂了。【進(jìn)階出路】
道法自然,從根上去尋找突破的契機。你可以研讀HTML解析引擎設(shè)計與實現(xiàn),JS解析引擎設(shè)計與實現(xiàn),其它語言的代碼解析與編譯實現(xiàn)等等。
或者出些書。低級別的人寫的書要么是一大抄,空無一物;要么是害人。七.【宗師】
這個級別的人已然到了無招勝有招的境界。項目開發(fā)中的難題?沒有難題!運行平臺的差異?從根本上搞定!代碼規(guī)范、開發(fā)模式,早已經(jīng)被拋在身后。這個級別的人已經(jīng)不再關(guān)注于某個前端開發(fā)框架,而是應(yīng)對具體的環(huán)境給出最佳的理論指導(dǎo)。
這個級別的人所注意的應(yīng)該是以最合理的系統(tǒng)架構(gòu)引領(lǐng)著整個團隊的進(jìn)步,在什么樣的場景下該用什么樣的架構(gòu)設(shè)計。3個、10個、50個、100個人的團隊最應(yīng)該用哪種模式?等你到了宗師級別,你再來回答吧!具M(jìn)階出路】
每一個宗師就是一個高山,就是一個領(lǐng)域里的神,但是你僅滿足于在一群比你弱的群體展現(xiàn)你的強大嗎?如果還你是止步原地,那總會有人乘著飛機、宇宙飛船從你的頭領(lǐng)掠過,高處不勝寒!要突破這片領(lǐng)域,那就必須跳出這片領(lǐng)域。要想突破WEB前端研發(fā)的宗師級,那就跳出WEB前端吧,上面還有WEB開發(fā)。即使你是WEB前端的宗師,但沒有快速的數(shù)據(jù)響應(yīng),沒有高速的網(wǎng)絡(luò)架構(gòu),沒有優(yōu)美的系統(tǒng)支持,你又能如何?所以突破之路就是把目光投到整條WEB開發(fā)的鏈條中去。八.【飛升】
其實嚴(yán)格來說,飛升已經(jīng)不是原領(lǐng)域的范圍了。在WEB研發(fā)領(lǐng)域,對于這個層次的有一個很好聽的稱謂:架構(gòu)師。當(dāng)然那些“偽架構(gòu)師”另當(dāng)別論。
一法通,萬法通。在其它的技術(shù)領(lǐng)域,也可以按照《入門》《登堂》《入室》《入微》《化蝶》《大俠》《宗師》來劃分等級;一樣也可以按照我這里所寫的每個級別的【進(jìn)階之路】來快速提升。祝賀你再獲輝煌!
友情提示:本文中關(guān)于《Web前端開發(fā)工程師成長之路》給出的范例僅供您參考拓展思維使用,Web前端開發(fā)工程師成長之路:該篇文章建議您自主創(chuàng)作。
來源:網(wǎng)絡(luò)整理 免責(zé)聲明:本文僅限學(xué)習(xí)分享,如產(chǎn)生版權(quán)問題,請聯(lián)系我們及時刪除。