Good front-end code standard

Beginning to learn the front-end, encountered any problems, from the online search data, resolved on the pass, but the heart is still relatively flaky, because does not meet the style of the school. At least you have to know what the front-end principle is, and what is the standard of a good front-end code to evaluate your own code.

Recently finally took time to look at the book about JS, finally the heart has a little bottom.

I. Separation of levels

The front-end is divided into three layers: the structure layer, the presentation layer, the behavior layer, the three are corresponding to the HTML, CSS, JS. The basic status quo is:

1. HTML can be embedded in CSS and JS

2. css and JS function overlap place

The so-called level separation is not to confuse their main functions, in the narrow sense is the HTML definition structure, CSS definition style, JS definition behavior. The benefit of hierarchical separation is that it facilitates maintenance.

Second, smooth degradation (in fact, with gradual enhancement of a meaning)

Because the browser is different, the browser settings are different, we write the code even if it does not support all cases, there should be "exception handling", such as to support IE, to tolerate the setting does not support JS. When using a browser that does not support JS, it can also correctly render the content as expected, and it will be degraded smoothly. The status quo is:

1. IE is very annoying, it always has its own set of special solutions, resulting in many cases in order to support IE, more than one-fold thinking workload

2. Different versions of the browser to the level of JS support is not the same, resulting in the need to determine whether or not to support JS specific features

Individuals now feel that a smooth degradation is not necessary, because the general use of advanced browsers, but the book is always a special emphasis on the smooth degradation. Maybe I read less and have a light.

Third, the details of the problem

Such as performance: Need to import the JS script needs compression processing, JS script insertion location, the script is divided into multiple files or written in a file and so on.

Also talk about the good code standard in the general sense.

1. Don ' t Repeat yourself (DRY) principle.

Even if it's just a long variable or "." Concatenating, also defined as a new simple and easy to understand variable, convenient and not prone to error.

2. Notes

Add comments when adding comments, or it will take longer to look later.

3. Abstraction

The hard-coded code in the first implementation of the function is changed to a variable representation, and the versatility is much higher.

4. Input inspection and anomaly detection

Here comes the question of safety and friendliness.

Even if you can't do it all, it's necessary to have these ideas in code.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Good front-end code standard