1、WEB前端開發工程師成長之路（計劃）今天看到一篇文章，感覺很不錯，于是轉了過來，同時也給自己規劃一個方向。【背景】如果你是剛進入web前端研發領域，想試試這潭水有多深，看這篇文章吧；如果你是做了兩三年web產品前端研發，迷茫找不著提高之路，看這篇文章吧；如果你是四五年的前端開發高手，沒有難題能難得住你的寂寞高手，來看這篇文章吧；web前端研發工程師，在國內是一個朝陽職業，自07-08年正式有這個職業以來，也不過三四年的時間。這個領域沒有學校的正規教育，沒有行內成體系的理論指引，幾乎所有從事這個職業的人都是靠自己自學成才。自學成才，一條艱辛的坎坷路，我也是這樣一路走來。從2002年開始接觸web

2、前端研發至今已然有了9個年頭，如今再回首，期間的走了很多彎路。推已及人，如果能讓那些后來者少走些彎路，辛甚辛甚！【前言】所謂的天才，只不過是比平常人更快的掌握技能、完成工作罷了；只要你找到了正確的方向，并輔以足夠的時間，你一樣能夠踏上成功彼岸。本文將web前端研發編程能力劃分了八個等級，每個等級都列舉出了對應的特征及破級提升之方法，希望每位在看本文的同學先準確定位自己的等級（不要以你目前能力的最高點，而是以你當前能力的中檔與之等級作對比，以免多走彎路），參考突破之法破之。所謂的級別，只是你面對需求時的一種態度：能夠完成、能夠完美地完成、能夠超出預期地完成。以追求完美的態度加以扎實的編程功力，那

3、就是你的編程水平。切記心浮氣燥，級別夠了，那級別里的東西自然就懂了。悟了就是悟了，沒悟也沒關系，靜下心來，投入時間而已。一.【入門】能夠解決一些問題的水平。有一定的基礎（比如最常見的html標簽及其屬性、事件、方法；最常見的css屬性；基礎的javascript編程能力），能夠完成一些簡單的web前端研發需求。舉個例子：刪除一字符串中指定的字符。var str="    str=str.replace('?page',"");    alert(str);str=str

4、.substring(0,str.indexof("/");alert(str);首先不要苛責代碼的對錯嚴謹，畢竟每個程序員都有這樣的一個過程；其次，這兩段代碼在這個實例里沒有什么大過錯，可能會有瑕疵，但能夠解決問題（刪除指定的字符），這就是這個級別的特征。再舉個例子：/ 計算系統當前是星期幾var str = ""var week = new date().getday();if (week = 0) str = "今天是星期日" else if (week = 1) str = "今天是星期一" else if

5、 (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

6、: 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);“入門”階段是每個程序員的必經之路，只

7、要”入門”，你就上路了。所謂”師傅領進門，修行靠個人”，有了這個”入門”的基礎，自己就可以摸索著前進了。進階之路將javascript、html、css之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍！只有將基礎打好，以后的路才能走的順暢。參考這些幫助文檔，力爭寫出無瑕疵的代碼。這些編碼文檔建議不僅是在入門提高期看，在你以后每個階段破階的時候都應該看看，最基礎的東西往往也是最給力的東西，有時能夠給你帶來意想不到的收獲。二.【登堂】能夠正確地解決問題。不管你是通過搜索網絡，或者通過改造某些成品代碼（jquery/dojo/ext/yui）案例，只要能夠無錯地完成需求。同樣以上面的那段”字符串剪裁”

8、代碼為例：var str="str=str.replace(/?page/,"");alert(str);僅僅解決問題對于”登堂”階段來說已經不是問題，這個級別所給出方案不能是漏洞百出。以上面這段代碼為例：replace方法的第一個參數雖然可以支持字符串，但最佳的類型是正則表達式；var a = new array("日", "一", "二", "三", "四", "五", "六");var week = new date()

9、.getday();var str = "今天是星期"+ aweek;alert(str);對比”入門級”的代碼，不管是從代碼量、代碼效率、代碼優美性、代碼思路來說，”登堂”級的這個日期處理代碼都要優秀很多。進階之路這個階段雖然能夠給出正確的解題方案，但是不一定是最優秀的方案。如何才能得到最優秀的方案呢？首先就是積累各種能夠解決需求的方案，然后再驗證每個方案，在這些方案中選擇最好的一種。因此該階段的進階之路就是”行萬里路，看萬卷書”，積累各個需求的各個解決方案。你可以扎身在專業論壇（藍色理想、無憂、csdn）里，通讀所有的faq及帖子；你可以打開搜索引擎，窮舉所有的搜索結果

10、。自己建立測試環境一一驗證這些代碼：去揣摩每段代碼的意圖，去比較每段代碼之間的差異。這兩條路可以讓你快速完成原始積累，當你再面對大多數需求時能夠說這些問題我以前做過，那你就水到渠成地晉階了。三.【入室】最強代碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優秀的方案滿足需求。這個級別基本上產品開發編程中的代碼主力。給出的一招一式，招招都是絕招。還以上面的那個例子為例，你能說出1、2、3之間的差別，以及適用于那種環境嗎？var str="/ 1、字符串剪裁str.substring(0, str.indexof("?page");/ 2、正則表達式str.repl

11、ace(/?page/, "");/ 3、字符串分拆、合并str.split("?page").join("");能夠解決問題的方法會有很多，但是對于程序員來說應該選擇最優秀的。上面這段代碼從代碼量來說”正則表達式”最優秀；從代碼執行效率來說： “字符串剪裁”法最高（chrome中”正則表達式”效率最高），split法最次；從可擴展性上來說，”正則表達式”法最優。具體使用那種方案視具體的需求環境而定。“入室”階段，程序員應該能夠肯定的回答：對于這個需求而言，我的代碼就是最優秀的代碼。再以”今天是星期幾”為例，”登堂”級的代碼你敢說是最

12、優秀的代碼了嗎？/ 計算系統當前是星期幾var str = "今天是星期" + "日一二三四五六".charat(new date().getday();對比”登堂”級的示例代碼，上面這段代碼給你什么感受？程序員追求的就是完美。”入室”級別追求的就是每一招每一式的完美無缺。從web前端編程來說，通過2年左右的努力，很多人能夠達到這個水平，但是，很大一部分人的編程能力也就止步于此。或限于產品的需求單一性，或限于需求開發的時間緊迫性，或限于人的惰性，能夠完美地解決當前的需求就夠了。由于長期處于技術平臺期，技術上得不到提高，通常這個級別的工程師會比較燥。技術上

13、小有所成；或追求個人的突破；或追求產品差異性帶來的新鮮感；或者只是想換個心情；因此很多此級別的工程師會經常換公司。戒驕戒躁：切勿以為自己能寫一手漂亮的代碼而自滿；切莫以為別人”尊稱”你一聲”大俠”你就以 “大俠”自居；切莫以為自己積累了一些得意的代碼就成了框架式開發。細節決定成敗，優秀的方案并不能保證最終的成功。還以”刪除指定字符串”為例，原始字符串從格式上來看應該是了個url鏈接，在去除”pn=0之后，最末尾處留了一個尾巴”?”；如果原始字符串是” ? 和 & 兩個符號緊貼一起，這更是明顯的bug。進階之路此階段進階之路就是：切勿心浮氣躁；你不再被需求牽著走，而是你牽著需求走。注重細

14、節，注意那些當前需求里沒有明文給出的細節：代碼性能的差異、運行平臺（瀏覽器）的差異、需求的隱性擴展、代碼的向后兼容等等。再通讀幾遍html/css/javascript幫助文檔。我建議這個級別的工程師做一做webtreeview控件，要求總節點量一萬左右操作流暢，你的晉升之路就在這個控件的編碼過程中。四.【入微】最強解決方案。你能夠走在需求的前面，將當前需求里有的、沒有直接提出來的、現在暫時沒有但將來可能有的等等，及前端編程潛規則等各個方方面面都綜合考慮，給出最優方案。以一招勝萬招。var str = " / 刪除指定字符 pn=0/ 我將這個字符串里所可能想到的各種情況都列舉出來v

15、ar a = " pn= 可能出現在 ? 前 , " url里允許pn 值為空 , " url 里可有多個字段 , " 可能排在最后 , " 可能有多個 pn 字段 , " 可能在中間 , " / 可能在中間成組 , " / 可能零星分布;/* 需求的不言之秘：? 若出現在字符串最尾則要去之? & 兩個符號不可重疊*/var reg = /(?)(pn=&*&)+(?!pn=)|(?|&)pn=&*)+$)|(&pn=&*)/g;for (var i = 0;

16、 i < a.length; i+) alert(a + "n" + a.replace(reg, "$2");這個階段已經不再追求一招一式，對你來說不是使用什么創新絕招解決需求，而是給出成熟穩重的方案，從根上解決問題。針對某個當前需求你的代碼可能不是最優，但是針對此類的需求你的代碼卻是最優秀的代碼。進階之路很多web前端研發工程師在做了3-4年之后就會進入一個瓶頸期：產品開發需求是小菜一碟，沒有新鮮的可以挑戰的東西；代碼開發中的稀奇的解題方法都已經嘗試過。沒有了可挑戰的難題，失去了探索的激情，也就沒有了再上升的動力，好不容易走過”入室”級別的人又

17、會有八九成止步于此。或轉做技術領導人，或轉到其它的領域，或換公司。這些人的上升之路在哪里呢？這個階段單單依靠技巧和數量的累積已經沒有什么效果了，突破之路在第5層化蝶里會詳細說明，我建議你在這個階段末尾著重關注編程理論：面向對象/過程、代碼組織形式、編譯、代碼規范、其它的框架設計等等。我建議這個級別的工程師做一做webeditor控件，不要求完整功能，但是該控件里的模塊劃分、代碼組織、編程思想做到位，給出一個系統的解決方案。五.【化蝶】破繭重生，這個層次關注的是編程語言本身，而不再關心產品需求。什么是繭？產品需求就是繭。當你一招勝萬招，打遍天下需求之時，你如果還拘泥于需求開發，那就是你限于繭中而

18、不自知。要么就在這個繭里默默地老去，要么就破開繭獲得新生。還是以那個”字符串剪裁”的老例子：/* 在拼接正則表達式字符串時，消除原字符串中特殊字符對正則表達式的干擾* author:meizz* version: 2010/12/16* param string str 被正則表達式字符串保護編碼的字符串* return string 被保護處理過后的字符串*/function escapereg(str) return str.replace(new regexp("(.*+?=!:x24()|/)", "g"), "x241");

19、/* 刪除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 + "=)|(?|&)&

20、quot;+ key +"=&*)+$)|(&"+ key +"=&*)", "g"); return url.replace(reg, "x241")/ 應用實例var str = " / 刪除指定字符 pn=0delurlquery(str, "pn");這段代碼相對于層次4入微有什么區別嗎？從代碼實現上來說沒有太大的區別，但是從思路上來說卻有著本質的區別：1、不再是就事論事，頭疼醫頭，而是把一類問題抽象理論化，一招破萬招；2、有封裝的概念，不再是每次從零開

21、始，而是站在半山腰開始爬。在web前端研發隊伍里也有很大一部分人入室層次時就自我感覺良好，直接跨躍到化蝶，積累自己的代碼庫，抽象化問題。但沒有基礎，缺少強大的后勁，即使能夠破繭也經受不了風吹雨打。一份不成熟的架構設計對團隊開發帶來的危害遠大于它帶來的好處，這種例子在業界屢見不鮮。不要拔苗助長，不要不會走就想著跑，夯實基礎，水到渠成地成長，厚積薄發，強力地破繭而出。進階之路你已經從原始積累，到厚積薄發，到破繭而出之后，你所關注的應該不再是一招一式、一個項目、一個模塊，而應該是一種思路，一種理論。你可以做以下幾個步驟以突破到更高層次：再仔細看幾遍html/css/javascript接口幫助文檔；

22、選擇一門強語言（c+/c#/java等）觀察理解這些語言的組織結構，語言設計；看看原型鏈，鏈式語法編程，泛型，接口編程，dom遙控器等等；仔細閱讀成熟的web前端開發框架的設計文檔，看他們為什么要這樣設計。六.【大俠】這里所說的大俠，不是大家互相吹捧的”大俠”，而是實至名歸的高手。這個級別的人完全有能力寫出不差于bindows/jquery/ext/yui/dojo的同等級別規模的前端開發框架。應用成熟的開發框架指導、解決問題。/ 庫文件 /mz/string/escapereg.js/* 在拼接正則表達式字符串時，消除原字符串中特殊字符對正則表達式的干擾* author:meizz* ver

23、sion: 2010/12/16* param string str 被正則表達式字符串保護編碼的字符串* return string 被保護處理過后的字符串*/mz.string.escapereg = function (str) return str.replace(new regexp("(.*+?=!:x24()|/)", "g"), "x241");/ 庫文件 /mz/url/delquery.js/ include mz.string.escapereg;/* 刪除url字符串中指定的 query* author:mei

24、zz* 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 +&quo

25、t;=&*)+$)|(&"+ key +"=&*)", "g"); return url.replace(reg, "x241")/ 應用實例/ include mz.url.delquery;var str = " / 刪除指定字符 pn=0mz.url.delquery(str, "pn");自成體系，有基礎，也有理論高度。知道為什么這樣設計，也知道什么樣的設計最好。比如這個例子可以有這樣的封裝：/ 庫文件 /mz/url/delquery.js/ include m

26、z.string.escapereg;/* 刪除url字符串中指定的 query* author:meizz* version:2010/12/16* param string url url字符串* param string key 被刪除的query名* return string 被刪除指定 query 后的url字符串*/totype.delquery = function ( key) key = mz.string.escapereg(key); var reg = new regexp("(?)("+ key +"=&*&)+(?!"+ key + "=)|(?|&)"+ key +"=&*)+$)|(&"+ key