【背景】
如果你是剛進入WEB前端研發(fā)領域，想試試這潭水有多深尚骄，看這篇文章吧倔丈；
如果你是做了兩三年WEB產(chǎn)品前端研發(fā)需五，迷茫找不著提高之路轧坎，看這篇文章吧；
如果你是四五年的前端開發(fā)高手蜜氨，沒有難題能難得住你的寂寞高手飒炎，來看這篇文章吧笆豁；
WEB前端研發(fā)工程師赤赊，在國內(nèi)是一個朝陽職業(yè)抛计，自07-08年正式有這個職業(yè)以來爷辱，也不過三四年的時間朦肘。這個領域沒有學校的正規(guī)教育媒抠，沒有行內(nèi)成體系的理論指引，幾乎所有從事這個職業(yè)的人都是靠自己自學成才阀趴。自學成才刘急，一條艱辛的坎坷路浸踩，我也是這樣一路走來。從2002年開始接觸WEB前端研發(fā)至今已然有了9個年頭据块，如今再回首另假，期間的走了很多彎路怕犁。推已及人，如果能讓那些后來者少走些彎路戈轿，辛甚辛甚Ｐ渍取（web前端學習交流群：328058344 禁止閑聊款筑，非喜勿進Ｖ球稹）
【前言】
所謂的天才，只不過是比平常人更快的掌握技能奈梳、完成工作罷了杈湾；只要你找到了正確的方向，并輔以足夠的時間攘须，你一樣能夠踏上成功彼岸漆撞。
本文將WEB前端研發(fā)編程能力劃分了八個等級，每個等級都列舉出了對應的特征及破級提升之方法于宙，希望每位在看本文的同學先準確定位自己的等級（不要以你目前能力的最高點浮驳，而是以你當前能力的中檔與之等級作對比，以免多走彎路）捞魁，參考突破之法破之至会。
所謂的級別，只是你面對需求時的一種態(tài)度：能夠完成、能夠完美地完成县貌、能夠超出預期地完成。以追求完美的態(tài)度加以扎實的編程功力杭攻，那就是你的編程水平兆解。
切記心浮氣燥，級別夠了现拒，那級別里的東西自然就懂了。悟了就是悟了侥猬，沒悟也沒關(guān)系鹃锈，靜下心來，投入時間而已盆驹。
一.【入門】
能夠解決一些問題的水平。有一定的基礎（比如最常見的HTML標簽及其屬性玖瘸、事件、方法蔑匣；最常見的CSS屬性校套；基礎的JavaScript編程能力）侨把，能夠完成一些簡單的WEB前端研發(fā)需求。
舉個例子：刪除一字符串中指定的字符骇笔。
var str="www.baidu.com/?page";
str=str.replace('?page',"");
alert(str);
str=str.substring(0,str.indexOf("/"));
alert(str);
首先不要苛責代碼的對錯嚴謹懦傍，畢竟每個程序員都有這樣的一個過程葱跋；其次稍味，這兩段代碼在這個實例里沒有什么大過錯，可能會有瑕疵，但能夠解決問題（刪除指定的字符）疼燥，這就是這個級別的特征。
再舉個例子：
// 計算系統(tǒng)當前是星期幾
var str = "";
var week = new Date().getDay();
if (week == 0) {
str = "今天是星期日";
} else if (week == 1) {
str = "今天是星期一";
} else if (week == 2) {
str = "今天是星期二";
} else if (week == 3) {
str = "今天是星期三";
} else if (week == 4) {
str = "今天是星期四";
} else if (week == 5) {
str = "今天是星期五";
} else if (week == 6) {
str = "今天是星期六";
}
// 或者更好一些
var str1 = "今天是星期";
var week = new Date().getDay();
switch (week) {
case 0 :
str1 += "日";
break;
case 1 :
str1 += "一";
break;
case 2 :
str1 += "二";
break;
case 3 :
str1 += "三";
break;
case 4 :
str1 += "四";
break;
case 5 :
str1 += "五";
break;
case 6 :
str1 += "六";
break;
}
alert(str);
alert(str1);
入門”階段是每個程序員的必經(jīng)之路呈队，只要“入門”宪摧，你就上路了。所謂“師傅領進門岁歉，修行靠個人”熔掺，有了這個“入門”的基礎，自己就可以摸索著前進了。
【進階之路】
將JavaScript恨锚、HTML、CSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍！只有將基礎打好雇盖，以后的路才能走的順暢。參考這些幫助文檔，力爭寫出無瑕疵的代碼。
這些編碼文檔建議不僅是在入門提高期看，在你以后每個階段破階的時候都應該看看太颤，最基礎的東西往往也是最給力的東西，有時能夠給你帶來意想不到的收獲。
二.【登堂】
能夠正確地解決問題。不管你是通過搜索網(wǎng)絡，或者通過改造某些成品代碼（jQuery/Dojo/Ext/YUI）案例耐量，只要能夠無錯地完成需求溅漾。
同樣以上面的那段“字符串剪裁”代碼為例：
var str="www.baidu.com/?page";
str=str.replace(/?page/,"");
alert(str);
僅僅解決問題對于“登堂”階段來說已經(jīng)不是問題暮胧，這個級別所給出方案不能是漏洞百出严卖。以上面這段代碼為例：replace方法的第一個參數(shù)雖然可以支持字符串，但最佳的類型是正則表達式；
var a = new Array("日", "一", "二", "三", "四", "五", "六");
var week = new Date().getDay();
var str = "今天是星期"+ a[week];
alert(str);
對比“入門級”的代碼，不管是從代碼量色查、代碼效率序无、代碼優(yōu)美性、代碼思路來說，“登堂”級的這個日期處理代碼都要優(yōu)秀很多。
【進階之路】
這個階段雖然能夠給出正確的解題方案，但是不一定是最優(yōu)秀的方案题诵。如何才能得到最優(yōu)秀的方案呢篷店？首先就是積累各種能夠解決需求的方案钉赁，然后再驗證每個方案讳苦，在這些方案中選擇最好的一種式廷。因此該階段的進階之路就是“行萬里路，看萬卷書”，積累各個需求的各個解決方案。
你可以扎身在專業(yè)論壇（藍色理想瓢对、無憂、CSDN）里，通讀所有的FAQ及帖子乙濒；你可以打開搜索引擎傻丝，窮舉所有的搜索結(jié)果忱反。自己建立測試環(huán)境一一驗證這些代碼：去揣摩每段代碼的意圖米者，去比較每段代碼之間的差異随橘。這兩條路可以讓你快速完成原始積累，當你再面對大多數(shù)需求時能夠說這些問題我以前做過，那你就水到渠成地晉階了。
三.【入室】
最強代碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優(yōu)秀的方案滿足需求。這個級別基本上產(chǎn)品開發(fā)編程中的代碼主力。給出的一招一式，招招都是絕招媳维。
還以上面的那個例子為例，你能說出1、2、3之間的差別，以及適用于那種環(huán)境嗎？
var str="www.baidu.com/?page";
// 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)當前是星期幾
var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
對比“登堂”級的示例代碼坠狡，上面這段代碼給你什么感受凯亮？程序員追求的就是完美置谦】妫“入室”級別追求的就是每一招每一式的完美無缺盯串。
從WEB前端編程來說几缭，通過2年左右的努力某抓，很多人能夠達到這個水平副编，但是队腐，很大一部分人的編程能力也就止步于此为严。或限于產(chǎn)品的需求單一性，或限于需求開發(fā)的時間緊迫性庸诱，或限于人的惰性聚谁，能夠完美地解決當前的需求就夠了炫隶。
由于長期處于技術(shù)平臺期栅贴，技術(shù)上得不到提高坛缕，通常這個級別的工程師會比較燥搀军。技術(shù)上小有所成敛摘；或追求個人的突破；或追求產(chǎn)品差異性帶來的新鮮感；或者只是想換個心情；因此很多此級別的工程師會經(jīng)常換公司泻骤。
戒驕戒躁：
切勿以為自己能寫一手漂亮的代碼而自滿嫡霞；
切莫以為別人“尊稱”你一聲“大俠”你就以“大俠”自居端姚；
切莫以為自己積累了一些得意的代碼就成了框架式開發(fā)尚氛。
細節(jié)決定成敗，優(yōu)秀的方案并不能保證最終的成功。還以“刪除指定字符串”為例怠晴，原始字符串從格式上來看應該是了個URL鏈接美莫，在去除“pn=0”之后，最末尾處留了一個尾巴“?”；如果原始字符串是“http://www.xxx.com/?pn=0&a=1”婉徘，去除“pn=0”之后 ? 和 & 兩個符號緊貼一起，這更是明顯的bug章钾。
【進階之路】
此階段進階之路就是：切勿心浮氣躁；你不再被需求牽著走，而是你牽著需求走翻诉。注重細節(jié)蛾派，注意那些當前需求里沒有明文給出的細節(jié)：代碼性能的差異、運行平臺（瀏覽器）的差異、需求的隱性擴展髓考、代碼的向后兼容等等乌询。（web前端學習交流群：328058344 禁止閑聊，非喜勿進？浪妗）
再通讀幾遍HTML/CSS/JavaScript幫助文檔凌蔬。
我建議這個級別的工程師做一做WebTreeView控件纺涤，要求總節(jié)點量一萬左右操作流暢伯顶，你的晉升之路就在這個控件的編碼過程中。
