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

【背景】
　　若是你是剛進入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方法的第一個參數雖然能夠支持字符串，但最佳的類型是正則表達式；
var a = new Array("日", "一", "二", "三", "四", "五", "六");
var week = new Date().getDay();
var str = "今天是星期"+ a[week];
alert(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年左右的努力，不少人可以達到這個水平，可是，很大一部分人的編程能力也就止步於此。或限於產品的需求單一性，或限於需求開發的時間緊迫性，或限於人的惰性，可以完美地解決當前的需求就夠了。
　　因爲長期處於技術平臺期，技術上得不到提升，一般這個級別的工程師會比較燥。技術上小有所成；或追求我的的突破；或追求產品差別性帶來的新鮮感；或者只是想換個心情；所以不少此級別的工程師會常常換公司。
　　戒驕戒躁：
　　切勿覺得本身能寫一手漂亮的代碼而自滿；
　　切莫覺得別人「尊稱」你一聲「大俠」你就以「大俠」自居；
　　切莫覺得本身積累了一些得意的代碼就成了框架式開發。
　　細節決定成敗，優秀的方案並不能保證最終的成功。還以「刪除指定字符串」爲例，原始字符串從格式上來看應該是了個URL連接，在去除「pn=0」以後，最末尾處留了一個尾巴「?」；若是原始字符串是「http://www.xxx.com/?pn=0&a=1」，去除「pn=0」以後 ? 和 & 兩個符號緊貼一塊兒，這更是明顯的bug。
　　【進階之路】
　　此階段進階之路就是：切勿心浮氣躁；你再也不被需求牽着走，而是你牽着需求走。注重細節，注意那些當前需求裏沒有明文給出的細節：代碼性能的差別、運行平臺（瀏覽器）的差別、需求的隱性擴展、代碼的向後兼容等等。（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

再通讀幾遍HTML/CSS/JavaScript幫助文檔。
　　我建議這個級別的工程師作一作WebTreeView控件，要求總節點量一萬左右操做流暢，你的晉升之路就在這個控件的編碼過程當中。