Recommended reading: Web front-end development engineers' path to improving their programming skills_html/css_WEB-ITnose

A must-read for Web front-end engineers [Background]

If you have just entered the field of web front-end R&D and want to try how deep the water is, read this article;
If If you have been doing front-end development of web products for two or three years and are confused and can’t find a way to improve, read this article;
If you are a master of front-end development for four or five years, and no problem can stop you from being a lonely master, come here Read this article;

Web front-end R&D engineer is a rising profession in China. It has only been three or four years since this profession was officially launched in 2007-08. There is no formal school education in this field, and there is no systematic theoretical guidance from the industry. Almost all people engaged in this profession are self-taught. Being self-taught is a difficult and bumpy road, and I have also walked this way. It has been nine years since I started working on web front-end research and development in 2002. Looking back now, I have made many detours during this period. It would be a great blessing if we can help those who come after us to take less detours!

[Foreword]

The so-called genius is just mastering skills and completing work faster than ordinary people; as long as you find the right direction and give it enough time, you can still succeed. the other side.

This article divides web front-end R&D and programming capabilities into eight levels. Each level lists the corresponding characteristics and methods to improve the level. I hope that every student reading this article will accurately locate their own level first. (Don’t use the highest point of your current ability, but compare it with the mid-range of your current ability to avoid taking more detours). Refer to the breakthrough method to break it.

The so-called level is just an attitude when you face the demand: being able to complete it, being able to complete it perfectly, and being able to complete it beyond expectations. With an attitude of pursuing perfection and solid programming skills, that is your programming level.
Remember that if you are at a high level, you will naturally understand the things at that level. If you have enlightenment, you have enlightenment. It doesn't matter if you don't. Just calm down and invest your time.

1. [Getting Started]

A level that can solve some problems. Have a certain foundation (such as the most common HTML tags and their attributes, events, and methods; the most common CSS attributes; basic JavaScript programming capabilities) and be able to complete some simple web front-end research and development needs.
For example: delete specified characters in a string.

<pre class="sycode" name="code">  1: var str="www.baidu.com/?page";

  2: str=str.replace('?page',"");

  3: alert(str);

  4: str=str.substring(0,str.indexof("/"));

  5: alert(str);

First of all, don’t criticize the accuracy of the code. After all, every programmer has such a process. ; Secondly, there is nothing wrong with these two pieces of code in this example. There may be flaws, but they can solve the problem (delete the specified characters). This is the characteristic of this level.
Another example:

<pre class="sycode" name="code">  1: // 计算系统当前是星期几

  2: var str = "";

  3: var week = new date().getday();

  4: if (week == 0) {

  5:         str = "今天是星期日";

  6: } else if (week == 1) {

  7:         str = "今天是星期一";

  8: } else if (week == 2) {

  9:         str = "今天是星期二";

 10: } else if (week == 3) {

 11:         str = "今天是星期三";

 12: } else if (week == 4) {

 13:         str = "今天是星期四";

 14: } else if (week == 5) {

 15:         str = "今天是星期五";

 16: } else if (week == 6) {

 17:         str = "今天是星期六";

 18: }

 19: // 或者更好一些

 20: var str1 = "今天是星期";

 21: var week = new date().getday();

 22: switch (week) {

 23:         case 0 :

 24:                 str1 += "日";

 25:                 break;

 26:         case 1 :

 27:                 str1 += "一";

 28:                 break;

 29:         case 2 :

 30:                 str1 += "二";

 31:                 break;

 32:         case 3 :

 33:                 str1 += "三";

 34:                 break;

 35:         case 4 :

 36:                 str1 += "四";

 37:                 break;

 38:         case 5 :

 39:                 str1 += "五";

 40:                 break;

 41:         case 6 :

 42:                 str1 += "六";

 43:                 break;

 44: }

 45: alert(str);

 46: alert(str1);

The "getting started" stage is the only way for every programmer. As long as you "get started", you are on your way. As the saying goes "the master leads you in, practice depends on the individual", with this" With the basics of "Getting Started", you can feel your way forward.

Road to Advancement

Read through every method/attribute in coding help manuals such as javascript, html, and css. Several times! Only by laying a good foundation can you go smoothly in the future. Please refer to these help documents and strive to write flawless code.
These coding document suggestions are not only for you to read during the entry-level period, but also for every step in the future. You should look at it when you break through the stages. The most basic things are often the most powerful things, and sometimes they can bring you unexpected gains.

2. [Dengtang]

Be able to solve the problem correctly. You can search the Internet or transform some finished code (jquery/dojo/ext/yui) cases, as long as the requirements can be completed without errors
Take the above "string clipping" code as an example:

<pre class="sycode" name="code">  1: var str="www.baidu.com/?page";

  2: str=str.replace(/?page/,"");

  3: alert(str);

Simply solving the problem is no longer a problem for the "entrance" stage. The solution given at this level cannot be full of loopholes. Take the above code as an example. Example: Although the first parameter of the replace method can support strings, the best type is a regular expression;

<pre class="sycode" name="code">  1: var a = new array("日", "一", "二", "三", "四", "五", "六");

  2: var week = new date().getday();

  3: var str = "今天是星期"+ a[week];

  4: alert(str);

Contrast "Entry Level" ” code, no matter in terms of code volume, code efficiency, code elegance, or code ideas, this “advanced” level date processing code is much better.

Road to Advancement

Although the correct solution to the problem can be given at this stage, it is not necessarily the best solution. How to get the best solution first is to accumulate various solutions that can solve the needs, and then verify each solution. , choose the best one among these solutions. Therefore, the way to advance at this stage is to "travel thousands of miles and read thousands of books" to accumulate various solutions for various needs

.

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

三.【入室】

最强代码，知道所有能够解决需求的各种方案，能够选择使用最优秀的方案满足需求。这个级别基本上产品开发编程中的代码主力。给出的一招一式，招招都是绝招。
还以上面的那个例子为例，你能说出1、2、3之间的差别，以及适用于那种环境吗？

<pre class="sycode" name="code">  1: var str="www.baidu.com/?page";

  2: // 1、字符串剪裁

  3: str.substring(0, str.indexof("?page"));

  4: // 2、正则表达式

  5: str.replace(/?page/, "");

  6: // 3、字符串分拆、合并

  7: str.split("?page").join("");

 

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

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

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

<pre class="sycode" name="code">  1: // 计算系统当前是星期几

  2: var str = "今天是星期" + "日一二三四五六".charat(new date().getday());

  3: 

 

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

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

由于长期处于技术平台期，技术上得不到提高，通常这个级别的工程师会比较燥。技术上小有所成；或追求个人的突破；或追求产品差异性带来的新鲜感；或者只是想换个心情；因此很多此级别的工程师会经常换公司。

戒骄戒躁：

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

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

进阶之路

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

再通读几遍html/css/javascript帮助文档。

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

四.【入微】

最强解决方案。你能够走在需求的前面，将当前需求里有的、没有直接提出来的、现在暂时没有但将来可能有的等等，及前端编程潜规则等各个方方面面都综合考虑，给出最优方案。以一招胜万招。

<pre class="sycode" name="code">  1: var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0

  2: // 我将这个字符串里所可能想到的各种情况都列举出来

  3: var a = [

  4:          "http://www.xxx.com/vmpn=?pn=0"// pn= 可能出现在 ? 前

  5:         , "http://www.xxx.com/vmpn=?pn="// url里允许pn 值为空

  6:         , "http://www.xxx.com/vmpn=?pn=0&a=1"// url 里可有多个字段

  7:         , "http://www.xxx.com/vmpn=?a=1&pn=0"// 可能排在最后

  8:         , "http://www.xxx.com/vmpn=?a=1&pn=0&pn=1"// 可能有多个 pn 字段

  9:         , "http://www.xxx.com/vmpn=?a=1&pn=0&b=2"// 可能在中间

 10:         , "http://www.xxx.com/vmpn=?a=1&pn=0&pn=1&b=1"  // 可能在中间成组

 11:         , "http://www.xxx.com/vmpn=?a=1&pn=0&b=1&pn=1"  // 可能零星分布

 12: ];

 13: /* 需求的不言之秘： 

 14: ? 若出现在字符串最尾则要去之

 15: ? & 两个符号不可重叠

 16: */

 17: var reg = /((\?)(pn=[^&]*&)+(?!pn=))|(((\?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g;

 18:  

 19: for (var i = 0; i < a.length; i++) {

 20:     alert(a + "\n" + a.replace(reg, "$2"));

 21: }

这个阶段已经不再追求一招一式，对你来说不是使用什么创新绝招解决需求，而是给出成熟稳重的方案，从根上解决问题。针对某个当前需求你的代码可能不是最优，但是针对此类的需求你的代码却是最优秀的代码。

进阶之路

很多web前端研发工程师在做了3-4年之后就会进入一个瓶颈期：产品开发需求是小菜一碟，没有新鲜的可以挑战的东西；代码开发中的稀奇的解题方法都已经尝试过。没有了可挑战的难题，失去了探索的激情，也就没有了再上升的动力，好不容易走过”入室”级别的人又会有八九成止步于此。或转做技术领导人，或转到其它的领域，或换公司。

这些人的上升之路在哪里呢？

这个阶段单单依靠技巧和数量的累积已经没有什么效果了，突破之路在第5层《化蝶》里会详细说明，我建议你在这个阶段末尾着重关注编程理论：面向对象/过程、代码组织形式、编译、代码规范、其它的框架设计等等。

我建议这个级别的工程师做一做webeditor控件，不要求完整功能，但是该控件里的模块划分、代码组织、编程思想做到位，给出一个系统的解决方案。

五.【化蝶】

破茧重生，这个层次关注的是编程语言本身，而不再关心产品需求。什么是茧？产品需求就是茧。当你一招胜万招，打遍天下需求之时，你如果还拘泥于需求开发，那就是你限于茧中而不自知。要么就在这个茧里默默地老去，要么就破开茧获得新生。

还是以那个”字符串剪裁”的老例子：

<pre class="sycode" name="code">  1: /** 

  2: * 在拼接正则表达式字符串时，消除原字符串中特殊字符对正则表达式的干扰

  3: * @author:meizz

  4: * @version: 2010/12/16

  5: * @param               {string}        str     被正则表达式字符串保护编码的字符串

  6: * @return              {string}                被保护处理过后的字符串

  7: */

  8: function escapereg(str) {

  9:         return str.replace(new regexp("([.*+?^=!:\x24{}()|[\\]\/\\\\])", "g"), "\\\x241");

 10: }

 11:  

 12: /** 

 13: * 删除url字符串中指定的 query

 14: * @author:meizz

 15: * @version:2010/12/16

 16: * @param               {string}        url     url字符串

 17: * @param               {string}        key     被删除的query名

 18: * @return              {string}                被删除指定 query 后的url字符串

 19: */

 20:  

 21: function delurlquery(url, key) {

 22:         key = escapereg(key);

 23:         var reg = new regexp("((\\?)("+ key +"=[^&]*&)+(?!"+ key +

 24:   "=))|(((\\?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");

 25:         return url.replace(reg, "\x241")

 26: }

 27: // 应用实例

 28: var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0

 29: delurlquery(str, "pn");

这段代码相对于层次4《入微》有什么区别吗？从代码实现上来说没有太大的区别，但是从思路上来说却有着本质的区别：1、不再是就事论事，头疼医头，而是把一类问题抽象理论化，一招破万招；2、有封装的概念，不再是每次从零开始，而是站在半山腰开始爬。

在web前端研发队伍里也有很大一部分人《入室》层次时就自我感觉良好，直接跨跃到《化蝶》，积累自己的代码库，抽象化问题。但没有基础，缺少强大的后劲，即使能够破茧也经受不了风吹雨打。一份不成熟的架构设计对团队开发带来的危害远大于它带来的好处，这种例子在业界屡见不鲜。不要拔苗助长，不要不会走就想着跑，夯实基础，水到渠成地成长，厚积薄发，强力地破茧而出。

进阶之路

你已经从原始积累，到厚积薄发，到破茧而出之后，你所关注的应该不再是一招一式、一个项目、一个模块，而应该是一种思路，一种理论。你可以做以下几个步骤以突破到更高层次：再仔细看几遍html/css/javascript接口帮助文档；选择一门强语言（c++/c#/java等）观察理解这些语言的组织结构，语言设计；看看原型链，链式语法编程，泛型，接口编程，dom遥控器等等；仔细阅读成熟的web前端开发框架的设计文档，看他们为什么要这样设计。

六.【大侠】

这里所说的大侠，不是大家互相吹捧的”大侠”，而是实至名归的高手。这个级别的人完全有能力写出不差于bindows/jquery/ext/yui/dojo的同等级别规模的前端开发框架。应用成熟的开发框架指导、解决问题。

<pre class="sycode" name="code">  1: // 库文件 /mz/string/escapereg.js

  2: /** 

  3: * 在拼接正则表达式字符串时，消除原字符串中特殊字符对正则表达式的干扰

  4: * @author:meizz

  5: * @version: 2010/12/16

  6: * @param               {string}        str     被正则表达式字符串保护编码的字符串

  7: * @return              {string}                被保护处理过后的字符串

  8: */

  9: mz.string.escapereg = function (str) {

 10:         return str.replace(new regexp("([.*+?^=!:\x24{}()|[\\]\/\\\\])", "g"), "\\\x241");

 11: }

 12:  

 13: // 库文件 /mz/url/delquery.js

 14: /// include mz.string.escapereg;

 15: /** 

 16: * 删除url字符串中指定的 query

 17: * @author:meizz

 18: * @version:2010/12/16

 19: * @param               {string}        url     url字符串

 20: * @param               {string}        key     被删除的query名

 21: * @return              {string}                被删除指定 query 后的url字符串

 22: */

 23: mz.url.delquery = function (url, key) {

 24:         key = mz.string.escapereg(key);

 25:         var reg = new regexp("((\\?)("+ key +"=[^&]*&)+(?!"+ key +

 26:   "=))|(((\\?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");

 27:         return url.replace(reg, "\x241")

 28: }

 29:  

 30: // 应用实例

 31: /// include mz.url.delquery;

 32: var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0

 33: mz.url.delquery(str, "pn");

 

自成体系，有基础，也有理论高度。知道为什么这样设计，也知道什么样的设计最好。比如这个例子可以有这样的封装：

<pre class="sycode" name="code">  1: // 库文件 /mz/url/delquery.js

  2: /// include mz.string.escapereg;

  3: /** 

  4: * 删除url字符串中指定的 query

  5: * @author:meizz

  6: * @version:2010/12/16

  7: * @param               {string}        url     url字符串

  8: * @param               {string}        key     被删除的query名

  9: * @return              {string}                被删除指定 query 后的url字符串

 10: */

 11: string.prototype.delquery = function ( key) {

 12:         key = mz.string.escapereg(key);

 13:         var reg = new regexp("((\\?)("+ key +"=[^&]*&)+(?!"+ key +

 14:   "=))|(((\\?|&)"+ key +"=[^&]*)+$)|(&"+ key +"=[^&]*)", "g");

 15:         return this.replace(reg, "\x241")

 16: }

 17:  

 18: // 应用实例

 19: /// include mz.url.delquery;

 20: var str = "http://www.xxx.com/?pn=0";   // 删除指定字符 pn=0

 21: str.delquery("pn");

而为什么不采用下面的那种封装呢？经过了《知微》和《化蝶》你就懂了。

进阶出路

道法自然，从根上去寻找突破的契机。你可以研读html解析引擎设计与实现，js解析引擎设计与实现，其它语言的代码解析与编译实现等等。
或者出些书。低级别的人写的书要么是一大抄，空无一物；要么是害人。

七.【宗师】

这个级别的人已然到了无招胜有招的境界。项目开发中的难题？没有难题！运行平台的差异？从根本上搞定！代码规范、开发模式，早已经被抛在身后。这个级别的人已经不再关注于某个前端开发框架，而是应对具体的环境给出最佳的理论指导。

这个级别的人所注意的应该是以最合理的系统架构引领着整个团队的进步，在什么样的场景下该用什么样的架构设计。3个、10个、50个、100个人的团队最应该用哪种模式？等你到了宗师级别，你再来回答吧。

进阶出路

每一个宗师就是一个高山，就是一个领域里的神，但是你仅满足于在一群比你弱的群体展现你的强大吗？如果还你是止步原地，那总会有人乘着飞机、宇宙飞船从你的头领掠过，高处不胜寒！

To break through this field, you must jump out of this field. If you want to break through the master level of web front-end research and development, then jump out of the web front-end, there is also web development on top. Even if you are a master of web front-end, but without fast data response, high-speed network architecture, and beautiful system support, what can you do? So the way to breakthrough is to focus on the entire web development chain.

8. [Ascension]

In fact, strictly speaking, ascension is no longer within the scope of the original field. In the field of web R&D, there is a nice title for this level: architect. Of course, those "pseudo-architects" are another matter.

One method can lead to all methods. In other technical fields, the levels can also be divided according to "Getting Started", "Entering the Hall", "Entering the House", "Entering the Micro", "Butterfly", "Hero" and "Grandmaster"; similarly, you can also divide the levels according to what I have written here. [Road to Advancement] to improve quickly.

Congratulations on your new glory!

Reprinted from: http://www.rjboy.cn/?p=1048