Specification
This is the code writing standard followed and agreed upon by the front-end development team, which is intended to improve the standardization and maintainability of the code.
Basic principles
Comply with web standards, semantic HTML, separation of structure, performance and behavior, and excellent compatibility. In terms of page performance, the code is required to be concise, clear and orderly, to reduce the server load as much as possible and ensure the fastest parsing speed.
general specification
1. Ignore (Omit) protocol: such as background: url(http://www.google.com/images/example); You should write background: url(//www.google.com/images/example); to facilitate http Switch with https protocol unless a certain protocol must be used
2. Use IDE to achieve clear-cut indentation when writing. The tab key is replaced with four spaces.
Because the editing tools of different systems interpret tabs differently, the tab key under Windows occupies four spaces, while under Linux it occupies eight spaces (unless you set the tab key occupancy yourself. position length).
For example, sublime text, you can set the tab key in this tool.
3. Use lowercase for label attributes
4. Do not leave any spaces at the end to prevent diff
5. Use UTF-8 (no BOM) and add <meta charset="utf-8″> to the document.
6. Use lowercase ".js" for file naming, and recommend "-" instead of "_"
7.TODO(contact) and TODO: action item, do not use @@
HTML refinement specification
1. Specifications for using html5 <!DOCTYPE html>
2. The default format of the <img> tag: <img src="xxx.png" alt="default text" /> to avoid the src="" problem
3. Default format of <a> tag: <a href="###" title="Link name">xxx</> Note: target="_blank" is determined according to needs
4. The <a> tag reserves link placeholders using ###, see: a tag placeholder problem
5. When writing the link address, you must avoid redirection, for example: href="http://itaolun.com/", that is, you must add "/" after the URL address.
6. All tags need to be closed in compliance with XHTML standards
7. Always use the same writing form of the slash at the end of the tag: <br /> <hr /> Pay attention to the space between
8. Avoid using outdated tags, such as: <b> <u> <i> and replace them with <strong> <em> etc.
9. Use data-xxx to add custom data, such as: <input data-xxx="yyy"/>
10. Avoid using style="xxx:xxx;" special symbols in inline style sheets and use reference HTML symbol entities
11. Labels must be added to descriptive form elements (input, textarea), such as <p>Name: <input type="text" id="name" name="name" /></p> must be written as: < p><label for=”name”>Name: </label><input type=”text” id=”name” /></p>
CSS refinement specification
1. Add ";" after each style attribute
Convenient compression tool "sentence segmentation".
2. Class naming, use "-" [minus sign connector] to separate the letters in the class:
Separating with "-" is more clear than using camel case.
Product line-product-module-sub-module, you can also use this method when naming
ID: CamelCase nomenclature such as:
firstName topBoxList footerCopyright
3. For the use of spaces, the following rules apply:
.hotel-content {
font-weight: bold;
} There must be a space before the selector and {. The attribute name must have a space after: The attribute name must have a space after: One reason for adding spaces before (forbidden) is aesthetics. Secondly, there is a bug in IE 6. Poke the bug.
4. (Recommended) The writing order of attributes, for example:
.hotel-content {
/* position*/
display: block;
position: absolute;
left: 0;
top: 0;
/* Box model */
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid black;
/ *other* /
color: #efefef;
}Related to positioning, common ones include: display position left top float, etc. Box model related, common ones include: width, height, margin, padding, border, and other attributes.
Writing in this order can improve the browser's performance in rendering DOM. For example, if the width and height of a picture on a web page are not set, before the picture is loaded, the space it occupies is 0, but after it is loaded, , the space of 0 is suddenly stretched open, which will cause the elements below it to be rearranged and rendered, causing repaint and reflow. When we write CSS, we put the positioning of elements first. First, we let the browser know whether the element is inside or outside the text flow, and where it is on the page. Then we let the browser know their width, height, border, etc. These attributes that take up space and other attributes are rendered within this fixed area. That’s pretty much what it means~
Recommended articles:
Poll Results: How do you order your CSS properties?
http://www.mozilla.org/css/base/content.css
5. (Recommended) When writing styles for a specific HTML structure, use element name + class name
/* All navs are written for ul*/
ul.nav {
...
} ".a div" and ".a div.b", why is the latter better? If the needs change and an extra div is added under ".a", will the initial style affect the subsequent divs~
6. (Not recommended) Use filter in ie, (Prohibited) use expression
The main issue here is efficiency. You should pay special attention to it and use less things that burn the CPU~
7. CSS comments are represented by "/* */". When commenting on a single line, the annotated object and the preceding and following comment characters each retain a space and occupy a separate line; when commenting on multiple lines, the starting comment character and the ending comment character each occupy one line. For example:
/* Comment CSS */
/*
table {
border-collapse: collapse;
}
*/JS refinement specification
1. Line break
Each line of code should be less than 120 characters. If it is more than this number, you can consider a new line. Operators such as "." or "+" should be placed at the end of the line. The code after the new line must be indented one more level before the new line. .
If the parameters in a function or method are long, they should be divided appropriately.
Line breaks between the return keyword and the expression to be returned are prohibited. For example:
// What is actually returned is undefined, not 1
function test() {
return
1;
} 2. Lines of code
It is forbidden to write multiple short statements in one line, that is, only write one statement in one line.
Statements such as if, for, do, while, switch, case, default, break, and continue occupy their own line.
All loop bodies and execution statements of judgment bodies such as if, for, do, while, etc. need to be enclosed in "{}", and curly braces are not allowed to be omitted. For example:
// Wrong if (i < 5) i += 1;
// Correct if (i < 5) {
i += 1
} 3. Alignment <br />The delimiter {} of the code block, "{" follows the previous line and is separated by a space in front, "}" should occupy an exclusive line and be located in the same column, while being left-aligned with the statements that refer to them.
The above indentation method must be used at the beginning of the function body, the definition of the class, and the programs in if, for, do, while, switch, and case statements.
4. Space
There must be a space after the keyword to highlight the keyword.
There cannot be spaces between function names, method names and the left bracket "(", for example:
// Wrong function getInfo () {
// code
}
// Correct function getInfo() {
// code
}When declaring a function expression, no space can be left between function and the left bracket "(", for example:
// Wrong var user = function () {
// code
}
// Correct var user = function() {
// code
} Add a space after the comma.
Assignment operators, comparison operators, arithmetic operators, logical operators, bit field operators, such as "=", "+=" ">=", "<=", "+", "*", "%" ", "&&", "||" and other binary operators should be preceded and followed by spaces.
There are no spaces before and after unary operators such as "!", "~", "++", "--", and "&" (address operator).
There are no spaces before and after "." and "[]".
5. Blank line
Add a blank line after each class declaration and at the end of each function definition.
Within a function body, logically closely related statements should not be separated by blank lines, and other places should be separated by blank lines.
6. Use strict conditional operators. Use === instead of == and !== instead of !=
7. Avoid extra commas. For example: var arr = [1,2,3,]
8. Statements must all end with a semicolon, except for, function, if, switch, try, and while.
9. Place the left curly brace at the end of the line and the right curly brace at the beginning of the line.
10. It is not recommended to use new to construct the following types of objects: new Number, new String, new Boolean, new Object (replace with {}), new Array (replace with []).
11. There needs to be a space after the "," between array members.
12. It is forbidden to use javascript reserved keyword naming in js/json, which may easily cause errors in IE. Keywords (break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while , with), keywords (abstract, boolean, byte, char, class, con st, debugger, double, enum, export, extends, fimal, float, goto, implements, import, int, interface, long, mative, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile).
13. It is recommended to use "+" as the newline connector instead of "".
14. Prompt information is prohibited from using general language descriptions. It should be concise and clear. When seeing the information, you can immediately locate the error. For example, when prompting user information to report an error, use "This user does not exist" instead of "The data returned by the background is incorrect", " Network timeout".