【背景】

如果你是剛進(jìn)入web前端研發(fā)領(lǐng)域，想試試這潭水有多深，看這篇文章吧； 如果你是做了兩三年web產(chǎn)品前端研發(fā)，迷茫找不著提高之路，看這篇文章吧； 如果你是四五年的前端開發(fā)高手，沒有難題能難得住你的寂寞高手，來看這篇文章吧；

web前端研發(fā)工程師，在國內(nèi)是一個(gè)朝陽職業(yè)。這個(gè)領(lǐng)域沒有學(xué)校的正規(guī)教育，沒有行內(nèi)成體系的理論指引，幾乎所有從事這個(gè)職業(yè)的人都是靠自己自學(xué)成才。自學(xué)成才，一條艱辛的坎坷路，我也是這樣一路走來。，如今再回首，期間的走了很多彎路。推已及人，如果能讓那些后來者少走些彎路，辛甚辛甚！

前言

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

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

所謂的級別，只是你面對需求時(shí)的一種態(tài)度：能夠完成、能夠完美地完成、能夠超出預(yù)期地完成。以追求完美的態(tài)度加以扎實(shí)的編程功力，那就是你的編程水平。 切記心浮氣燥，級別夠了，那級別里的東西自然就懂了。悟了就是悟了，沒悟也沒關(guān)系，靜下心來，投入時(shí)間而已。

入門

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

var str="www.baidu.com/?page";str=str.replace('?page',"");alert(str);str=str.substring(0,str.indexof("/"));alert(str);首先不要苛責(zé)代碼的對錯(cuò)嚴(yán)謹(jǐn)，畢竟每個(gè)程序員都有這樣的一個(gè)過程；其次，這兩段代碼在這個(gè)實(shí)例里沒有什么大過錯(cuò)，可能會(huì)有瑕疵，但能夠解決問題（刪除指定的字符），這就是這個(gè)級別的特征。 再舉個(gè)例子：
// 計(jì)算系統(tǒng)當(dā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);
入門”階段是每個(gè)程序員的必經(jīng)之路，只要”入門”，你就上路了。所謂”師傅領(lǐng)進(jìn)門，修行靠個(gè)人”，有了這個(gè)”入門”的基礎(chǔ)，自己就可以摸索著前進(jìn)了。
進(jìn)階之路
將Javascript、html、css之類的編碼幫助手冊里的每個(gè)方法/屬性都通讀幾遍！只有將基礎(chǔ)打好，以后的路才能走的順暢。參考這些幫助文檔，力爭寫出無瑕疵的代碼。 這些編碼文檔建議不僅是在入門提高期看，在你以后每個(gè)階段破階的時(shí)候都應(yīng)該看看，最基礎(chǔ)的東西往往也是最給力的東西，有時(shí)能夠給你帶來意想不到的收獲。
登堂
能夠正確地解決問題。不管你是通過搜索網(wǎng)絡(luò)，或者通過改造某些成品代碼（jQuery/dojo/ext/yui）案例，只要能夠無錯(cuò)地完成需求。 同樣以上面的那段”字符串剪裁”代碼為例：
var str="www.baidu.com/?page";str=str.replace(/?page/,"");alert(str);僅僅解決問題對于”登堂”階段來說已經(jīng)不是問題，這個(gè)級別所給出方案不能是漏洞百出。以上面這段代碼為例：replace方法的第一個(gè)參數(shù)雖然可以支持字符串，但最佳的類型是正則表達(dá)式；
var a = new array("日", "一", "二", "三", "四", "五", "六");var week = new date().getday();var str = "今天是星期"+ a[week];alert(str);
對比”入門級”的代碼，不管是從代碼量、代碼效率、代碼優(yōu)美性、代碼思路來說，”登堂”級的這個(gè)日期處理代碼都要優(yōu)秀很多。
進(jìn)階之路
這個(gè)階段雖然能夠給出正確的解題方案，但是不一定是最優(yōu)秀的方案。如何才能得到最優(yōu)秀的方案呢？首先就是積累各種能夠解決需求的方案，然后再驗(yàn)證每個(gè)方案，在這些方案中選擇最好的一種。因此該階段的進(jìn)階之路就是”行萬里路，看萬卷書”，積累各個(gè)需求的各個(gè)解決方案。
你可以扎身在專業(yè)論壇（藍(lán)色理想、無憂、csdn）里，通讀所有的faq及帖子；你可以打開搜索引擎，窮舉所有的搜索結(jié)果。自己建立測試環(huán)境一一驗(yàn)證這些代碼：去揣摩每段代碼的意圖，去比較每段代碼之間的差異。這兩條路可以讓你快速完成原始積累，當(dāng)你再面對大多數(shù)需求時(shí)能夠說這些問題我以前做過，那你就水到渠成地晉階了。
入室
最強(qiáng)代碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優(yōu)秀的方案滿足需求。這個(gè)級別基本上產(chǎn)品開發(fā)編程中的代碼主力。給出的一招一式，招招都是絕招。 還以上面的那個(gè)例子為例，你能說出1、2、3之間的差別，以及適用于那種環(huán)境嗎？
var str="www.baidu.com/?page";// 1、字符串剪裁str.substring(0, str.indexof("?page"));// 2、正則表達(dá)式str.replace(/?page/, "");// 3、字符串分拆、合并str.split("?page").join("");
能夠解決問題的方法會(huì)有很多，但是對于程序員來說應(yīng)該選擇最優(yōu)秀的。上面這段代碼從代碼量來說”正則表達(dá)式”最優(yōu)秀；從代碼執(zhí)行效率來說： “字符串剪裁”法最高（Chrome中”正則表達(dá)式”效率最高），split法最次；從可擴(kuò)展性上來說，”正則表達(dá)式”法最優(yōu)。具體使用那種方案視具體的需求環(huán)境而定。
“入室”階段，程序員應(yīng)該能夠肯定的回答：對于這個(gè)需求而言，我的代碼就是最優(yōu)秀的代碼。
再以”今天是星期幾”為例，”登堂”級的代碼你敢說是最優(yōu)秀的代碼了嗎？
// 計(jì)算系統(tǒng)當(dāng)前是星期幾var str = "今天是星期" + "日一二三四五六".charat(new date().getday());
對比”登堂”級的示例代碼，上面這段代碼給你什么感受？程序員追求的就是完美。”入室”級別追求的就是每一招每一式的完美無缺。
從web前端編程來說，通過2年左右的努力，很多人能夠達(dá)到這個(gè)水平，但是，很大一部分人的編程能力也就止步于此。或限于產(chǎn)品的需求單一性，或限于需求開發(fā)的時(shí)間緊迫性，或限于人的惰性，能夠完美地解決當(dāng)前的需求就夠了。
由于長期處于技術(shù)平臺(tái)期，技術(shù)上得不到提高，通常這個(gè)級別的工程師會(huì)比較燥。技術(shù)上小有所成；或追求個(gè)人的突破；或追求產(chǎn)品差異性帶來的新鮮感；或者只是想換個(gè)心情；因此很多此級別的工程師會(huì)經(jīng)常換公司。
戒驕戒躁：
切勿以為自己能寫一手漂亮的代碼而自滿； 切莫以為別人”尊稱”你一聲”大俠”你就以 “大俠”自居； 切莫以為自己積累了一些得意的代碼就成了框架式開發(fā)。
細(xì)節(jié)決定成敗，優(yōu)秀的方案并不能保證最終的成功。還以”刪除指定字符串”為例，原始字符串從格式上來看應(yīng)該是了個(gè)url鏈接，在去除”pn=0”之后，最末尾處留了一個(gè)尾巴”?”；如果原始字符串是"http://www.xxx.com/?pn=0&a=1"，去除”pn=0”之后 ? 和 & 兩個(gè)符號緊貼一起，這更是明顯的bug。
進(jìn)階之路
此階段進(jìn)階之路就是：切勿心浮氣躁；你不再被需求牽著走，而是你牽著需求走。注重細(xì)節(jié)，注意那些當(dāng)前需求里沒有明文給出的細(xì)節(jié)：代碼性能的差異、運(yùn)行平臺(tái)（瀏覽器）的差異、需求的隱性擴(kuò)展、代碼的向后兼容等等。
再通讀幾遍html/css/javascript幫助文檔。
我建議這個(gè)級別的工程師做一做webtreeview控件，要求總節(jié)點(diǎn)量一萬左右操作流暢，你的晉升之路就在這個(gè)控件的編碼過程中。
入微
最強(qiáng)解決方案。你能夠走在需求的前面，將當(dāng)前需求里有的、沒有直接提出來的、現(xiàn)在暫時(shí)沒有但將來可能有的等等，及前端編程潛規(guī)則等各個(gè)方方面面都綜合考慮，給出最優(yōu)方案。以一招勝萬招。
var str = "http://www.xxx.com/?pn=0";   // 刪除指定字符 pn=0// 我將這個(gè)字符串里所可能想到的各種情況都列舉出來var a = [         "http://www.xxx.com/vmpn=?pn=0"// pn= 可能出現(xiàn)在 ? 前        , "http://www.xxx.com/vmpn=?pn="// url里允許pn 值為空        , "http://www.xxx.com/vmpn=?pn=0&a=1"// url 里可有多個(gè)字段        , "http://www.xxx.com/vmpn=?a=1&pn=0"// 可能排在最后        , "http://www.xxx.com/vmpn=?a=1&pn=0&pn=1"// 可能有多個(gè) pn 字段        , "http://www.xxx.com/vmpn=?a=1&pn=0&b=2"// 可能在中間        , "http://www.xxx.com/vmpn=?a=1&pn=0&pn=1&b=1"  // 可能在中間成組        , "http://www.xxx.com/vmpn=?a=1&pn=0&b=1&pn=1"  // 可能零星分布];/* 需求的不言之秘：? 若出現(xiàn)在字符串最尾則要去之? & 兩個(gè)符號不可重疊*/var reg = /((/?)(pn=[^&]*&)+(?!pn=))|(((/?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g;for (var i = 0; i < a.length; i++) {    alert(a + "/n" + a.replace(reg, "$2"));}
這個(gè)階段已經(jīng)不再追求一招一式，對你來說不是使用什么創(chuàng)新絕招解決需求，而是給出成熟穩(wěn)重的方案，從根上解決問題。針對某個(gè)當(dāng)前需求你的代碼可能不是最優(yōu)，但是針對此類的需求你的代碼卻是最優(yōu)秀的代碼。
進(jìn)階之路
很多web前端研發(fā)工程師在做了3-4年之后就會(huì)進(jìn)入一個(gè)瓶頸期：產(chǎn)品開發(fā)需求是小菜一碟，沒有新鮮的可以挑戰(zhàn)的東西；代碼開發(fā)中的稀奇的解題方法都已經(jīng)嘗試過。沒有了可挑戰(zhàn)的難題，失去了探索的激情，也就沒有了再上升的動(dòng)力，好不容易走過”入室”級別的人又會(huì)有八九成止步于此。或轉(zhuǎn)做技術(shù)領(lǐng)導(dǎo)人，或轉(zhuǎn)到其它的領(lǐng)域，或換公司。
這些人的上升之路在哪里呢？
這個(gè)階段單單依靠技巧和數(shù)量的累積已經(jīng)沒有什么效果了，突破之路在第 化蝶 里會(huì)詳細(xì)說明，我建議你在這個(gè)階段末尾著重關(guān)注編程理論：面向?qū)ο?過程、代碼組織形式、編譯、代碼規(guī)范、其它的框架設(shè)計(jì)等等。
我建議這個(gè)級別的工程師做一做webeditor控件，不要求完整功能，但是該控件里的模塊劃分、代碼組織、編程思想做到位，給出一個(gè)系統(tǒng)的解決方案。
化蝶
破繭重生，這個(gè)層次關(guān)注的是編程語言本身，而不再關(guān)心產(chǎn)品需求。什么是繭？產(chǎn)品需求就是繭。當(dāng)你一招勝萬招，打遍天下需求之時(shí)，你如果還拘泥于需求開發(fā)，那就是你限于繭中而不自知。要么就在這個(gè)繭里默默地老去，要么就破開繭獲得新生。
還是以那個(gè)”字符串剪裁”的老例子：
/*** 在拼接正則表達(dá)式字符串時(shí)，消除原字符串中特殊字符對正則表達(dá)式的干擾* @author:meizz* @version: 2010/12/16* @param               {string}        str     被正則表達(dá)式字符串保護(hù)編碼的字符串* @return              {string}                被保護(hù)處理過后的字符串*/function escapereg(str) {        return str.replace(new regexp("([.*+?^=!:/x24{}()|[//]//////])", "g"), "///x241");}/*** 刪除url字符串中指定的 query* @author:meizz* @version:2010/12/16* @param               {string}        url     url字符串* @param               {string}        key     被刪除的query名* @return              {string}                被刪除指定 query 后的url字符串*/function delurlquery(url, key) {        key = escapereg(key);        var reg = new regexp("((//?)("+ key +"=[^&]*&)+(?!"+ key +  "=))|(((//?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");        return url.replace(reg, "/x241")}// 應(yīng)用實(shí)例var str = "http://www.xxx.com/?pn=0";   // 刪除指定字符 pn=0delurlquery(str, "pn");
這段代碼相對于層次 入微 有什么區(qū)別嗎？從代碼實(shí)現(xiàn)上來說沒有太大的區(qū)別，但是從思路上來說卻有著本質(zhì)的區(qū)別：1、不再是就事論事，頭疼醫(yī)頭，而是把一類問題抽象理論化，一招破萬招；2、有封裝的概念，不再是每次從零開始，而是站在半山腰開始爬。
在web前端研發(fā)隊(duì)伍里也有很大一部分人 入室 層次時(shí)就自我感覺良好，直接跨躍到 化蝶，積累自己的代碼庫，抽象化問題。但沒有基礎(chǔ)，缺少強(qiáng)大的后勁，即使能夠破繭也經(jīng)受不了風(fēng)吹雨打。一份不成熟的架構(gòu)設(shè)計(jì)對團(tuán)隊(duì)開發(fā)帶來的危害遠(yuǎn)大于它帶來的好處，這種例子在業(yè)界屢見不鮮。不要拔苗助長，不要不會(huì)走就想著跑，夯實(shí)基礎(chǔ)，水到渠成地成長，厚積薄發(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)語言（c++/c#/Java等）觀察理解這些語言的組織結(jié)構(gòu)，語言設(shè)計(jì)；看看原型鏈，鏈?zhǔn)秸Z法編程，泛型，接口編程，dom遙控器等等；仔細(xì)閱讀成熟的web前端開發(fā)框架的設(shè)計(jì)文檔，看他們?yōu)槭裁匆@樣設(shè)計(jì)。 
大俠
這里所說的大俠，不是大家互相吹捧的”大俠“，而是實(shí)至名歸的高手。這個(gè)級別的人完全有能力寫出不差于bindows/jquery/ext/yui/dojo的同等級別規(guī)模的前端開發(fā)框架。應(yīng)用成熟的開發(fā)框架指導(dǎo)、解決問題。
// 庫文件 /mz/string/escapereg.js/*** 在拼接正則表達(dá)式字符串時(shí)，消除原字符串中特殊字符對正則表達(dá)式的干擾* @author:meizz* @version: 2010/12/16* @param               {string}        str     被正則表達(dá)式字符串保護(hù)編碼的字符串* @return              {string}                被保護(hù)處理過后的字符串*/mz.string.escapereg = function (str) {        return str.replace(new regexp("([.*+?^=!:/x24{}()|[//]//////])", "g"), "///x241");}// 庫文件 /mz/url/delquery.js/// include mz.string.escapereg;/*** 刪除url字符串中指定的 query* @author:meizz* @version:2010/12/16* @param               {string}        url     url字符串* @param               {string}        key     被刪除的query名* @return              {string}                被刪除指定 query 后的url字符串*/mz.url.delquery = function (url, key) {        key = mz.string.escapereg(key);        var reg = new regexp("((//?)("+ key +"=[^&]*&)+(?!"+ key +  "=))|(((//?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");        return url.replace(reg, "/x241")}// 應(yīng)用實(shí)例/// include mz.url.delquery;var str = "http://www.xxx.com/?pn=0";   // 刪除指定字符 pn=0mz.url.delquery(str, "pn");自成體系，有基礎(chǔ)，也有理論高度。知道為什么這樣設(shè)計(jì)，也知道什么樣的設(shè)計(jì)最好。比如這個(gè)例子可以有這樣的封裝：
// 庫文件 /mz/url/delquery.js/// include mz.string.escapereg;/*** 刪除url字符串中指定的 query* @author:meizz* @version:2010/12/16* @param               {string}        url     url字符串* @param               {string}        key     被刪除的query名* @return              {string}                被刪除指定 query 后的url字符串*/string.PRototype.delquery = function ( key) {        key = mz.string.escapereg(key);        var reg = new regexp("((//?)("+ key +"=[^&]*&)+(?!"+ key +  "=))|(((//?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");        return this.replace(reg, "/x241")}// 應(yīng)用實(shí)例/// include mz.url.delquery;var str = "http://www.xxx.com/?pn=0";   // 刪除指定字符 pn=0str.delquery("pn");
而為什么不采用下面的那種封裝呢？經(jīng)過了 入微 和 化蝶 你就懂了。
進(jìn)階之路
道法自然，從根上去尋找突破的契機(jī)。你可以研讀html解析引擎設(shè)計(jì)與實(shí)現(xiàn)，js解析引擎設(shè)計(jì)與實(shí)現(xiàn)，其它語言的代碼解析與編譯實(shí)現(xiàn)等等。 或者出些書。低級別的人寫的書要么是一大抄，空無一物；要么是害人。
宗師
這個(gè)級別的人已然到了無招勝有招的境界。項(xiàng)目開發(fā)中的難題？沒有難題！運(yùn)行平臺(tái)的差異？從根本上搞定！代碼規(guī)范、開發(fā)模式，早已經(jīng)被拋在身后。這個(gè)級別的人已經(jīng)不再關(guān)注于某個(gè)前端開發(fā)框架，而是應(yīng)對具體的環(huán)境給出最佳的理論指導(dǎo)。
這個(gè)級別的人所注意的應(yīng)該是以最合理的系統(tǒng)架構(gòu)引領(lǐng)著整個(gè)團(tuán)隊(duì)的進(jìn)步，在什么樣的場景下該用什么樣的架構(gòu)設(shè)計(jì)。3個(gè)、10個(gè)、50個(gè)、100個(gè)人的團(tuán)隊(duì)最應(yīng)該用哪種模式？等你到了宗師級別，你再來回答吧。
進(jìn)階之路
每一個(gè)宗師就是一個(gè)高山，就是一個(gè)領(lǐng)域里的神，但是你僅滿足于在一群比你弱的群體展現(xiàn)你的強(qiáng)大嗎？如果還你是止步原地，那總會(huì)有人乘著飛機(jī)、宇宙飛船從你的頭領(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ā)的鏈條中去。
飛升
其實(shí)嚴(yán)格來說，飛升已經(jīng)不是原領(lǐng)域的范圍了。在web研發(fā)領(lǐng)域，對于這個(gè)層次的有一個(gè)很好聽的稱謂：架構(gòu)師。當(dāng)然那些”偽架構(gòu)師”另當(dāng)別論。
一法通，萬法通。在其它的技術(shù)領(lǐng)域，也可以按照 入門 登堂 入室 入微 化蝶 大俠 宗師 來劃分等級；一樣也可以按照我這里所寫的每個(gè)級別的 進(jìn)階之路 來快速提升。