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

【背景】

　　若是你是刚进入WEB前端研发领域，想试试这潭水有多深，看这篇文章吧；
　　若是你是作了两三年WEB产品前端研发，迷茫找不着提升之路，看这篇文章吧；
　　若是你是四五年的前端开发高手，没有难题能可贵住你的寂寞高手，来看这篇文章吧；

　　WEB前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体系的理论指引，几乎全部从事这个职业的人都是靠本身自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触WEB前端研发至今已然有了9个年头，现在再回首，期间的走了不少弯路。推已及人，若是能让那些后来者少走些弯路，辛甚辛甚！

【前言】

　　所谓的天才，只不过是比日常人更快的掌握技能、完成工做罢了；只要你找到了正确的方向，并辅以足够的时间，你同样可以踏上成功彼岸。

　　本文将WEB前端研发编程能力划分了八个等级，每一个等级都列举出了对应的特征及破级提高之方法，但愿每位在看本文的同窗先准肯定位本身的等级（不要以你目前能力的最高点，而是以你当前能力的中档与之等级做对比，以避免多走弯路），参考突破之法破之。

　　所谓的级别，只是你面对需求时的一种态度：可以完成、可以完美地完成、可以超出预期地完成。以追求完美的态度加以扎实的编程功力，那就是你的编程水平。

　　切记心浮气燥，级别够了，那级别里的东西天然就懂了。悟了就是悟了，没悟也不要紧，静下心来，投入时间而已。

一.【入门】

　　可以解决一些问题的水平。有必定的基础（好比最多见的HTML标签及其属性、事件、方法；最多见的CSS属性；基础的JavaScript编程能力），可以完成一些简单的WEB前端研发需求。

　　举个例子：删除一字符串中指定的字符。

var str="www.baidu.com/?page";
str=str.replace('?page',"");
alert(str);
str=str.substring(0,str.indexOf("/"));
alert(str);

　　首先不要苛责代码的对错严谨，毕竟每一个程序员都有这样的一个过程；其次，这两段代码在这个实例里没有什么大过错，可能会有瑕疵，但可以解决问题（删除指定的字符），这就是这个级别的特征。

　　再举个例子：

// 计算系统当前是星期几
var str = "";
var week = new Date().getDay();
if (week == 0) {
        str = "今天是星期日";
} else if (week == 1) {
        str = "今天是星期一";
} else if (week == 2) {
        str = "今天是星期二";
 } else if (week == 3) {
        str = "今天是星期三";
 } else if (week == 4) {
        str = "今天是星期四";
 } else if (week == 5) {
        str = "今天是星期五";
 } else if (week == 6) {
        str = "今天是星期六";
 }
// 或者更好一些
var str1 = "今天是星期";
var week = new Date().getDay();
switch (week) {
        case 0 :
                str1 += "日";
                break;
        case 1 :
                str1 += "一";
                break;
        case 2 :
                str1 += "二";
                break;
        case 3 :
                str1 += "三";
                break;
        case 4 :
                str1 += "四";
                break;
        case 5 :
                str1 += "五";
                break;
        case 6 :
                str1 += "六";
                break;
}
alert(str);
alert(str1);

入门”阶段是每一个程序员的必经之路，只要“入门”，你就上路了。所谓“师傅领进门，修行靠我的”，有了这个“入门”的基础，本身就能够摸索着前进了。

【进阶之路】

　　将JavaScript、HTML、CSS之类的编码帮助手册里的每一个方法/属性都通读几遍！只有将基础打好，之后的路才能走的顺畅。参考这些帮助文档，力争写出无瑕疵的代码。

　　这些编码文档建议不只是在入门提升期看，在你之后每一个阶段破阶的时候都应该看看，最基础的东西每每也是最给力的东西，有时可以给你带来意想不到的收获。

二.【登堂】

　　可以正确地解决问题。无论你是经过搜索网络，或者经过改造某些成品代码（jQuery/Dojo/Ext/YUI）案例，只要可以无错地完成需求。

　　一样以上面的那段“字符串剪裁”代码为例：

var str="www.baidu.com/?page";
str=str.replace(/?page/,"");
alert(str);

仅仅解决问题对于“登堂”阶段来讲已经不是问题，这个级别所给出方案不能是漏洞百出。以上面这段代码为例：replace方法的第一个参数虽然能够支持字符串，但最佳的类型是正则表达式；

var a = new Array("日", "一", "二", "三", "四", "五", "六");
var week = new Date().getDay();
var str = "今天是星期"+ a[week];
alert(str);

对比“入门级”的代码，不论是从代码量、代码效率、代码优美性、代码思路来讲，“登堂”级的这个日期处理代码都要优秀不少。

　　【进阶之路】

　　这个阶段虽然可以给出正确的解题方案，可是不必定是最优秀的方案。如何才能获得最优秀的方案呢？首先就是积累各类可以解决需求的方案，而后再验证每一个方案，在这些方案中选择最好的一种。所以该阶段的进阶之路就是“行万里路，看万卷书”，积累各个需求的各个解决方案。

　　你能够扎身在专业论坛（蓝色理想、无忧、CSDN）里，通读全部的FAQ及帖子；你能够打开搜索引擎，穷举全部的搜索结果。本身创建测试环境一一验证这些代码：去揣摩每段代码的意图，去比较每段代码之间的差别。这两条路可让你快速完成原始积累，当你再面对大多数需求时可以说这些问题我之前作过，那你就水到渠成地晋阶了。

　　三.【入室】

　　最强代码，知道全部可以解决需求的各类方案，可以选择使用最优秀的方案知足需求。这个级别基本上产品开发编程中的代码主力。给出的一招一式，招招都是绝招。

　　还以上面的那个例子为例，你能说出一、二、3之间的差异，以及适用于那种环境吗？

var str="www.baidu.com/?page";
// 一、字符串剪裁
str.substring(0, str.indexOf("?page"));
// 二、正则表达式
str.replace(/?page/, "");
// 三、字符串分拆、合并
str.split("?page").join("");

　　可以解决问题的方法会有不少，可是对于程序员来讲应该选择最优秀的。上面这段代码从代码量来讲“正则表达式”最优秀；从代码执行效率来讲：“字符串剪裁”法最高（Chrome中“正则表达式”效率最高），split法最次；从可扩展性上来讲，“正则表达式”法最优。具体使用那种方案视具体的需求环境而定。

　　“入室”阶段，程序员应该可以确定的回答：对于这个需求而言，个人代码就是最优秀的代码。

　　再以“今天是星期几”为例，“登堂”级的代码你敢说是最优秀的代码了吗？

// 计算系统当前是星期几
var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());

对比“登堂”级的示例代码，上面这段代码给你什么感觉？程序员追求的就是完美。“入室”级别追求的就是每一招每一式的天衣无缝。

　　从 WEB前端编程来讲，经过2年左右的努力，不少人可以达到这个水平，可是，很大一部分人的编程能力也就止步于此。或限于产品的需求单一性，或限于需求开发的时间紧迫性，或限于人的惰性，可以完美地解决当前的需求就够了。

　　因为长期处于技术平台期，技术上得不到提升，一般这个级别的工程师会比较燥。技术上小有所成；或追求我的的突破；或追求产品差别性带来的新鲜感；或者只是想换个心情；所以不少此级别的工程师会常常换公司。

　　戒骄戒躁：

　　切勿觉得本身能写一手漂亮的代码而自满；
　　切莫觉得别人“尊称”你一声“大侠”你就以“大侠”自居；
　　切莫觉得本身积累了一些得意的代码就成了框架式开发。

　　细节决定成败，优秀的方案并不能保证最终的成功。还以“删除指定字符串”为例，原始字符串从格式上来看应该是了个URL连接，在去除“pn=0”以后，最末尾处留了一个尾巴“?”；若是原始字符串是“http://www.xxx.com/?pn=0&a=1”，去除“pn=0”以后 ? 和 & 两个符号紧贴一块儿，这更是明显的bug。

　　【进阶之路】

　　此阶段进阶之路就是：切勿心浮气躁；你再也不被需求牵着走，而是你牵着需求走。注重细节，注意那些当前需求里没有明文给出的细节：代码性能的差别、运行平台（浏览器）的差别、需求的隐性扩展、代码的向后兼容等等。

　　再通读几遍HTML/CSS/JavaScript帮助文档。

　　我建议这个级别的工程师作一作WebTreeView控件，要求总节点量一万左右操做流畅，你的晋升之路就在这个控件的编码过程当中。