WEB前端开发工程师成长之路

另味怪友
969次浏览
2020年01月05日 01:10
最佳经验
本文由作者推荐
app前端开发工程师怎么学
WEB前端开发工程师成长之路(计划)
今天看到一篇文章,感觉很不错,于是转了过来,同时也给自己规划一个方向。
【背景】
如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧;如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧;如果你是四五年的前端开发高手,没有难题能难得住你的寂寞高手,来看这篇文章吧;web前端研发工程师,在国内是一个朝阳职业,自07-08年正式有这个职业以来,也不过三四年的时间。这个领域没有学校的正规教育,没有行内成体系的理论指引,几乎所有从事这个职业的人都是靠自己自学成才。自学成才,一条艰辛的坎坷路,我也是这样一路走来。从2002年开始接触web前端研发至今已然有了9个年头,如今再回首,期间的走了很多弯路。推已及人,如果能让那些后来者少走些弯路,辛甚辛甚!
【前言】
所谓的天才,只不过是比平常人更快的掌握技能、完成工作罢了;只要你找到了正确的方向,并辅以足够的时间,你一样能够踏上成功彼岸。本文将web前端研发编程能力划分了八个等级,每个等级都列举出了对应的特征及破级提升之方法,希望每位在看本文的同学先准确定位自己的等级(不要以你目前能力的最高点,而是以你当前能力的中档与之等级作对比,以免多走弯路),参考突破之法破之。所谓的级别,只是你面对需求时的一种态度:能够完成、能够完美地完成、能够超出预期地完成。以追求完美的态度加以扎实的编程功力,那就是你的编程水平。切记心浮气燥,级别够了,那级别里的东西自然就懂了。悟了就是悟了,没悟也没关系,静下心来,投入时间而已。
一.【入门】
能够解决一些问题的水平。有一定的基础(比如最常见的html标签及其属性、事件、方法;最常见的css属性;基础的javascript编程能力),能够完成一些简单的web前端研发需求。举个例子:删除一字符串中指定的字符。
varstr="/?page";
str=e('?page',"");
alert(str);
str=ing(0,f("/"));
alert(str);
首先不要苛责代码的对错严谨,毕竟每个程序员都有这样的一个过程;其次,这两段代码在这个实例里没有什么大过错,可能会有瑕疵,但能够解决问题(删除指定的字符),这就是这个级别的特征。再举个例子:
// 计算系统当前是星期几
varstr="";
var week =new date().getday();
if(week ==0){
str="今天是星期日";
}elseif(week ==1){
str="今天是星期一";
}elseif(week ==2){
str="今天是星期二";
}elseif(week ==3){
str="今天是星期三";
}elseif(week ==4){
str="今天是星期四";
}elseif(week ==5){
str="今天是星期五";
}elseif(week ==6){
str="今天是星期六";
}
// 或者更好一些
var str1 ="今天是星期";
var week =new date().getday();
switch(week){
case0:
str1 +="日";
break;
case1:
str1 +="一";
break;
case2:
str1 +="二";
break;
case3:
str1 +="三";
break;
case4:
str1 +="四";
break;
case5:
str1 +="五";
break;
case6:
str1 +="六";
break;
}
alert(str);
alert(str1);
“入门”阶段是每个程序员的必经之路,只要”入门”,你就上路了。所谓”师傅领进门,修行靠个人”,有了这个”入门”的基础,自己就可以摸索着前进了。
进阶之路
将javascript、html、css之类的编码帮助手册里的每个方法/属性都通读几遍!只有将基础打好,以后的路才能走的顺畅。参考这些帮助文档,力争写出无瑕疵的代码。这些编码文档建议不仅是在入门提高期看,在你以后每个阶段破阶的时候都应该看看,最基础的东西往往也是最给力的东西,有时能够给你带来意想不到的收获。
二.【登堂】
能够正确地解决问题。不管你是通过搜索网络,或者通过改造某些成品代码(jquery/dojo/ext/yui)案例,只要能够无错地完成需求。同样以上面的那段”字符串剪裁”代码为例:
varstr="/?page";
str=e(/?page/,"");
alert(str);
仅仅解决问题对于”登堂”阶段来说已经不是问题,这个级别所给出方案不能是漏洞百出。以上面这段代码为例:replace方法的第一个参数虽然可以支持字符串,但最佳的类型是正则表达式;
var a =new array("日","一","二","三","四","五","六");
var week =new date().getday();
varstr="今天是星期"+ a[week];
alert(str);
对比”入门级”的代码,不管是从代码量、代码效率、代码优美性、代码思路来说,”登堂”级的这个日期处理代码都要优秀很多。
进阶之路
这个阶段虽然能够给出正确的解题方案,但是不一定是最优秀的方案。如何才能得到最优秀的方案呢?首先就是积累各种能够解决需求的方案,然后再验证每个方案,在这些方案中选择最好的一种。因此该阶段的进阶之路就是”行万里路,看万卷书”,积累各个需求的各个解决方案。你可以扎身在专业论坛(蓝色理想、无忧、csdn)里,通读所有的faq及帖子;你可以打开搜索引擎,穷举所有的搜索结果。自己建立测试环境一一验证这些代码:去揣摩每段代码的意图,去比较每段代码之间的差异。这两条路可以让你快速完成原始积累,当你再面对大多数需求时能够说这些问题我以前做过,那你就水到渠成地晋阶了。
三.【入室】
最强代码,知道所有能够解决需求的各种方案,能够选择使用最优秀的方案满足需求。这个级别基本上产品开发编程中的代码主力。给出的一招一式,招招都是绝招。还以上面的那个例子为例,你能说出1、2、3之间的差别,以及适用于那种环境吗?
varstr="/?page";
// 1、字符串剪裁
ing(0,f("?page"));
// 2、正则表达式
e(/?page/,"");
// 3、字符串分拆、合并
("?page").join("");
能够解决问题的方法会有很多,但是对于程序员来说应该选择最优秀的。上面这段代码从代码量来说”正则表达式”最优秀;从代码执行效率来说: “字符串剪裁”法最高(chrome中”正则表达式”效率最高),split法最次;从可扩展性上来说,”正则表达式”法最优。具体使用那种方案视具体的需求环境而定。“入室”阶段,程序员应该能够肯定的回答:对于这个需求而言,我的代码就是最优秀的代码。再以”今天是星期几”为例,”登堂”级的代码你敢说是最优秀的代码了吗?
// 计算系统当前是星期几
varstr="今天是星期"+"日一二三四五六".charat(new date().getday());
对比”登堂”级的示例代码,上面这段代码给你什么感受?程序员追求的就是完美。”入室”级别追求的就是每一招每一式的完美无缺。从web前端编程来说,通过2年左右的努力,很多人能够达到这个水平,但是,很大一部分人的编程能力也就止步于此。或限于产品的需求单一性,或限于需求开发的时间紧迫性,或限于人的惰性,能够完美地解决当前的需求就够了。由于长期处于技术平台期,技术上得不到提高,通常这个级别的工程师会比较燥。技术上小有所成;或追求个人的突破;或追求产品差异性带来的新鲜感;或者只是想换个心情;因此很多此级别的工程师会经常换公司。戒骄戒躁:切勿以为自己能写一手漂亮的代码而自满;切莫以为别人”尊称”你一声”大侠”你就以 “大侠”自居;切莫以为自己积累了一些得意的代码就成了框架式开发。细节决定成败,优秀的方案并不能保证最终的成功。还以”删除指定字符串”为例,原始字符串从格式上来看应该是了个url链接,在去除”pn=0″之后,最末尾处留了一个尾巴”?”;如果原始字符串是”/?pn=0&a=1″,去除”pn=0″之后 ?和&两个符号紧贴一起,这更是明显的bug。
进阶之路
此阶段进阶之路就是:切勿心浮气躁;你不再被需求牵着走,而是你牵着需求走。注重细节,注意那些当前需求里没有明文给出的细节:代码性能的差异、运行平台(浏览器)的差异、需求的隐性扩展、代码的向后兼容等等。再通读几遍html/css/javascript帮助文档。我建议这个级别的工程师做一做webtreeview控件,要求总节点量一万左右操作流畅,你的晋升之路就在这个控件的编码过程中。
四.【入微】
最强解决方案。你能够走在需求的前面,将当前需求里有的、没有直接提出来的、现在暂时没有但将来可能有的等等,及前端编程潜规则等各个方方面面都综合考虑,给出最优方案。以一招胜万招。
varstr="/?pn=0";// 删除指定字符pn=0
// 我将这个字符串里所可能想到的各种情况都列举出来
var a =[
"/vmpn=?pn=0"// pn= 可能出现在 ?前
,"/vmpn=?pn="// url里允许pn值为空
,"/vmpn=?pn=0&a=1"// url里可有多个字段
,"/vmpn=?a=1&pn=0"// 可能排在最后
,"/vmpn=?a=1&pn=0&pn=1"// 可能有多个pn字段
,"/vmpn=?a=1&pn=0&b=2"// 可能在中间
,"/vmpn=?a=1&pn=0&pn=1&b=1"// 可能在中间成组
,"/vmpn=?a=1&pn=0&b=1&pn=1"// 可能零星分布
];
/* 需求的不言之秘:
? 若出现在字符串最尾则要去之
? &两个符号不可重叠