The path for Web Front-end R & D engineers to develop their programming capabilities

ArticleDirectory

• Advanced Path
• Advanced Path
• Advanced Path
• Advanced Path
• Advanced Path
• Advanced way out
• Advanced way out

[Preface]

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

This article divides Web Front-end R & D programming capabilities into eight levels, each of which lists the corresponding features and the method for improving the level through breaking, I hope that everyone who is reading this article will first accurately locate their level (instead of comparing your current level with the level of your current level, so as to avoid detours ), refer to the breakthrough method.

The so-called level is just an attitude towards your needs: being able to complete, be able to complete perfectly, and be able to complete beyond expectation. A solid programming skill with a perfect attitude is your programming level.
Remember to be confused. The level is enough. Then, you can understand what is in that level. If you are enlightened, you will be enlightened. If you are not enlightened, you can just calm down and put in time.

1. [Getting Started]

Can solve some problems. Have a certain degree of Foundation (such as the most common HTML tags and their attributes, events, methods, the most common CSS attributes, and basic JavaScript programming capabilities ), able to meet some simple Web Front-end R & D requirements.

For example, delete a character specified in a string.

VaRSTR = "www.baidu.com /? Page"; Str= Str. Replace ('? Page ',""); Alert (STR); Str= Str. substring (0, str. indexof ("/"); Alert (STR );
 

Do not be harsh firstCodeRight or wrong, after all, everyProgramPersonnel have such a process. Second, the two pieces of code have no major faults in this instance and may be defective, but it can solve the problem (delete the specified characters ), this is the feature of this level.

Another example:

 //  The current computing system is 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 better  VaR Str1 = "Today is the week" ;  VaR Week = New  Date (). getday ();  Switch  (Week ){  Case 0 : Str1 + = "Day" ;  Break  ;  Case 1: Str1 + = "1" ;  Break  ;  Case 2 : Str1 + = "2" ;  Break  ;  Case 3 : Str1 + = "3" ;  Break  ; Case 4 : Str1 + = "4" ;  Break  ;  Case 5 : Str1 + = "5" ;  Break  ;  Case 6 : Str1 + = "6" ; Break  ;} Alert (STR); alert (str1 ); 

The entry stage is the only way for every programmer. As long as you get started, you are on the road. The so-called "Master leads the door, practice depends on individual", with the foundation of this [entry], you can find your way forward.

Advanced Path

Read every method/attribute in the help manual for coding JavaScript, HTML, CSS, and so on several times! Only by laying a good foundation can we continue smoothly in the future. Refer to these help documents to try to write flawless code.

We recommend that you not only take a look at these encoding documents during the getting-started period, but also take a look at each stage in the future. The most basic things are often the most powerful things, sometimes it can bring you unexpected gains.

2. [boarding Ceremony]

Can solve the problem correctly. Whether you search for the network or transform some finished code (jquery/dojo/EXT/Yui) cases, you can fulfill your requirements without error.

The preceding "string pruning" code is used as an example:

 
VaRSTR = "www.baidu.com /? Page"; Str= Str. Replace (/? Page /,""); Alert (STR );
 

Solving the problem is no longer a problem for the "boarding" stage. The solution provided at this level cannot be exposed. The above code is used as an example: although the first parameter of the replace method supports strings, the best type is regular expression;

VaRA =NewArray ("day", "one", "two", "three", "four", "five", "Six");VaRWeek =NewDate (). getday ();VaRSTR = "Today is the day of the week" +A [week]; alert (STR );
 

Comparing the beginner-level code, whether it is from the code volume, code efficiency, code beauty, and code ideas, this date Processing code at the boarding level should be much better.

Advanced Path

Although a correct solution can be provided at this stage, it is not necessarily the best solution. How can we get the best solution? The first is to accumulate various solutions that can solve the needs, and then verify each solution. Select the best one among these solutions. Therefore, the Advanced path of this phase is to "walk the miles and read the books", and accumulate various solutions for various needs.

You can join a Professional Forum (blue ideal, carefree, and csdn) to read all the FAQs and posts. You can open a search engine and outline all the search results. Build a test environment to verify the code one by one: to figure out the intention of each code segment and compare the differences between each code segment. These two ways allow you to quickly complete the original accumulation. When you face most of your needs, you can say that I have done these problems before, and then you can easily step up.

Iii. Entry]

The best code, know all the solutions that can solve the needs, and choose the best solution to meet the needs. This level is basically the main code in product development and programming. The trick is a trick.

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

 
VaRSTR = "www.baidu.com /? Page";//1. String pruningStr. substring (0, str. indexof ("? Page"));//2. Regular ExpressionStr. Replace (/? Page /,"");//3. Split and merge stringsStr. Split ("? Page "). Join ("");
 

There are many ways to solve the problem, but programmers should choose the best. The above code shows the best regular expressions in terms of the amount of code. for code execution efficiency, the "string pruning" method is the most efficient ("Regular Expressions" in chrome are the most efficient ), the split method is the most time; in terms of scalability, the "Regular Expression" method is the best. The specific use of this solution depends on the specific needs of the environment.

[Entry], the programmer should be able to answer with certainty: for this requirement, my code is the best code.

Let's take "Today is the day of the week" as an example. Do you dare say that the code at the level of "boarding" is the best code?

//The current computing system is day of the weekVaRSTR = "Today is the week" + "May 15, 1234". charat (NewDate (). getday ());
 

How do you feel when comparing the sample code at the boarding level? Programmers are pursuing perfection. [Entry] the pursuit of perfection is the perfection of every skill.

From the perspective of Web Front-end programming, after two years of efforts, many people can achieve this level. However, a large part of people's programming capabilities also stop here. Or limited to the singularity of product requirements, or limited to the urgency of demand development, or limited to the inertia of people, it is enough to perfectly solve the current needs.

Engineers at this level are usually dry because they have been in the technical platform for a long time and cannot be improved technically. In terms of technology, small achievements, pursuit of personal breakthroughs, or the freshness brought about by product differences, or just a new mood, many engineers at this level often change their company.

Guard against arrogance and rashness:

Do not be complacent that you can write beautiful code;

Do not think that others are "Famous" you say "hero", and you will be "hero;

Don't think you have accumulated some proud code and become a framework-based development.

The Details determine success or failure. A good solution cannot guarantee the final success. Taking "delete specified string" as an example, the original string should have a URL link in terms of format. After "Pn = 0" is removed, a tail is left at the end of The Link "? "; If the original string is" http://www.xxx.com /? Pn = 0 & A = 1 ", after removing" Pn = 0? And the two symbols closely together, which is even more obvious bug.

Advanced Path

At this stage, the road to advancement is: do not be impatient; you are not taken by demand, but by demand. Pay attention to the details, and pay attention to the details that are not given in plain text in the current requirements: Differences in code performance, differences in running platforms (browsers), implicit extension of requirements, and backward compatibility of codes.

Read the HTML, CSS, and JavaScript help documents several times.

I suggest engineers at this level make a webtreeview control and require that the total number of nodes be around 10 thousand. Your promotion path is in the coding process of this control.

4. [micro]

The strongest solution. You can consider all aspects of the current requirement, such as the existing requirements, those that have not been raised directly, but are not yet available in the future, and front-end programming rules, the optimal solution is provided. Win over ten thousand tricks.

Ar STR = "http://www.xxx.com /? Pn = 0 "; //  Delete a specified character Pn = 0  //  I will list all the situations that may come up with this string.  VaR A = [ "Http://www.xxx.com/vmpn=? Pn = 0" //  Pn = may appear in? Before , "Http://www.xxx.com/vmpn=? Pn =" //  The Pn value allowed in the URL is null. , "Http://www.xxx.com/vmpn=? Pn = 0 & A = 1" //  The URL can contain multiple fields. , "Http://www.xxx.com/vmpn=? A = 1 & Pn = 0" //  Probably at the end , "Http://www.xxx.com/vmpn=? A = 1 & Pn = 0 & Pn = 1" //  There may be 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 grouped in the middle , "Http://www.xxx.com/vmpn=? A = 1 & Pn = 0 & B = 1 & Pn = 1" //  Sporadic Distribution  ];  /*  What is the secret of demand :? If it appears at the end of the string, what should we go? & The two symbols cannot overlap  */    VaR Reg = /((\?) (Pn = [^ &] * &) + (?! Pn =) | (((\? | &) Pn = [^ &] *) + $) | (& Pn = [^ &] *)/ G;  For ( VaR I = 0; I <A. length; I ++) {Alert ( + "\ N" + A. Replace (Reg, "$2" ));} 

At this stage, you are no longer pursuing a one-stop approach. Instead of using innovative tricks to solve your needs, you are provided with a mature and stable solution to solve the problem from the root. Your code may not be optimal for a specific requirement, but your code is the best for this requirement.

Advanced Path

After 3-4 years of development, many Web Front-end R & D engineers will enter a bottleneck: the product development requirement is a piece of cake, and there is nothing new to challenge; the rare solutions in code development have been tried. Without the challenge and the passion for exploration, there will be no motivation to rise again. People who have finally passed the "entry" level will surely stop here. It can be transferred to technical leaders, other fields, or companies.

Where is the path to the rise of these people?

At this stage, the accumulation of skills and quantity alone has no effect. The Breakthrough path will be detailed in the 5th-layer [butterfly, I suggest you focus on programming theory at the end of this stage: Object-oriented/process, code organization, compilation, code specifications, and other framework designs.

I suggest that engineers at this level make a webeditor control and do not require complete functions. However, the module division, code organization, and programming ideas in this control are in place to provide a system solution.

5. [butterfly]

This level of attention isProgramming LanguageAnd no longer care about product requirements. What is cocoon? The product requirement is a problem. If you stick to demand development when you win ten thousand moves and beat the world's demands, you will be limited to nothing. Either grow old silently in this cocoon, or break through the cocoon to get new life.

Or the old example of "string pruning:

 /* ** When splicing a regular expression string, eliminate the interference caused by special characters in the original string to the regular expression * @ Author: meizz * @ version: 2010/12/16 * @ Param {string} STR is a string protected by a regular expression * @ return {string }.  */    Function  Escapereg (STR ){  Return Str. Replace ( New Regexp ("([. * +? ^ =! : \ X24 {} () | [\] \/\]) "," G ")," \\\ x241" );}  /* ** Delete the query specified in the URL string * @ Author: meizz * @ version: 2010/12/16 * @ Param {string} URL string * @ Param {string} The Name Of The query whose key is deleted * @ 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 Instance  VaR STR = "http://www.xxx.com /? Pn = 0 "; //  Delete a specified character Pn = 0 Delurlquery (STR, "PN ");

What is the difference between this code and Level 4? There are no major differences in code implementation, but there are essential differences in thinking: 1. It is no longer a case-by-case discussion, but a headache, but an abstract theory of a type of problem, 2. There is a concept of encapsulation, instead of starting from scratch, but starting from the mountainside.

A large part of the Web Front-end R & D team also feel good when entering the room. They directly jump to the [butterfly] layer, accumulate their own code libraries, and abstract problems. However, there is no foundation and a lack of strong stamina. Even if it is able to break through, it will not be able to withstand the storms. An immature architecture design brings far greater harm to team development than it brings benefits. This example is not uncommon in the industry. Do not encourage others. Don't leave without thinking about running, consolidate the foundation, and grow in a proper way.

Advanced Path

You have gone from the original accumulation to the accumulation of money. After you break out, what you are concerned with is no longer just a simple idea, a project, or a module, but a concept or a theory. You can take the following steps to break through to a higher level: Read the help documents of HTML, CSS, and JavaScript interfaces several times; select a strong language (C ++/C #/Java, etc.) to observe the organizational structure and language design of these languages; look at prototype chain, chain syntax programming, generic, interface programming, dom remote control and so on; carefully read the design documents of the mature web front-end development framework to see why they are designed like this.

6. [Hero]

The hero mentioned here is not a "hero" that everyone touches, but a real-name master. People at this level have the ability to write a front-end development framework of the same scale as bindows/jquery/EXT/Yui/dojo. Mature Application Development Framework guides and solves problems.

 //  Library File/mz/string/escapereg. js  /*  ** When splicing a regular expression string, eliminate the interference caused by special characters in the original string to the regular expression * @ Author: meizz * @ version: 2010/12/16 * @ Param {string} STR is a string protected by a regular expression * @ return {string }.  */  MZ. String. escapereg =Function  (STR ){  Return Str. Replace ( New Regexp ("([. * +? ^ =! : \ X24 {} () | [\] \/\]) "," G ")," \\\ x241" );}  //  Library File/mz/URL/delquery. js  //  /Include MZ. String. escapereg;  /* ** Delete the query specified in the URL string * @ Author: meizz * @ version: 2010/12/16 * @ Param {string} URL string * @ Param {string} The Name Of The query whose key is deleted * @ 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 Instance  //  /Include MZ. url. delquery;  VaR STR = "http://www.xxx.com /? Pn = 0 "; //  Delete a specified character Pn = 0 MZ. url. delquery (STR, "PN ");

It has its own system, foundation, and theoretical height. Know why this design is done and what kind of design is best. For example, this example can be encapsulated as follows:

 //  Library File/mz/URL/delquery. js  // /Include MZ. String. escapereg;  /*  ** Delete the query specified in the URL string * @ Author: meizz * @ version: 2010/12/16 * @ Param {string} URL string * @ Param {string} The Name Of The query whose key is deleted * @ 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 Instance  //  /Include MZ. url. delquery;  VaR STR = "http://www.xxx.com /? Pn = 0 "; //  Delete a specified character Pn = 0 Str. delquery ("PN ");

Why not use the following encapsulation? After [Zhiwei] and [butterfly], you will understand.

Advanced way out

As a matter of nature, we seek opportunities for breakthroughs from the root. You can study the HTML parsing engine design and implementation, JS parsing engine design and implementation, and code parsing and compilation implementation in other languages.

Or write some books. Low-level people can either write a large copy of the book, empty or harmful.

7. [Zong Shi]

People at this level have already reached the realm of no action to win. Problems in project development? No problem! Differences between running platforms? Basically! Code specifications and development modes have long been left behind. People at this level no longer focus on a front-end development framework, but should provide the best theoretical guidance for a specific environment.

What people at this level should note is that the most reasonable system architecture leads the progress of the entire team and what kind of architecture design should be used in what scenarios. Which of the following modes should be used for a team of 3, 10, 50, and 100 people? When you get to the master level, come back.

Advanced way out

Every Guru is a mountain and a god in a field. But are you satisfied with showing your strength in a group of weaker groups than you? If you stop at the same place, there will always be people riding planes and space vessels leading your way over!

To break through this field, you must jump out of this field. To break through front-end web development, jump out of the front-end web development. Even if you are a Web Front-end master, but do not have fast data response, no high-speed network architecture, and no beautiful system support, what can you do? Therefore, the breakthrough path is to focus on the entire web development chain.

8. [Apsara Stack]

In fact, feisheng is no longer in the original field. In the Web R & D field, there is a good title for this level: architect. Of course, those "pseudo architects" should be different.

Yi Fa Tong, Wan Fa Tong. In other technical fields, you can also classify them by entry, entry, and logon; in the same way, you can quickly improve your performance by following the advanced steps I have written here.

original article address: http://www.w3cfuns.com/thread-1052-1-1.html