前端工程師的進階之路如果你是剛進入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ā)至今已然有了9個年頭，如今再回首萍肆，期間的走了很多彎路袍榆。推已及人，如果能讓那些后來者少走些彎路塘揣，辛甚辛甚包雀！所謂的天才，只不過是比平常人更快的掌握技能亲铡、完成工作罷了才写；只要你找到了正確的方向葡兑，并輔以足夠的時間，你一樣能夠踏上成功彼岸赞草。本文將WEB前端研發(fā)編程能力劃分了八個等級讹堤，每個等級都列舉出了對應(yīng)的特征及破級提升之方法，希望每位在看本文的同學(xué)先準確定位自己的等級（不要以你目前能力的最高點房资，而是以你當前能力的中檔與之等級作對比蜕劝，以免多走彎路），參考突破之法破之轰异。所謂的級別岖沛，只是你面對需求時的一種態(tài)度：能夠完成、能夠完美地完成搭独、能夠超出預(yù)期地完成婴削。以追求完美的態(tài)度加以扎實的編程功力，那就是你的編程水平牙肝。切記心浮氣燥唉俗，級別夠了，那級別里的東西自然就懂了配椭。悟了就是悟了虫溜，沒悟也沒關(guān)系，靜下心來股缸，投入時間而已衡楞。一.能夠解決一些問題的水平。有一定的基礎(chǔ)（比如最常見的HTML標簽及其屬性敦姻、事件瘾境、方法；最常見的CSS屬性镰惦；基礎(chǔ)的JavaScript編程能力）迷守，能夠完成一些簡單的WEB前端研發(fā)需求。舉個例子：刪除一字符串中指定的字符旺入《以洌　　var str="/ 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)之路聘殖，只要“入門”晨雳，你就上路了行瑞。所謂“師傅領(lǐng)進門，修行靠個人”餐禁，有了這個“入門”的基礎(chǔ)血久，自己就可以摸索著前進了。將JavaScript帮非、HTML氧吐、CSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍！只有將基礎(chǔ)打好末盔，以后的路才能走的順暢筑舅。參考這些幫助文檔，力爭寫出無瑕疵的代碼陨舱。這些編碼文檔建議不僅是在入門提高期看翠拣，在你以后每個階段破階的時候都應(yīng)該看看，最基礎(chǔ)的東西往往也是最給力的東西游盲，有時能夠給你帶來意想不到的收獲误墓。二.能夠正確地解決問題。不管你是通過搜索網(wǎng)絡(luò)益缎，或者通過改造某些成品代碼（jQuery/Dojo/Ext/YUI）案例谜慌，只要能夠無錯地完成需求。同樣以上面的那段“字符串剪裁”代碼為例：　　var str="/ 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è)論壇（藍色理想艾扮、無憂、希賽）里占婉，通讀所有的FAQ及帖子泡嘴；你可以打開搜索引擎，窮舉所有的搜索結(jié)果逆济。自己建立測試環(huán)境一一驗證這些代碼：去揣摩每段代碼的意圖酌予，去比較每段代碼之間的差異。這兩條路可以讓你快速完成原始積累奖慌，當你再面對大多數(shù)需求時能夠說這些問題我以前做過抛虫，那你就水到渠成地晉階了。三.最強代碼升薯，知道所有能夠解決需求的各種方案莱褒，能夠選擇使用最優(yōu)秀的方案滿足需求。這個級別基本上產(chǎn)品開發(fā)編程中的代碼主力涎劈。給出的一招一式广凸，招招都是絕招。還以上面的那個例子為例蛛枚，你能說出1谅海、2、3之間的差別蹦浦，以及適用于那種環(huán)境嗎扭吁？　　var str="/ page"; // 1、字符串剪裁 str.substring(0, str.indexOf(" page")); // 2盲镶、正則表達式 str.replace(/ page/, ""); // 3、字符串分拆溉贿、合并 str.split(" page").join("");
能夠解決問題的方法會有很多，但是對于程序員來說應(yīng)該選擇最優(yōu)秀的宇色。上面這段代碼從代碼量來說“正則表達式”最優(yōu)秀宣蠕；從代碼執(zhí)行效率來說： “字符串剪裁”法最高（Chrome中“正則表達式”效率最高），split法最次镀层；從可擴展性上來說，“正則表達式”法最優(yōu)皿曲。具體使用那種方案視具體的需求環(huán)境而定鹿响“萦ⅲ“入室”階段份招，程序員應(yīng)該能夠肯定的回答：對于這個需求而言荧降，我的代碼就是最優(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)秀的方案并不能保證最終的成功。還以“刪除指定字符串”為例途乃，原始字符串從格式上來看應(yīng)該是了個URL鏈接耍共，在去除“pn=0”之后试读，最末尾處留了一個尾巴“ ”；如果原始字符串是“;a=1”，去除“pn=0”之后 和 & 兩個符號緊貼一起银亲，這更是明顯的bug。此階段進階之路就是：切勿心浮氣躁请梢；你不再被需求牽著走毅弧，而是你牽著需求走够坐。注重細節(jié)元咙，注意那些當前需求里沒有明文給出的細節(jié)：代碼性能的差異、運行平臺（瀏覽器）的差異赶掖、需求的隱性擴展奢赂、代碼的向后兼容等等膳灶。再通讀幾遍HTML/CSS/JavaScript幫助文檔轧钓。我建議這個級別的工程師做一做WebTreeView控件毕箍，要求總節(jié)點量一萬左右操作流暢霉晕，你的晉升之路就在這個控件的編碼過程中牺堰。四.最強解決方案伟葫。你能夠走在需求的前面，將當前需求里有的渐溶、沒有直接提出來的茎辐、現(xiàn)在暫時沒有但將來可能有的等等拖陆，及前端編程潛規(guī)則等各個方方面面都綜合考慮依啰，給出最優(yōu)方案速警。以一招勝萬招∷ψ浚　　var str = ""; // 刪除指定字符 pn=0 // 我將這個字符串里所可能想到的各種情況都列舉出來 var a = [ ""http:// pn= 可能出現(xiàn)在 前 , ""http:// URL里允許pn 值為空 , ";amp;a=1"http:// URL 里可有多個字段 , ";amp;pn=0"http:// 可能排在最后 , ";amp;pn=0&pn=1"http:// 可能有多個 pn 字段 , ";amp;pn=0&b=2"http:// 可能在中間 , ";amp;pn=0&pn=1&b=1" // 可能在中間成組 , ";amp;pn=0&b=1&pn=1" // 可能零星分布 ]; /* 需求的不言之秘： 若出現(xiàn)在字符串最尾則要去之 & 兩個符號不可重疊 / var reg = /(( )(pn=[^&]&)+( !pn=))|((( |&)pn=[^{&amp;]*)+$)|(&amp;pn=[}&])/g; for (var i = 0; i < a.length; i++) { alert(a[i] + "n" + a[i].replace(reg, "$2")); }
這個階段已經(jīng)不再追求一招一式缀棍，對你來說不是使用什么創(chuàng)新絕招解決需求，而是給出成熟穩(wěn)重的方案弱匪，從根上解決問題斥难。針對某個當前需求你的代碼可能不是最優(yōu)哑诊，但是針對此類的需求你的代碼卻是最優(yōu)秀的代碼竞阐。很多WEB前端研發(fā)工程師在做了3-4年之后就會進入一個瓶頸期：產(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層《化蝶》里會詳細說明，我建議你在這個階段末尾著重關(guān)注編程理論：面向?qū)ο?過程乙墙、代碼組織形式听想、編譯汉买、代碼規(guī)范、其它的框架設(shè)計等等出牧。我建議這個級別的工程師做一做WebEditor控件，不要求完整功能赵讯，但是該控件里的模塊劃分边翼、代碼組織丈积、編程思想做到位，給出一個系統(tǒng)的解決方案唬滑。五.破繭重生晶密，這個層次關(guān)注的是編程語言本身，而不再關(guān)心產(chǎn)品需求。什么是繭畜侦？產(chǎn)品需求就是繭。當你一招勝萬招摇展，打遍天下需求之時，你如果還拘泥于需求開發(fā)祟滴，那就是你限于繭中而不自知垄懂。要么就在這個繭里默默地老去，要么就破開繭獲得新生漫谷。還是以那個“字符串剪裁”的老例子：　　/* * 在拼接正則表達式字符串時舔示，消除原字符串中特殊字符對正則表達式的干擾 * @author:meizz * @version: 2010/12/16 * @param {String} str 被正則表達式字符串保護編碼的字符串 * @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 被刪除的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)用實例 var str = ""; // 刪除指定字符 pn=0 delUrlQuery(str, "pn");
這段代碼相對于層次4《入微》有什么區(qū)別嗎？從代碼實現(xiàn)上來說沒有太大的區(qū)別公给，但是從思路上來說卻有著本質(zhì)的區(qū)別：1、不再是就事論事匣沼，頭疼醫(yī)頭加叁，而是把一類問題抽象理論化倦沧，一招破萬招；2它匕、有封裝的概念展融，不再是每次從零開始，而是站在半山腰開始爬豫柬。在WEB前端研發(fā)隊伍里也有很大一部分人《入室》層次時就自我感覺良好告希，直接跨躍到《化蝶》指么，積累自己的代碼庫巫财，抽象化問題。但沒有基礎(chǔ)，缺少強大的后勁枯夜，即使能夠破繭也經(jīng)受不了風吹雨打鸽嫂。一份不成熟的架構(gòu)設(shè)計對團隊開發(fā)帶來的危害遠大于它帶來的好處癣籽，這種例子在業(yè)界屢見不鮮。不要拔苗助長，不要不會走就想著跑，夯實基礎(chǔ)赊颠，水到渠成地成長，厚積薄發(fā)，強力地破繭而出。你已經(jīng)從原始積累懂算，到厚積薄發(fā)酸役，到破繭而出之后，你所關(guān)注的應(yīng)該不再是一招一式蜘腌、一個項目芯急、一個模塊养泡，而應(yīng)該是一種思路肩榕，一種理論氓皱。你可以做以下幾個步驟以突破到更高層次：再仔細看幾遍HTML/CSS/JavaScript接口幫助文檔唯灵；選擇一門強語言（C++/C#/Java等）觀察理解這些語言的組織結(jié)構(gòu)琐驴，語言設(shè)計馍乙；看看原型鏈曼尊，鏈式語法編程屿岂，泛型乔煞，接口編程擂仍，DOM遙控器等等盲赊；仔細閱讀成熟的WEB前端開發(fā)框架的設(shè)計文檔呻澜，看他們?yōu)槭裁匆@樣設(shè)計。六.這里所說的大俠，不是大家互相吹捧的“大俠”，而是實至名歸的高手巾钉。這個級別的人完全有能力寫出不差于Bindows/jQuery/Ext/YUI/Dojo的同等級別規(guī)模的前端開發(fā)框架。應(yīng)用成熟的開發(fā)框架指導(dǎo)寒屯、解決問題昵济。　　// 庫文件 /mz/string/escapeReg.js /** * 在拼接正則表達式字符串時，消除原字符串中特殊字符對正則表達式的干擾 * @author:meizz * @version: 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: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)用實例 /// include mz.url.delQuery; var str = ""; // 刪除指定字符 pn=0 mz.url.delQuery(str, "pn");
自成體系，有基礎(chǔ)磷瘤，也有理論高度芒篷。知道為什么這樣設(shè)計，也知道什么樣的設(shè)計最好采缚。比如這個例子可以有這樣的封裝：　　// 庫文件 /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)用實例 /// include mz.url.delQuery; var str = ""; // 刪除指定字符 pn=0 str.delQuery("pn");
而為什么不采用下面的那種封裝呢针炉？經(jīng)過了《知微》和《化蝶》你就懂了。道法自然扳抽，從根上去尋找突破的契機篡帕。你可以研讀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)著整個團隊的進步，在什么樣的場景下該用什么樣的架構(gòu)設(shè)計悟泵。3個杈笔、10個、50個糕非、100個人的團隊最應(yīng)該用哪種模式蒙具？等你到了宗師級別球榆，你再來回答吧。每一個宗師就是一個高山禁筏，就是一個領(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ā)的鏈條中去。八.其實嚴格來說流椒，飛升已經(jīng)不是原領(lǐng)域的范圍了敏簿。在WEB研發(fā)領(lǐng)域，對于這個層次的有一個很好聽的稱謂：架構(gòu)師宣虾。當然那些“偽架構(gòu)師”另當別論惯裕。一法通，萬法通绣硝。在其它的技術(shù)領(lǐng)域蜻势，也可以按照《入門》《登堂》《入室》《入微》《化蝶》《大俠》《宗師》來劃分等級；一樣也可以按照我這里所寫的每個級別的來快速提升鹉胖。轉(zhuǎn)自：博客園