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