web前端研發工程師編程能力成長之路

標籤：前端   等級   ++   測試   允許   字串   專業   pos   href   

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

WEB前端研發工程師，在國內是一個朝陽職業，自07-08年正式有這個職業以來，也不過三四年的時間。這個領域沒有學校的正規教育，沒有行內成體系的理論指引，幾乎所有從事這個職業的人都是靠自己自學成才。自學成才，一條艱辛的坎坷路，我也是這樣一路走來。從2002年開始接觸WEB前端研發至今已然有了9個年頭，如今再回首，期間的走了很多彎路。推已及人，如果能讓那些後來者少走些彎路，辛甚辛甚！

【前言】

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

本文將WEB前端研發編程能力劃分了八個等級，每個等級都列舉出了對應的特徵及破級提升之方法，希望每位在看本文的同學先準確定位自己的等級（不要以你目前能力的最高點，而是以你當前能力的中檔與之等級作對比，以免多走彎路），參考突破之法破之。

所謂的層級，只是你面對需求時的一種態度：能夠完成、能夠完美地完成、能夠超出預期地完成。以追求完美的態度加以紮實的編程功力，那就是你的編程水平。

切記心浮氣燥，層級夠了，那層級裡的東西自然就懂了。悟了就是悟了，沒悟也沒關係，靜下心來，投入時間而已。

一.【入門】

能夠解決一些問題的水平。有一定的基礎（比如最常見的HTML標籤及其屬性、事件、方法；最常見的CSS屬性；基礎的JavaScript編程能力），能夠完成一些簡單的WEB前端研發需求。

舉個例子：刪除一字串中指定的字元。

var str="www.baidu.com/?page";
str=str.replace(‘?page‘,"");
alert(str);
str=str.substring(0,str.indexOf("/"));
alert(str);

首先不要苛責代碼的對錯嚴謹，畢竟每個程式員都有這樣的一個過程；其次，這兩段代碼在這個執行個體裡沒有什麼大過錯，可能會有瑕疵，但能夠解決問題（刪除指定的字元），這就是這個層級的特徵。

再舉個例子：

// 計算系統當前是星期幾
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);

入門”階段是每個程式員的必經之路，只要“入門”，你就上路了。所謂“師傅領進門，修行靠個人”，有了這個“入門”的基礎，自己就可以摸索著前進了。

【進階之路】

將JavaScript、HTML、CSS之類的編碼協助手冊裡的每個方法/屬性都通讀幾遍！只有將基礎打好，以後的路才能走的順暢。參考這些協助文檔，力爭寫出無瑕疵的代碼。

這些編碼文檔建議不僅是在入門提高期看，在你以後每個階段破階的時候都應該看看，最基礎的東西往往也是最給力的東西，有時能夠給你帶來意想不到的收穫。

二.【登堂】

能夠正確地解決問題。不管你是通過搜尋網路，或者通過改造某些成品代碼（jQuery/Dojo/Ext/YUI）案例，只要能夠無錯地完成需求。

同樣以上面的那段“字串剪裁”代碼為例：

var str="www.baidu.com/?page";
str=str.replace(/?page/,"");
alert(str);

僅僅解決問題對於“登堂”階段來說已經不是問題，這個層級所給出方案不能是漏洞百出。以上面這段代碼為例：replace方法的第一個參數雖然可以支援字串，但最佳的類型是Regex；

var a = new Array("日", "一", "二", "三", "四", "五", "六");
var week = new Date().getDay();
var str = "今天是星期"+ a[week];
alert(str);

對比“入門級”的代碼，不管是從代碼量、代碼效率、代碼優美性、代碼思路來說，“登堂”級的這個日期處理代碼都要優秀很多。

【進階之路】

這個階段雖然能夠給出正確的解題方案，但是不一定是最優秀的方案。如何才能得到最優秀的方案呢？首先就是積累各種能夠解決需求的方案，然後再驗證每個方案，在這些方案中選擇最好的一種。因此該階段的進階之路就是“行萬裡路，看萬卷書”，積累各個需求的各個解決方案。

你可以紮身在專業論壇（藍色理想、無憂、CSDN）裡，通讀所有的FAQ及文章；你可以開啟搜尋引擎，窮舉所有的搜尋結果。自己建立測試環境一一驗證這些代碼：去揣摩每段代碼的意圖，去比較每段代碼之間的差異。這兩條路可以讓你快速完成原始積累，當你再面對大多數需求時能夠說這些問題我以前做過，那你就水到渠成地晉階了。

三.【入室】

最強代碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優秀的方案滿足需求。這個層級基本上產品開發編程中的代碼主力。給出的一招一式，招招都是絕招。

還以上面的那個例子為例，你能說出1、2、3之間的差別，以及適用於那種環境嗎？

var str="www.baidu.com/?page";
// 1、字串剪裁
str.substring(0, str.indexOf("?page"));
// 2、Regex
str.replace(/?page/, "");
// 3、字串分拆、合并
str.split("?page").join("");

能夠解決問題的方法會有很多，但是對於程式員來說應該選擇最優秀的。上面這段代碼從代碼量來說“Regex”最優秀；從代碼執行效率來說： “字串剪裁”法最高（Chrome中“Regex”效率最高），split法最次；從可擴充性上來說，“Regex”法最優。具體使用那種方案視具體的需求環境而定。

“入室”階段，程式員應該能夠肯定的回答：對於這個需求而言，My Code就是最優秀的代碼。

再以“今天是星期幾”為例，“登堂”級的代碼你敢說是最優秀的代碼了嗎？

// 計算系統當前是星期幾
var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());

對比“登堂”級的範例程式碼，上面這段代碼給你什麼感受？程式員追求的就是完美。“入室”層級追求的就是每一招每一式的完美無缺。

從WEB前端編程來說，通過2年左右的努力，很多人能夠達到這個水平，但是，很大一部分人的編程能力也就止步於此。或限於產品的需求單一性，或限於需求開發的時間緊迫性，或限於人的惰性，能夠完美地解決當前的需求就夠了。

由於長期處於技術平台期，技術上得不到提高，通常這個層級的工程師會比較燥。技術上小有所成；或追求個人的突破；或追求產品差異性帶來的新鮮感；或者只是想換個心情；因此很多此層級的工程師會經常換公司。

戒驕戒躁：

切勿以為自己能寫一手漂亮的代碼而自滿；
切莫以為別人“尊稱”你一聲“大俠”你就以 “大俠”自居；
切莫以為自己積累了一些得意的代碼就成了架構式開發。

細節決定成敗，優秀的方案並不能保證最終的成功。還以“刪除指定字串”為例，原始字串從格式上來看應該是了個URL連結，在去除“pn=0”之後，最末尾處留了一個尾巴“?”；如果原始字串是“http://www.xxx.com/?pn=0&a=1”，去除“pn=0”之後 ? 和 & 兩個符號緊貼一起，這更是明顯的bug。

【進階之路】

此階段進階之路就是：切勿心浮氣躁；你不再被需求牽著走，而是你牽著需求走。注重細節，注意那些當前需求裡沒有明文給出的細節：代碼效能的差異、運行平台（瀏覽器）的差異、需求的隱性擴充、代碼的向後相容等等。

再通讀幾遍HTML/CSS/JavaScript協助文檔。

我建議這個層級的工程師做一做WebTreeView控制項，要求總節點量一萬左右操作流暢，你的晉陞之路就在這個控制項的編碼過程中。

四.【入微】

最強解決方案。你能夠走在需求的前面，將當前需求裡有的、沒有直接提出來的、現在暫時沒有但將來可能有的等等，及前端編程潛規則等各個方方面面都綜合考慮，給出最優方案。以一招勝萬招。

var str = "http://www.xxx.com/?pn=0"; // 刪除指定字元 pn=0
// 我將這個字串裡所可能想到的各種情況都列舉出來
var a = [
"http://www.xxx.com/VMpn=?pn=0"// pn= 可能出現在 ? 前
, "http://www.xxx.com/VMpn=?pn="// URL裡允許pn 值為空白
, "http://www.xxx.com/VMpn=?pn=0&a=1"// URL 裡可有多個欄位
, "http://www.xxx.com/VMpn=?a=1&pn=0"// 可能排在最後
, "http://www.xxx.com/VMpn=?a=1&pn=0&pn=1"// 可能有多個 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" // 可能零星分布
];
/* 需求的不言之秘：
? 若出現在字串最尾則要去之
? & 兩個符號不可重疊
*/
var reg = /((\?)(pn=[^&]*&)+(?!pn=))|(((\?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g;

for (var i = 0; i < a.length; i++) {
alert(a[i] + "\n" + a[i].replace(reg, "$2"));
}

這個階段已經不再追求一招一式，對你來說不是使用什麼創新絕招解決需求，而是給出成熟穩重的方案，從根上解決問題。針對某個當前需求你的代碼可能不是最優，但是針對此類的需求你的代碼卻是最優秀的代碼。

【進階之路】

很多WEB前端研發工程師在做了3-4年之後就會進入一個瓶頸期：產品開發需求是小菜一碟，沒有新鮮的可以挑戰的東西；代碼開發中的稀奇的解題方法都已經嘗試過。沒有了可挑戰的難題，失去了探索的激情，也就沒有了再上升的動力，好不容易走過“入室”層級的人又會有八九成止步於此。或轉做技術領導人，或轉到其它的領域，或換公司。

這些人的上升之路在哪裡呢？

這個階段單單依靠技巧和數量的累積已經沒有什麼效果了，突破之路在第5層《化蝶》裡會詳細說明，我建議你在這個階段末尾著重關注編程理論：物件導向/過程、程式碼群組織形式、編譯、代碼規範、其它的架構設計等等。

我建議這個層級的工程師做一做WebEditor控制項，不要求完整功能，但是該控制項裡的模組劃分、程式碼群組織、編程思想做到位，給出一個系統的解決方案。

五.【化蝶】

破繭重生，這個層次關注的是程式設計語言本身，而不再關心產品需求。什麼是繭？產品需求就是繭。當你一招勝萬招，打遍天下需求之時，你如果還拘泥於需求開發，那就是你限於繭中而不自知。要麼就在這個繭裡默默地老去，要麼就破開繭獲得新生。

還是以那個“字串剪裁”的老例子：

/**
* 在拼接Regex字串時，消除原字串中特殊字元對Regex的幹擾
* @author:meizz
* @version: 2010/12/16
* @param {String} str 被Regex字串保護編碼的字串
* @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")
}

// 應用執行個體
var str = "http://www.xxx.com/?pn=0"; // 刪除指定字元 pn=0
delUrlQuery(str, "pn");

這段代碼相對於層次4《入微》有什麼區別嗎？從代碼實現上來說沒有太大的區別，但是從思路上來說卻有著本質的區別：1、不再是就事論事，頭疼醫頭，而是把一類問題抽象理論化，一招破萬招；2、有封裝的概念，不再是每次從零開始，而是站在半山腰開始爬。

在WEB前端研發隊伍裡也有很大一部分人《入室》層次時就自我感覺良好，直接跨躍到《化蝶》，積累自己的程式碼程式庫，抽象化問題。但沒有基礎，缺少強大的後勁，即使能夠破繭也經受不了風吹雨打。一份不成熟的架構設計對團隊開發帶來的危害遠大於它帶來的好處，這種例子在業界屢見不鮮。不要拔苗助長，不要不會走就想著跑，夯實基礎，水到渠成地成長，厚積薄發，強力地破繭而出。

【進階之路】

你已經從原始積累，到厚積薄發，到破繭而出之後，你所關注的應該不再是一招一式、一個項目、一個模組，而應該是一種思路，一種理論。你可以做以下幾個步驟以突破到更高層次：再仔細看幾遍HTML/CSS/JavaScript介面協助文檔；選擇一門強語言（C++/C#/Java等）觀察理解這些語言的組織圖，語言設計；看看原型鏈，鏈式文法編程，泛型，介面編程，DOM遙控器等等；仔細閱讀成熟的WEB前端開發架構的設計文檔，看他們為什麼要這樣設計。

六.【大俠】

這裡所說的大俠，不是大家互相吹捧的“大俠”，而是實至名歸的高手。這個層級的人完全有能力寫出不差於Bindows/jQuery/Ext/YUI/Dojo的同等層級規模的前端開發架構。應用成熟的開發架構指導、解決問題。

// 庫檔案 /mz/string/escapeReg.js
/**
* 在拼接Regex字串時，消除原字串中特殊字元對Regex的幹擾
* @author:meizz
* @version: 2010/12/16
* @param {String} str 被Regex字串保護編碼的字串
* @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")
}

// 應用執行個體
/// include mz.url.delQuery;
var str = "http://www.xxx.com/?pn=0"; // 刪除指定字元 pn=0
mz.url.delQuery(str, "pn");

自成體系，有基礎，也有理論高度。知道為什麼這樣設計，也知道什麼樣的設計最好。比如這個例子可以有這樣的封裝：

// 庫檔案 /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")
}

// 應用執行個體
/// include mz.url.delQuery;
var str = "http://www.xxx.com/?pn=0"; // 刪除指定字元 pn=0
str.delQuery("pn");

而為什麼不採用下面的那種封裝呢？經過了《知微》和《化蝶》你就懂了。

【進階出路】

道法自然，從根上去尋找突破的契機。你可以研讀HTML解析引擎設計與實現，JS解析引擎設計與實現，其它語言的代碼解析與編譯實現等等。

或者出些書。低層級的人寫的書要麼是一大抄，空無一物；要麼是害人。

七.【宗師】

這個層級的人已然到了無招勝有招的境界。項目開發中的難題？沒有難題！運行平台的差異？從根本上搞定！代碼規範、開發模式，早已經被拋在身後。這個層級的人已經不再關注於某個前端開發架構，而是應對具體的環境給出最佳的理論指導。

這個層級的人所注意的應該是以最合理的系統架構引領著整個團隊的進步，在什麼樣的情境下該用什麼樣的架構設計。3個、10個、50個、100個人的團隊最應該用哪種模式？等你到了宗師層級，你再來回答吧。

【進階出路】

每一個宗師就是一個高山，就是一個領域裡的神，但是你僅滿足於在一群比你弱的群體展現你的強大嗎？如果還你是止步原地，那總會有人乘著飛機、宇宙飛船從你的頭領掠過，高處不勝寒！

要突破這片領域，那就必須跳出這片領域。要想突破WEB前端研發的宗師級，那就跳出WEB前端吧，上面還有WEB開發。即使你是WEB前端的宗師，但沒有快速的資料響應，沒有高速的網路架構，沒有優美的系統支援，你又能如何？所以突破之路就是把目光投到整條WEB開發的鏈條中去。

八.【飛升】

其實嚴格來說，飛升已經不是原領域的範圍了。在WEB研發領域，對於這個層次的有一個很好聽的稱謂：架構師。當然那些“偽架構師”另當別論。

一法通，萬法通。在其它的技術領域，也可以按照《入門》《登堂》《入室》《入微》《化蝶》《大俠》《宗師》來劃分等級；一樣也可以按照我這裡所寫的每個層級的【進階之路】來快速提升。

祝賀你再獲輝煌！

蔣軍利
2017/01/30

原文連結：http://hszy00232.blog.163.com/blog/static/430227532011119105237357/

web前端研發工程師編程能力成長之路