前端工程師的進階之路

這篇文章收藏在筆記裏面有幾年了，原文做者無從考究了，侵刪！
最近再翻出來看，依然以爲受益不淺。此次整理分享出來，但願對你們有所啓示。

背景

若是你是剛進入WEB前端研發領域，想試試這潭水有多深，看這篇文章吧；

若是你是作了兩三年WEB產品前端研發，迷茫找不着提升之路，看這篇文章吧；

若是你是四五年的前端開發高手，沒有難題能可貴住你的寂寞高手，來看這篇文章吧。

前言

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

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

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

切記心浮氣燥，級別夠了，那級別裏的東西天然就懂了。悟了就是悟了，沒悟也不要緊，靜下心來，投入時間而已。

（一）入門

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

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

var str = "www.baidu.com/?page";
str = str.replace('?page', "");
console.log(str);
str = str.substring(0, str.indexOf("/"));
console.log(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 week1 = new Date().getDay();
switch (week1) {
    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;
}

console.log(str);
console.log(str1);

進階之路

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

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

（二）登堂

可以正確地解決問題。無論你是經過搜索網絡，或者經過改造某些成品代碼（jQuery/Dojo/Ext/YUI）案例，只要可以無錯地完成需求。

一樣以「刪除指定字符串」爲例：

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

僅僅解決問題對於「登堂」階段來講已經不是問題，這個級別所給出方案不能是漏洞百出。

以上面這段代碼爲例：replace方法的第一個參數雖然能夠支持字符串，但最佳的類型是正則表達式。

再看看「今天是星期幾」示例：

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

對比「入門級」的代碼，無論是從代碼量、代碼效率、代碼優美性、代碼思路來講，「登堂」級的這個日期處理代碼都要優秀不少。

進階之路

這個階段雖然可以給出正確的解題方案，可是不必定是最優秀的方案。如何才能獲得最優秀的方案呢？首先就是積累各類可以解決需求的方案，而後再驗證每一個方案，在這些方案中選擇最好的一種。所以該階段的進階之路就是「行萬里路，看萬卷書」，積累各個需求的各個解決方案。

你能夠扎身在專業論壇（藍色理想、無憂、CSDN）裏，通讀全部的FAQ及帖子；你能夠打開搜索引擎，窮舉全部的搜索結果。本身創建測試環境一一驗證這些代碼：去揣摩每段代碼的意圖，去比較每段代碼之間的差別。這兩條路可讓你快速完成原始積累，當你再面對大多數需求時可以說這些問題我之前作過，那你就水到渠成地晉階了。

（三）入室

最強代碼，知道全部可以解決需求的各類方案，可以選擇使用最優秀的方案知足需求。這個級別基本上產品開發編程中的代碼主力。給出的一招一式，招招都是絕招。

還以上面的那個例子爲例，你能說出一、二、3之間的差異，以及適用於那種環境嗎？

var str = "www.baidu.com/?page";
// 一、字符串剪裁
str.substring(0, str.indexOf("?page"));
// 二、正則表達式
str.replace(/?page/, "");
// 三、字符串分拆、合併
str.split("?page").join("");

可以解決問題的方法會有不少，可是對於程序員來講應該選擇最優秀的。上面這段代碼從代碼量來講「正則表達式」最優秀；從代碼執行效率來講： 「字符 串剪裁」法最高（Chrome中「正則表達式」效率最高），split法最次；從可擴展性上來講，「正則表達式」法最優。具體使用那種方案視具體的需求環境而定。

「入室」階段，程序員應該可以確定的回答：對於這個需求而言，個人代碼就是最優秀的代碼。

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

var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());

對比「登堂」級的示例代碼，上面這段代碼給你什麼感覺？程序員追求的就是完美。「入室」級別追求的就是每一招每一式的天衣無縫。

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

因爲長期處於技術平臺期，技術上得不到提升，一般這個級別的工程師會比較燥。技術上小有所成；或追求我的的突破；或追求產品差別性帶來的新鮮感；或者只是想換個心情；所以不少此級別的工程師會常常換公司。

戒驕戒躁：

• 切勿覺得本身能寫一手漂亮的代碼而自滿；
• 切莫覺得別人「尊稱」你一聲「大俠」你就以 「大俠」自居；
• 切莫覺得本身積累了一些得意的代碼就成了框架式開發。

細節決定成敗，優秀的方案並不能保證最終的成功。

進階之路

此階段進階之路就是：

• 切勿心浮氣躁；你再也不被需求牽着走，而是你牽着需求走。注重細節，注意那些當前需求裏沒有明文給出的細節：代碼性能的差別、運行平臺（瀏覽器）的差別、需求的隱性擴展、代碼的向後兼容等等。
• 再通讀幾遍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++) {
    console.log(a[i] + "n" + a[i].replace(reg, "$2"));
}

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

進階之路

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

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

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

我建議這個級別的工程師作一作WebEditor控件，不要求完整功能，可是該控件裏的模塊劃分、代碼組織、編程思想作到位，給出一個系統的解決方案。

（五）化蝶

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

仍是以那個「字符串剪裁」的老例子：

function escapeReg(str) {
    return str.replace(new RegExp("([.*+?^=!:x24{}()|[\]/\\])", "g"), "\x241");
}

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
mz.string.escapeReg = function (str) {
    return str.replace(new RegExp("([.*+?^=!:x24{}()|[\]/\\])", "g"), "\x241");
};

// 庫文件 /mz/url/delQuery.js
/// include mz.string.escapeReg;
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;
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研發領域，對於這個層次的有一個很好聽的稱謂：架構師。固然那些「僞架構師」另當別論。

總結

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