分类:  | 出自 海玉的博客 

今天看到这篇文章。写的非常有意思。发现自己还有很长的一段路要走。

【背景】

如果你是刚进入WEB前端研发领域，想试试这潭水有多深，看这篇文章吧；

如果你是做了两三年WEB产品前端研发，迷茫找不着提高之路，看这篇文章吧；

如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧；

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

【前言】

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

本文将WEB前端研发编程能力划分了八个等级，每个等级都列举出了对应的特征及破级提升之方法，希望每位在看本文的同学先准确定位自己的等级(不要以你目前能力的最高点，而是以你当前能力的中档与之等级作对比，以免多走弯路)，参考突破之法破之。

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

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

一.【入门】

能够解决一些问题的水平。有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript编程能力)，能够完成一些简单的WEB前端研发需求。

 

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

var str="www.baidu.com/?page"; strstr=str.replace('?page',""); alert(str); strstr=str.substring(0,str.indexOf("http://www.cnblogs.com/")); 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"; strstr=str.replace(/?page/,""); alert(str);

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

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

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

【进阶之路】

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

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

三.【入室】

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

还以上面的那个例子为例，你能说出1、2、3之间的差别，以及适用于那种环境吗?

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

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

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

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

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

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