WEB前端研发工程师编程能力成长之路(2)(转)
WEB前端研发工程师编程能力成长之路(2)
四.【入微】
最强解决方案。你能够走在需求的前面,将当前需求里有的、没有直接提出来的、现在暂时没有但将来可能有的等等,及前端编程潜规则等各个方方面面都综合考虑,给出最优方案。以一招胜万招。
// 我将这个字符串里所可能想到的各种情况都列举出来
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的同等级别规模的前端开发框架。应用成熟的开发框架指导、解决问题。
/**
* 在拼接正则表达式字符串时,消除原字符串中特殊字符对正则表达式的干扰
* @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");
自成体系,有基础,也有理论高度。知道为什么这样设计,也知道什么样的设计最好。比如这个例子可以有这样的封装:
/// 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");
returnthis.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前端研发工程师编程能力成长之路(2)(转)的更多相关文章
- WEB前端研发工程师编程能力成长之路(1)(转)
WEB前端研发工程师编程能力成长之路(1) [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧: ...
- web前端研发工程师编程能力成长之路
[背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
- WEB前端研发工程师编程能力成长之路(2)
四.[入微] 最强解决方案.你能够走在需求的前面,将当前需求里有的.没有直接提出来的.现在暂时没有但将来可能有的等等,及前端编程潜规则等各个方方面面都综合考虑,给出最优方案.以一招胜万招. var s ...
- WEB前端研发工程师编程能力成长之路(1)
[背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧: 如果你是四五年的前端开发高手,没有难题能难得住 ...
- 【转】Web前端研发工程师编程能力飞升之路
分类: Javascript | 出自 海玉的博客 今天看到这篇文章.写的非常有意思.发现自己还有很长的一段路要走. [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如 ...
- Web前端研发工程师编程能力飞升之路
今天看到这篇文章.写的非常有意思,于是转载了.看看我们都处于什么的阶段. [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着 ...
- [转载]Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
- Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
- WEB前端开发工程师成长计划
今天看到一篇文章,感觉很不错,于是转了过来,同时也给自己规划一个方向. [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提 ...
随机推荐
- [Selenium] 配置 Internet Explorer Driver 的注意事项
1)请确保 IEDriverServer 的可执行文件在系统环境变量PATH 中 2)在IE7 和以上版本的 Internet Explorer 上,必须确保保护模式的正确配置.设置方式为 Tools ...
- iOS之strong和copy
深拷贝和浅拷贝 深拷贝和浅拷贝主要是对类类型而言的,浅拷贝就是指针拷贝,深拷贝是对象拷贝. property的strong和copy 在接触iOS程序时经常会看到程序某些类类型属性被strong修饰, ...
- 【SCOI 2009】 Windy数
[题目链接] 点击打开链接 [算法] 数位DP,注意处理前导零的情况 [代码] #include<bits/stdc++.h> using namespace std; #define M ...
- 洛谷P3830 [SHOI2012]随机树——概率期望
题目:https://www.luogu.org/problemnew/show/P3830 询问1:f[x]表示有x个叶节点的树的叶节点平均深度: 可以把被扩展的点的深度看做 f[x-1] ,于是两 ...
- select查询不到实际存在的
转自:https://blog.csdn.net/jack0201/article/details/77868604
- 洛谷 - P1118 - 数字三角形 - next_permutation
https://www.luogu.org/problemnew/show/P1118 next_permutation的第二个参数是最后一个元素的下一个元素,sort也是一样!有毒!这么低级的错误. ...
- “玲珑杯”线上赛 Round #17 河南专场 B:震惊,99%+的中国人都会算错的问题(容斥计算)
传送门 题意 略 分析 是一道稍微变形的容斥题目,容斥一般的公式 \[ans=\sum_iAi-\sum_{i<j}{Ai∩Aj}+\sum_{i<j<k}{Ai∩Aj∩Ak}+.. ...
- YCOJ黑熊过河
Description 有一只黑熊想过河,但河很宽,黑熊不会游泳,只能借助河面上的石墩跳过去,他可以一次跳一墩,也可以一次跳两墩,但是每起跳一次都会耗费一定的能量,黑熊最终可能因能量不够而掉入水中,所 ...
- (数位DP)51NOD 1042 数字0-9的数量
给出一段区间a-b,统计这个区间内0-9出现的次数. 比如 10-19,1出现11次(10,11,12,13,14,15,16,17,18,19,其中11包括2个1),其余数字各出现1次. 输入 ...
- SQL Server 查询入门
普通查询跟带条件的查询 声明:这里我将用通俗易懂的语言去教大家如何理解 SQL Server里的代码. 实例: 1.查询学生表中所有的信息 select * from Student 下面是我的理解 ...