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

作者: hszy00232  發布時間: 2011-03-30 13:43  閱讀: 2650 次  推薦: 4   原文鏈接   [收藏]  

  上篇:WEB前端研發工程師編程能力成長之路(1)

  四.【入微】

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

 
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控件,不要求完整功能,但是該控件里的模塊劃分、代碼組織、編程思想做到位,給出一個系統的解決方案。

  五.【化蝶】

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

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

 
/**
* 在拼接正則表達式字符串時,消除原字符串中特殊字符對正則表達式的干擾
* @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")
}


// 應用實例
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
/**
* 在拼接正則表達式字符串時,消除原字符串中特殊字符對正則表達式的干擾
* @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")
}


// 應用實例
/// 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研發領域,對于這個層次的有一個很好聽的稱謂:架構師。當然那些“偽架構師”另當別論。

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

  祝賀你再獲輝煌!

4
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()