四.【入微】
最強解決方案。你能夠走在需求的前面，將當前需求裏有的、沒有直接提出來的、現在暫時沒有但將來可能有的等等，及前端編程潛規則等各個方方面面都綜合考慮，給出最優方案。以一招勝萬招。
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");
在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研發領域，對於這個層次的有一個很好聽的稱謂：架構師。當然那些“僞架構師”另當別論。
一法通，萬法通。在其它的技術領域，也可以按照《入門》《登堂》《入室》《入微》《化蝶》《大俠》《宗師》來劃分等級；一樣也可以按照我這裏所寫的每個級別的【進階之路】來快速提升。
祝賀你再獲輝煌！