代码改变世界

WEB前端研发工程师编程能力成长之路（2）

2011-07-02 23:36  Rollen Holt  阅读(1334)  评论(3)  编辑  收藏  举报

　　上篇：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研发领域，对于这个层次的有一个很好听的称谓：架构师。当然那些“伪架构师”另当别论。

　　一法通，万法通。在其它的技术领域，也可以按照《入门》《登堂》《入室》《入微》《化蝶》《大侠》《宗师》来划分等级；一样也可以按照我这里所写的每个级别的【进阶之路】来快速提升。

　　祝贺你再获辉煌！

　　上篇：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研发领域，对于这个层次的有一个很好听的称谓：架构师。当然那些“伪架构师”另当别论。

　　一法通，万法通。在其它的技术领域，也可以按照《入门》《登堂》《入室》《入微》《化蝶》《大侠》《宗师》来划分等级；一样也可以按照我这里所写的每个级别的【进阶之路】来快速提升。

　　祝贺你再获辉煌！