Web front-end development engineer programming ability growth path

If you are just entering the Web front-end research and development field, want to try this pond water how deep, read this article;
If you are doing a two or three-year web product front-end research and development, confused to find ways to improve, read this article;
If you are the front-end development experts in the 45, no problem can be rare to live your lonely master, to see this article it;

Web front-end research and development engineer, in the country is a Chaoyang career, since 07-08 years formally has this profession, but also only three or four years of time. There is no formal education in this field, there is no theoretical guide to the internal system, and almost all the people who are engaged in this profession are self-taught by themselves. Self-taught, a hard bumpy road, I also walked all the way. Since 2002, contact web front-end research and development has been 9 years, and now look back, during the many detours. Push already and people, if can let those who later take a few detours, symplectic very very!

"Preface"

The so-called genius, is just faster than ordinary people to master the skills, to complete the work, as long as you find the right direction, and supplemented by enough time, you can set foot on the other side of success.

This article divides the Web front-end development programming ability to divide eight levels, each level has enumerated the corresponding characteristic and the broken level promotion method, hoped each person looks at this article the classmate first accurate localization own level (does not take your current ability the highest point, but with your current ability the mid-range and the grade compares, lest many detours), The method of the reference breakthrough is broken.

The so-called level is just an attitude when you are faced with a need: to be able to complete, to be completed perfectly, to be completed more than expected. The pursuit of a perfect attitude to a solid programming skills, that is your programming level.

Remember impatient air dry, level enough, that level of things naturally understand. Understanding is the understanding, not understanding also does not matter, quiet heart to, put time just.

I. "Getting Started"

able to solve some of the problem levels. There are certain foundations (such as the most common HTML tags and their properties, events, methods, the most common CSS properties, basic JavaScript programming capabilities), and the ability to accomplish some simple web front-end research and development needs.

For example, delete a character specified in a string.

var str= "Www.baidu.com/?page";
Str=str.replace ('? Page ', "");
alert (str);
Str=str.substring (0,str.indexof ("/"));
alert (str);

First of all, do not criticize the code of the right and wrong rigorous, after all, each programmer has such a process; second, these two pieces of code in this instance there is no big fault, there may be flaws, but can solve the problem (delete the specified character), this is the level of characteristics.

Let me give you an example:

The computing system is currently the day of the week
var str = "";
var week = new Date (). GetDay ();
if (week = = 0) {
str = "Today is Sunday";
} else if (week = = 1) {
str = "Today is Monday";
} else if (week = = 2) {
str = "Today is Tuesday";
} else if (week = = 3) {
str = "Today is Wednesday";
} else if (week = = 4) {
str = "Today is Thursday";
} else if (week = = 5) {
str = "Today is Friday";
} else if (week = = 6) {
str = "Today is Saturday";
}
or something better.
var str1 = "Today is the Week";
var week = new Date (). GetDay ();
Switch (week) {
Case 0:
STR1 + = "Day";
Break
Case 1:
STR1 + = "one";
Break
Case 2:
STR1 + = "two";
Break
Case 3:
STR1 + = "three";
Break
Case 4:
STR1 + = "four";
Break
Case 5:
STR1 + = "Five";
Break
Case 6:
STR1 + = "Six";
Break
}
alert (str);
alert (STR1);

The Getting Started stage is the only way for every programmer to get started and you're on the road. The so-called "teacher leads the door, the practice relies on individual", with this "primer" foundation, oneself can grope forward.

"The way of Advanced"

Read through each of the methods/properties in the coding help manuals such as JavaScript, HTML, CSS, and more! Only the foundation will be played well, the future road can go smoothly. Refer to these help documents and try to write a flawless code.

These coding documents are recommended not only in the beginning of the improvement period, you should look at each stage of the break, the most basic things are often the most power, and sometimes can bring you unexpected gains.

two. "Boarding Hall"

be able to solve the problem correctly. Whether you are searching the Web, or by transforming some of the finished code (JQUERY/DOJO/EXT/YUI) cases, you can complete the requirements without errors.

Also take the "string clipping" code above as an example:

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

Just solving the problem is no longer a problem for the "Don" stage, and the solution given at this level cannot be flawed. Take this code example: the first parameter of the Replace method can support a string, but the best type is a regular expression;

var a = new Array ("Day", "one", "two", "three", "four", "five", "six");
var week = new Date (). GetDay ();
var str = "Today is the Week" + A[week];
alert (str);

Compared to the "entry-level" code, whether it is from the code, code efficiency, code elegance, code thinking, "Hall" level of this date processing code is much better.

"The way of Advanced"

Although this stage can give the correct solution, but not necessarily the best solution. How can we get the best solution? The first is to accumulate a variety of solutions that can solve the requirements, and then validate each scenario to choose the best one in these scenarios. Therefore, the stage of the advanced Road is "traveling thousands of miles, read the book", the accumulation of various requirements of the various solutions.

You can go through all the FAQs and posts in the Professional forum (blue ideal, hassle-free, CSDN), and you can open the search engine and make all the search results exhaustive. Build your own test environment to validate the code: try to figure out the intent of each piece of code to compare the differences between each piece of code. These two roads will allow you to quickly complete the primitive accumulation, and when you face most of the requirements to be able to say these questions I have done before, then you will be in the right order.

three. "Break-ins"

the strongest code, knowing all the solutions that can solve the requirements, can choose to use the best solution to meet the requirements. This level is basically the code main in product development programming. Given the one-trick, strokes are the trick.

In the example above, can you tell the difference between 1, 2, 3, and apply to that environment?

var str= "Www.baidu.com/?page";
1. String clipping
Str.substring (0, Str.indexof ("? page"));
2. Regular expressions
Str.replace (/?page/, "");
3. String splitting and merging
Str.split ("? Page"). Join ("");

There are many ways to solve problems, but for programmers, you should choose the best. The above code "regular expression" is the best in terms of code, from the Efficiency of code execution: "String clipping" the highest ("regular expression" in chrome is the most efficient), split method The most, and from the extensibility, the "regular expression" method is optimal. The specific use of that option depends on the specific requirements environment.

During the "break-in" phase, the programmer should be able to answer with certainty: My Code is the best code for this requirement.

"Today is the day of the week" for example, "Hall" level of code you dare to say is the best code?

The computing system is currently the day of the week
var str = "Today is the Week" + "Day 123456". CharAt (new Date (). GetDay ());

Compare the "Hall" level of the sample code, above this code to give you how to feel? What programmers are after is perfection. The "break-in" level pursues the perfection of every trick.

From the Web front-end programming, through 2 years of effort, many people can achieve this level, but a large part of the people's programming ability also stopped here. or limited to the demand of the product, or limited to the urgency of the time required for development, or limited to human inertia, can perfectly solve the current demand is enough.

Due to the long-term technical platform period, the technical improvement, usually this level of engineers will be relatively dry. A little technical, or the pursuit of personal breakthroughs, or the pursuit of product differentiation to bring freshness, or just want to change the mood, so many of this level of engineers will often change the company.

Rashness

Do not think you can write a beautiful code and complacent;
Do not think that others "honorific" you a "hero" you will be "heroes";
Don't think that you have accumulated some of the proud code has become a framework development.

The details determine success or failure, and good solutions do not guarantee eventual success. Also take "delete specified string" as an example, the original string from the format should be a URL link, after the removal of "pn=0", the end of the left a tail "?" If the original string is "Http://www.xxx.com/?pn=0&a=1", after removing "pn=0"? and & two symbols close together, this is more obvious bug.

"The way of Advanced"

This stage of the Advanced Road is: Do not impatient air , you are no longer required to take the lead, but you take the demand to go. Pay attention to the details and note the details that are not in the current requirements: differences in code performance, differences in running platforms (browsers), implicit expansion of requirements, backward compatibility of code, and so on.

Read through the Html/css/javascript help document a few more times.

I recommend this level of engineer to do a Webtreeview control, requires the total node volume of 10,000 or so smooth operation, your promotion is in the process of encoding this control.

four. "Attentive"

the most powerful solution. you can walk in front of the demand, the current needs of some, not directly mentioned, now temporarily no but possible in the future and so on, and the front-end programming unspoken rules and other aspects of the comprehensive consideration, give the best program. Take a recruit to win million strokes.

var str = "Http://www.xxx.com/?pn=0"; Deletes the specified character pn=0
I'll enumerate all the things that might come to mind in this string.
var a = [
"Http://www.xxx.com/VMpn=?pn=0"//pn= may appear in? Ago
, the "http://www.xxx.com/VMpn=?pn="//URL allows the PN value to be empty
, there can be multiple fields in the "http://www.xxx.com/VMpn=?pn=0&a=1"//URL
, "http://www.xxx.com/VMpn=?a=1&pn=0"//may be in the last
, "http://www.xxx.com/VMpn=?a=1&pn=0&pn=1"//may have multiple PN fields
, "http://www.xxx.com/VMpn=?a=1&pn=0&b=2"//may be in the middle
, "http://www.xxx.com/VMpn=?a=1&pn=0&pn=1&b=1"//may be in the middle of a group
, "http://www.xxx.com/VMpn=?a=1&pn=0&b=1&pn=1"//possible sporadic distribution
];
/* The unspoken need for a demand:
? If it appears at the end of the string.
? & Two symbols not overlapping
*/
var reg =/((\?) (pn=[^&]*&) + (?! pn=)) | (((\?| &) pn=[^&]*) +$) | (&pn=[^&]*)/g;

for (var i = 0; i < a.length; i++) {
Alert (A[i] + "\ n" + a[i].replace (Reg, "$"));
}

This stage is no longer the pursuit of a recruit, not for you to use any innovative trick to solve the demand, but to give a mature and stable solution, from the root of the problem. Your code may not be optimal for a current requirement, but your code is the best code for this type of requirement.

"The way of Advanced"

Many web front-end development engineers have been in a bottleneck for 3-4 years: Product development needs are a piece of cake, there is nothing new to challenge, and the bizarre methods of solving code development have been tried. There is no challenge, lost the passion of exploration, there is no further upward momentum, and finally through the "break-in" level of the people will be eight or nine stop here. or turn to a technical leader, or go to another area, or change a company.

Where is the rise of these people?

This phase alone depends on the skill and quantity accumulation has no effect, the breakthrough road in the 5th layer of "Butterfly" will be detailed, I suggest you at this stage focus on programming Theory: Object-oriented/process, code organization, compilation, code specification, other framework design and so on.

I recommend this level of engineers do a webeditor control, do not require full functionality, but the control of the module Division, Code organization, programming ideas to do in place, give a system solution.

five. "Butterfly"

Rebirth of the cocoon, this level of concern is the programming language itself, and no longer care about product requirements. What is a cocoon? Product demand is cocoon. When you are a recruit to win all the world's needs, if you still adhere to the needs of development, it is you are confined to the cocoon and not know. Either in this cocoon silently old, or break open cocoon to get a new life.

Or the old example of a "string clipping":

/**
* Eliminates the interference of special characters in the original string with regular expressions when stitching regular expression strings
* @author: Meizz
* @version: 2010/12/16
* @param {string} str protected encoded string by regular expression string
* @return String {string} is protected after processing
*/
function Escapereg (str) {
Return Str.replace (New RegExp ("([. *+?^=!:\ x24{} () | [\\]\/\\\\]) "," G ")," \\\x241 ");
}

/**
* Delete the specified Query in the URL string
* @author: Meizz
* @version: 2010/12/16
* @param {string} URL URL string
* @param {String} key is deleted by the query name
* @return {string} The URL string after the specified query is deleted
*/

function delurlquery (URL, key) {
Key = Escapereg (key);
var reg = new RegExp ("(\ \?) ("+ key +" =[^&]*&) + (?! ") + key +
"=))| (((\\?| &) "+ key +" =[^&]*) +$) | (& "+ key +" =[^&]*) "," G ");
Return Url.replace (Reg, "\x241")
}

Application examples
var str = "Http://www.xxx.com/?pn=0"; Deletes the specified character pn=0
Delurlquery (str, "PN");

What is the difference between this code and the level 4 "nuanced"? From the implementation of the code is not too big difference, but from the thinking of the essence of the difference: 1, is no longer the case, headache medical head, but to the abstract theory of a class of questions, a recruit broken million strokes; 2, there is the concept of encapsulation, not every time from scratch, but stand halfway up the hill to start crawling.

In the Web front-end research and development team also has a large part of the "break-in" at the level of self-feeling good, jump directly to the "butterfly", accumulate their own code base, abstract problems. But there is no foundation, lack of strong stamina, even can break the cocoon can not withstand the wind and rain. An immature architecture design is more harmful to team development than the benefits it brings, an example that is common in the industry. Do not destructive enthusiasm, do not want to walk on the thought of running, tamping the foundation, the inevitable growth, thick thin hair, strong to break the cocoon and out.

"The way of Advanced"

You have been from the primitive accumulation, to the thick thin hair, to break the cocoon and out, you should not be concerned about a recruit, a project, a module, but should be a way of thinking, a theory. There are several steps you can take to break through to a higher level: Look again at the Html/css/javascript interface Help documentation, select a strong language (C++/c#/java, etc.) to observe the organizational structure of these languages, language design; Look at the prototype chain, chained grammar programming, generics, Interface programming, DOM remote control, etc. carefully read the design documentation for the mature web front-end development framework to see why they are designed like this.

six. "Heroes"

Here is the hero, not everyone touts the "warrior", but the best-deserved master. This level of people is fully capable of writing the same level of front-end development framework that is not inferior to Bindows/jquery/ext/yui/dojo. apply mature development framework to guide and solve problems.

Library Files/mz/string/escapereg.js
/**
* Eliminates the interference of special characters in the original string with regular expressions when stitching regular expression strings
* @author: Meizz
* @version: 2010/12/16
* @param {string} str protected encoded string by regular expression string
* @return String {string} is protected after processing
*/
Mz.string.escapeReg = function (str) {
Return Str.replace (New RegExp ("([. *+?^=!:\ x24{} () | [\\]\/\\\\]) "," G ")," \\\x241 ");
}

Library Files/mz/url/delquery.js
Include Mz.string.escapeReg;
/**
* Delete the specified Query in the URL string
* @author: Meizz
* @version: 2010/12/16
* @param {string} URL URL string
* @param {String} key is deleted by the query name
* @return {string} The URL string after the specified query is deleted
*/
mz.url.delQuery = function (URL, key) {
Key = Mz.string.escapeReg (key);
var reg = new RegExp ("(\ \?) ("+ key +" =[^&]*&) + (?! ") + key +
"=))| (((\\?| &) "+ key +" =[^&]*) +$) | (& "+ key +" =[^&]*) "," G ");
Return Url.replace (Reg, "\x241")
}

Application examples
Include Mz.url.delQuery;
var str = "Http://www.xxx.com/?pn=0"; Deletes the specified character pn=0
Mz.url.delQuery (str, "PN");

Self-made system, has the foundation, also has the theory height. Know why this design, also know what kind of design best. For example, this example can have this encapsulation:

Library Files/mz/url/delquery.js
Include Mz.string.escapeReg;
/**
* Delete the specified Query in the URL string
* @author: Meizz
* @version: 2010/12/16
* @param {string} URL URL string
* @param {String} key is deleted by the query name
* @return {string} The URL string after the specified query is deleted
*/
String.prototype.delQuery = function (key) {
Key = Mz.string.escapeReg (key);
var reg = new RegExp ("(\ \?) ("+ key +" =[^&]*&) + (?! ") + key +
"=))| (((\\?| &) "+ key +" =[^&]*) +$) | (& "+ key +" =[^&]*) "," G ");
Return This.replace (Reg, "\x241")
}

Application examples
Include Mz.url.delQuery;
var str = "Http://www.xxx.com/?pn=0"; Deletes the specified character pn=0
Str.delquery ("PN");

And why not use the following package? After the "Micro" and "butterfly" you will understand.

"Advanced Way Out"

Tao Nature, from the root to find a breakthrough opportunity. You can study HTML parsing engine design and implementation, JS parsing engine design and implementation, other language code parsing and compilation implementation, and so on.

or a few books. A book written by a low-level person is either a large copy, empty or harmful.

seven. "Guru"

This level of people has been to the realm of no recruit wins. Problems in project development? No puzzles! What are the differences between running platforms? Fundamentally done! Code specifications, development patterns, have long been left behind. This level of people is no longer focused on a front-end development framework, but rather to provide the best theoretical guidance for the specific environment.

This level of attention should be based on the most reasonable system architecture to guide the progress of the whole team, in what scenarios should be used in what kind of architecture design. What is the best model for 3, 10, 50, and 100-person teams? When you arrive at the guru level, you can answer it again.

"Advanced Way Out"

Every Guru is a mountain, a god in a field, but are you content to show your strength in a group that is weaker than you? If you are still on the ground, there will always be someone on the plane, spaceship from your leader across, high place cold!

To break through this field, you have to jump out of this field. To break through the guru of Web front-end development, jump out of the Web front end, with web development on it. Even if you are the guru of the Web front, but there is no fast data response, no high-speed network architecture, no graceful system support, what can you do? So the breakthrough is to focus on the whole web development chain.

eight. "Soaring"

In fact, strictly speaking, soaring is not the scope of the original field. In the field of web research and development, there is a very nice appellation for this level: architect. Of course, those "pseudo-architects" are another matter.

One FA Tong, Lawspirit Tong. In other areas of technology, can also be in accordance with the "entry" "Entrance" "The Room" "The" "The Butterfly" "Hero" "guru" to classify the rank; You can also follow the "Advanced path" of each level as I write here to quickly ascend.

Congratulations on your success!

Jiang June Li
2017/01/30

Original link: http://hszy00232.blog.163.com/blog/static/430227532011119105237357/

Web front-end development engineer programming ability growth path