前端工程師-前端研發(fā)編程能力提高經(jīng)驗

1、星期八職場經(jīng)驗網(wǎng)（）【現(xiàn)成經(jīng)驗助你快速完成工作】【背景】 背景】 如果你是剛進入 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é) 成才，一條艱辛的坎坷路，我也是這樣一路走來。從 2002 年開始接觸 WEB 前端研發(fā)至今已然

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

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

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

5、2) str = "今天是星期二" else if (week = 3) str = "今天是星期三" else if (week = 4) str = "今天是星期四" else if (week = 5) str = "今天是星期五" elseif (week = 6) str = "今天是星期六" / 或者更好一些 var str1 = "今天是星期" var week = new Date().getDay(); switch (week) case 0 : str1

6、 += "日" 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)之路，只要“入門

7、”，你就上路了。所謂“師傅領(lǐng)進門，修行靠個人”，有了這個“入門” 的基礎(chǔ)，自己就可以摸索著前進了。 【進階之路】 進階之路】 將 JavaScript、HTML、CSS 之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍！只有將基礎(chǔ)打好，以后的路才 能走的順暢。參考這些幫助文檔，力爭寫出無瑕疵的代碼。 這些編碼文檔建議不僅是在入門提高期看，在你以后每個階段破階的時候都應(yīng)該看看，最基礎(chǔ)的東西往往也是 最給力的東西，有時能夠給你帶來意想不到的收獲。 二.【登堂】 【登堂】 能夠正確地解決問題。不管你是通過搜索網(wǎng)絡(luò)，或者通過改造某些成品代碼（jQuery/Dojo/Ext/YUI）案例，只要 能夠無錯地

8、完成需求。同樣以上面的那段“字符串剪裁”代碼為例： var str=" str=str.replace(/?page/,""); alert(str); 僅僅解決問題對于“登堂”階段來說已經(jīng)不是問題，這個級別所給出方案不能是漏洞百出。以上面這段代碼為例： replace 方法的第一個參數(shù)雖然可以支持字符串，但最佳的類型是正則表達(dá)式； var a = new Array("日", "一", "二", "三", "四", "五", "六&q

9、uot;); var week = new Date().getDay(); var str = "今天是星期"+ aweek; alert(str); 對比“入門級”的代碼，不管是從代碼量、代碼效率、代碼優(yōu)美性、代碼思路來說，“登堂”級的這個日期處理代碼都 要優(yōu)秀很多。 【進階之路】 進階之路】 這個階段雖然能夠給出正確的解題方案，但是不一定是最優(yōu)秀的方案。如何才能得到最優(yōu)秀的方案呢？首先就 是積累各種能夠解決需求的方案，然后再驗證每個方案，在這些方案中選擇最好的一種。因此該階段的進階之路就 是“行萬里路，看萬卷書”，積累各個需求的各個解決方案。 你可以扎身在專業(yè)論壇（藍(lán)

10、色理想、無憂、CSDN）里，通讀所有的 FAQ 及帖子；你可以打開搜索引擎，窮舉 所有的搜索結(jié)果。自己建立測試環(huán)境一一驗證這些代碼：去揣摩每段代碼的意圖，去比較每段代碼之間的差異。這 兩條路可以讓你快速完成原始積累，當(dāng)你再面對大多數(shù)需求時能夠說這些問題我以前做過，那你就水到渠成地晉階 了。 三.【入室】 【入室】 最強代碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優(yōu)秀的方案滿足需求。這個級 別基本上產(chǎn)品開 發(fā)編程中的代碼主力。給出的一招一式，招招都是絕招。 還以上面的那個例子為例，你能說出 1、2、3 之間的差別，以及適用于那種環(huán)境嗎？ var str=" / 1、字符串剪裁

11、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)。具體使用那種方案視具體的需求

12、環(huán)境而定。 “入室”階段，程序員應(yīng)該能夠肯定的回答：對于這個需求而言，我的代碼就是最優(yōu)秀的代碼。 再以“今天是星期幾”為例，“登堂”級的代碼你敢說是最優(yōu)秀的代碼了嗎？ / 計算系統(tǒng)當(dāng)前是星期幾 var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay(); 對比“登堂”級的示例代碼，上面這段代碼給你什么感受？程序員追求的就是完美。“入室”級別追求的就是每一招每 一式的完美無缺。從 WEB 前端編程來說，通過 2 年左右的努力，很多人能夠達(dá)到這個水平，但是，很大一部分人的編程能力也 就止步于此?；蛳抻诋a(chǎn)品

13、的需求單一性，或限于需求開發(fā)的時間緊迫性，或限于人的惰性，能夠完美地解決當(dāng)前的 需求就夠了。 由于長期處于技術(shù)平臺期，技術(shù)上得不到提高，通常這個級別的工程師會比較燥。技術(shù)上小有所成；或追求個 人的突破；或追求產(chǎn)品差異性帶來的新鮮感；或者只是想換個心情；因此很多此級別的工程師會經(jīng)常換公司。 戒驕戒躁： 切勿以為自己能寫一手漂亮的代碼而自滿； 切莫以為別人“尊稱”你一聲“大俠”你就以“大俠”自居； 切莫以為自己積累了一些得意的代碼就成了框架式開發(fā)。 細(xì)節(jié)決定成敗，優(yōu)秀的方案并不能保證最終的成功。還以“刪除指定字符串”為例，原始字符串從格式上來看應(yīng) 該是了個 URL 鏈接，在去除“pn=0”之后，最

14、末尾處留了一個尾巴“?”；如果原始字符串是 “ ? 和 & 兩個符號緊貼一起，這更是明顯的 bug。 【進階之路】 進階之路】 此階段進階之路就是：切勿心浮氣躁；你不再被需求牽著走，而是你牽著需求走。注重細(xì)節(jié)，注意那些當(dāng)前需 求里沒有明文給出的細(xì)節(jié)：代碼性能的差異、運行平臺（瀏覽器）的差異、需求的隱性擴展、代碼的向后兼容等等。 再通讀幾遍 HTML/CSS/JavaScript 幫助文檔。 我建議這個級別的工程師 做一做 WebTreeView 控件，要求總節(jié)點量一萬左右操作流暢，你的晉升之路就在這 個控件的編碼過程中。 四.【入微】 【入微】 最強解決方案。你能夠走在需求的前面，將當(dāng)

15、前需求里有的、沒有直接提出來的、現(xiàn)在暫時沒有但將來可能有 的等等，及前端編程潛規(guī)則等各個方方面面都綜合考慮，給出最優(yōu)方案。以一招勝萬招。 var str = " / 刪除指定字符 pn=0 / 我將這個字符串里所可能想到的各種情況都列舉出來 var a = " pn= 可能出現(xiàn)在 ? 前 , " URL 里允許 pn 值為空 , " URL 里可有多個字段 , " 可能排在最后 , " 可能有多個 pn 字段 , " 可能在中間 , " / 可能在中間成組 , " / 可能零星分布 ; /* 需求的不言之

16、秘： ? 若出現(xiàn)在字符串最尾則要去之 ? & 兩個符號不可重疊 */ var reg = /(?)(pn=&*&)+(?!pn=)|(?|&)pn=&*)+$)|(&pn=&*)/g; for (var i = 0; i < a.length; i+) alert(ai + "n" + ai.replace(reg, "$2"); 這個階段已經(jīng)不再追求一招一式，對你來說不是使用什么創(chuàng)新絕招解決需求，而是給出成熟穩(wěn)重的方案，從根 上解決問題。針對某個當(dāng)前需求你的代碼可能不是最優(yōu)，但是針對此類的需

17、求你的代碼卻是最優(yōu)秀的代碼。 【進階之路】 進階之路】 很多 WEB 前端研發(fā)工程師在做了 3-4 年之后就會進入一個瓶頸期：產(chǎn)品開發(fā)需求是小菜一碟，沒有新鮮的可 以挑戰(zhàn)的東西；代碼開發(fā)中的稀奇的解題方法都已經(jīng)嘗試過。沒有了可挑戰(zhàn)的難題，失去了探索的激情，也就沒有 了再上升的動力，好不容易走過“入室”級別的人又會有八九成止步于此?；蜣D(zhuǎn)做技術(shù)領(lǐng)導(dǎo)人，或轉(zhuǎn)到其它的領(lǐng)域， 或換公司。 這些人的上升之路在哪里呢？ 這個階段單單依靠技巧和數(shù)量的累積已經(jīng)沒有什么效果了，突破之路在第 5 層化蝶里會詳細(xì)說明，我建議 你在這個階段末尾著重關(guān)注編程理論：面向?qū)ο?過程、代碼組織形式、編譯、代碼規(guī)范、其它的框架設(shè)

18、計等等。 我建議這個級別的工程師做一做 WebEditor 控件，不要求完整功能，但是該控件里的模塊劃分、代碼組織、編 程思想做到位，給出一個系統(tǒng)的解決方案。 五.【化蝶】 【化蝶】 破繭重生，這個層次關(guān)注的是編程語言本身，而不再關(guān)心產(chǎn)品需求。什么是繭？產(chǎn)品需求就是繭。當(dāng)你一招勝 萬招，打遍天下需求之時，你如果還拘泥于需求開發(fā)，那就是你限于繭中而不自知。要么就在這個繭里默默地老去要么就破開繭獲得新生。 還是以那個“字符串剪裁”的老例子： /* * 在拼接正則表達(dá)式字符串時，消除原字符串中特殊字符對正則表達(dá)式的干擾 * author:meizz * version: 2010/12/16 * p

19、aram String str 被正則表達(dá)式字符串保護編碼的字符串 * return String 被保護處理過后的字符串 */ 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 被刪除的 Que

20、ry 名 * return String 被刪除指定 query 后的 URL 字符串 */ function delUrlQuery(url, key) key = escapeReg(key); var reg = new RegExp("(?)("+ key +"=&*&)+(?!"+ key + "=)|(?|&)"+ key +"=&*)+$)|(&"+ key +"=&*)", "g"); return url.re

21、place(reg, "x241") / 應(yīng)用實例 var str = " / 刪除指定字符 pn=0 delUrlQuery(str, "pn"); 這段代碼相對于層次 4入微有什么區(qū)別嗎？從代碼實現(xiàn)上來說沒有太大的區(qū)別，但是從思路上來說卻有著 本質(zhì)的區(qū)別：1、不再是就事論事，頭疼醫(yī)頭，而是把一類問題抽象理論化，一招破萬招；2、有封裝的概念，不再 是每次從零開始，而是站在半山腰開始爬。 在 WEB 前端研發(fā)隊伍里也有很大一部分人入室層次時就自我感覺良好，直接跨躍到化蝶，積累自己 的代碼庫，抽象化問題。但沒有基礎(chǔ)，缺少強大的后勁，即使能夠破繭也

22、經(jīng)受不了風(fēng)吹雨打。一份不成熟的架構(gòu)設(shè) 計對團隊開發(fā)帶來的危害遠(yuǎn)大于它帶來的好處，這種例子在業(yè)界屢見不鮮。不要拔苗助長，不要不會走就想著跑， 夯實基礎(chǔ)，水到渠成地成長，厚積薄發(fā)，強力地破繭而出。 【進階之路】 進階之路】 你已經(jīng)從原始積累，到厚積薄發(fā)，到破繭而出之后，你所關(guān)注的應(yīng)該不再是一招一式、一個項目、一個模塊， 而應(yīng)該是一種思路，一種理論。你可以做以下幾個步驟以突破到更高層次：再仔細(xì)看幾遍 HTML/CSS/JavaScript 接口幫助文檔；選擇一門強語言（C+/C#/Java 等）觀察理解這些語言的組織結(jié)構(gòu)，語言設(shè)計；看看原型鏈，鏈 式語法編程，泛型，接口編程，DOM 遙控器等等；仔細(xì)

23、閱讀成熟的 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: 2010/12/16 * param String str 被正則表達(dá)式字符串保護編碼的字符串

24、 * 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:meizz * version:2010/12/16 * param String ur

25、l 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 +"=&*)+$)|(&"+ ke

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

27、* 刪除 URL 字符串中指定的 Query * author:meizz * version:2010/12/16 * param String url URL 字符串 * param String key 被刪除的 Query 名 * return String 被刪除指定 query 后的 URL 字符串 */ Stotype.delQuery = function ( key) key = mz.string.escapeReg(key); var reg = new RegExp("(?)("+ key +"=&*&)+(?!"+ key + "=)|(?|&)"+ key +"=&*)+$)|(&"+ key +"=&*)", "g"); ret