Standard arrangement of front-end single code and standard arrangement of single code

Standard arrangement of front-end single code and standard arrangement of single code

Whether it is front-end or back-end code, coding standards are particularly important. Especially for large projects, standardizing the code, format, and requirements at the beginning of the activation will reduce a lot of work, it is conducive to code maintenance.

Specification of front-end single Encoding

No	Category	Verification content
1	Page Design	The list title is displayed in the center.
2	Page Design	Query the data display style of the data area: 1. may not be long Chinese, may not be long English number to the left 2. Fixed Length, fixed value data center, date, time, serial number Center 3. Amount: Right
3	Common-writing Standardization	Is there a correct comment for each file header?
4	Common-writing Standardization	Whether each function has correct comments
5	Common-writing Standardization	Is there any comment on the content of each configuration file?
6	Common-writing Standardization	Whether each logical block has comments
7	Common-writing Standardization	Are there unused variables and references?
8	Common-writing Standardization	Use tab to indent and Set tab to 4 spaces
9	HTML-writing Standardization	Label 1: 1. The tag name must contain lowercase letters, such as <p> </p>; 2. For tags that do not require auto-closing, auto-closing is not allowed, such as input, br, img, and hr; 3. Define a closed tag in HTML5. The closed tag cannot be omitted.
10	HTML-writing Standardization	Label 2: 1. Labels must comply with label nesting rules. For example, div must not be placed in p, and tbody must be placed in table. 2. The use of HTML tags should follow the syntax of tags. Common tag semantics p-paragraph H1, h2, h3, h4, h5, h6-level title Strong, em-emphasis Ins-insert Del-delete Abbr-abbreviation Code-code ID Cite-quote the title of the source file Q-Reference Blockquote-a reference with a length or length Ul-unordered list Ol-ordered list Dl, dt, dd-definition table
11	HTML-writing Standardization	Attribute: 1. the attribute name must contain lowercase letters; 2. attribute values must be enclosed by double quotation marks; 3. We recommend that you use xxx-as the prefix for custom attributes. We recommend that you use data-, for example, <ol data-ui-type = "Select"> </ol>.
12	HTML-writing Standardization	Encoding 1: 1. Use the HTML5 doctype to enable the standard mode. We recommend that you use the uppercase DOCTYPE. 2. The page must contain the title label declaration title. 3. The title must be a direct sub-element of the head, followed by the charset declaration. Example <Meta charset = "UTF-8"> <Title> page title </title> </Head>
13	HTML-writing Standardization	Encoding 2: 1. Ensure that favicon is accessible. (put the favicon. ico file in the root directory and use link to specify favicon) For example, <link rel = "shortcut icon" href = "path/to/favicon. ico">; 2. If the project is mobile or responsive, you must specify the page's viewport.
14	HTML-writing Standardization	Introduction: 1. When CSS is introduced, rel = "stylesheet" must be specified, as shown in <link rel = "stylesheet" href = "page.css">; 2. When CSS and JavaScript are introduced, you do not need to specify the type attribute (with default values ); 3. Introduce all CSS resources required by the page in the head. JavaScript should be placed at the end of the page or asynchronously loaded. (Place the script in the middle of the page to block page rendering ).
15	HTML-writing Standardization	Image: 1. Disable the empty src value of img. Add the default src for delayed loading images (blank src will cause page reloading ); 2. avoid adding unnecessary title attributes to img. (excessive titles affect the image viewing experience and increase the page size ); 3. Add the alt attribute for the important image; 4. Images with download requirements are implemented using the img tag, while images without download requirements are implemented using the CSS background image.
16	HTML-writing Standardization	Form: 1. controls with text titles must be associated with their titles using the label; 2. the type attribute value must be specified when the button element is used; 3. The order of the buttons responsible for the main functions in the DOM should depend on the previous one. (We recommend that you do so. The specific design prevails ).
17	HTML-writing Standardization	Video and audio: 1. Use the audio and video tags to define audio and video elements in HTML5-supported browsers; 2. Enable automatic playback of audio and video only when necessary; 3. the description inside the object tag indicates that the browser does not support the tag, for example, <object width = "100" height = "50" data = "something.swf"> do not support this tag </object>.
18	CSS-writing Standardization	The length of a style row cannot exceed 120 characters, unless a single row is not separated.
19	CSS-writing Standardization	Name: 1. The class and id must contain all lowercase letters and be separated by hyphens; 2. class and id must represent the content or functions of the corresponding module or component, and cannot be named by style information, such as left, right, center, red, black, or other words appear separately in the name; 3. the class must be prefixed to avoid global contamination. For example, g-indicates a global style, m-indicates a module style, and ui-indicates a component style. For details, refer to the project requirements; 4. A single style cannot appear! Important; 5. class is not allowed to be used only for JavaScript to select some elements and create a class without style information (using id ); 6. The element id must be unique on the page; 7. Use different tags on the same page to avoid using the same name and id (the same tag can be used ).
20	CSS-writing Standardization	When a rule contains multiple selectors, each selector declaration must have an exclusive row.
21	CSS-writing Standardization	Values in the property selector must be enclosed by double quotation marks. For example, input [name = "acd"] {……}
22	CSS-writing Standardization	When the value is a decimal point between 0 and 1, the value 0 of the integer part is omitted. For example, opacity:. 8
23	CSS-writing Standardization	The path in the url () function is not enclosed by quotation marks. Such as background: url(bg.png );
24	CSS-writing Standardization	If the length is 0, the Unit must be omitted. Such as padding: 0 5px
25	CSS-writing Standardization	The sample code must be unique in a file suffixed with. CSS. You cannot write a line style in special cases.
26	CSS-writing Standardization	The RGB color value must be in hexadecimal notation # rrggbb. Rgb () is not allowed ().
27	CSS-writing Standardization	Color: 1. the RGB color value must be in hexadecimal notation # aabbcc. rgb () is not allowed (); 2. When the color value can be abbreviated, it must be abbreviated; for example, # fff, #000 3. Names of color values are not allowed; for example, uncertain values such as red green 4. The color values are all in lowercase English letters.
28	CSS-writing Standardization	Font 1: 1. The font family Name in the font-Family attribute should use the English family Name of the font. If there is a space, it must be placed in quotation marks and Chinese characters are strictly prohibited. Example font-family: "Microsoft YaHei "; Font Operating System Family Name Windows () Windows SimSun Windows SimHei Windows Microsoft YaHei Microsoft is black Windows Microsoft JhengHei Mac/iOS STHeiti Holly simhei Mac/iOS Hiragino Sans GB WenQuanYi zhenghei Linux WenQuanYi Zen Hei WenQuanYi micron black Linux WenQuanYi Micro Hei
29	CSS-writing Standardization	Font 2: 1. font-family: "front and back of Chinese fonts in Spanish" and "good effect (high quality/better suited to requirements) the front font and the front font with general effects are written in the "order". At last, a general font family (serif/sans-serif) must be specified ); Example: font-family: Arial, sans-serif;
30	CSS-writing Standardization	Font Size: 1. the font size of the Chinese content to be displayed on the Windows platform should be no less than 12px; 2. Chinese content to be displayed on Windows platforms. Do not use font-style other than normal.
31	JS-writing Standardization	Name: Several common naming rules are as follows: bucket name: thisanapple, Pascal name: thisIsAnApple, underline name: this_is_an_apple, dash name: this-is-an-apple 1. The method/attribute name, variable name, parameter name, namespace, and function name must be named by camper; 2. The class name, enumeration name, and constructor must be named by Pascal; 3. attributes of the constant name and enumeration: all uppercase underline names must be used, for example, IS_DEBUG_ENABLED; 4. Private (protected) members (attributes, functions, etc.): must begin with an underscore; 5. The is and has headers should be used for boolean types to indicate their types; 6. Naming also requires attention to semantics. For example, a variable name should use a noun, a function name should use a moving object phrase (getAccListData), and a class name should use a noun.
32	JS-writing Standardization	JavaScript programs should be stored independently in files suffixed with. js.
33	JS-writing Standardization	Avoid exceeding 80 characters in each line.
34	JS-writing Standardization	Minimize the use of global variables. Do not overwrite local variables.
35	JS-writing Standardization	Whether a common function is used when common functions can be used.
36	JS-writing Standardization	Statement: 1. Each row can contain at most one statement, and put the; (semicolon) at the end of each simple statement; 2. return Statement Do not use () (parentheses) to enclose the return value in a return statement with a returned value. If the expression is returned, the expression should be in the same line as the return keyword to avoid incorrect bonus points; 3. Avoid using the continue statement, which makes the logical process of the program obscure; 4. eval is the easiest way to abuse JavaScript and avoid using it.
37	JS-writing Standardization	ES5 syntax must wrap the code into an IIFE (Immediately-Invoked Function Expression) to create an isolated custom domain to prevent global namespace contamination.
38	JS-writing Standardization	Add the js strict mode 'use strict 'to the code'
39	JS-writing Standardization	Variable Declaration: variables are declared using var or let. variables that are not specified are implicitly declared as global variables, which is difficult to control.
40	JS-program dredging	It is wise to use true and false judgments. if (a = true) is different from if (a), which converts it to true or false through special operations, all the following expressions return false: false, 0, undefined, null, NaN, (null String ).
41	JS-program dredging	To avoid creating a function in a loop, adding a function to a simple loop statement is very easy to form a closure and brings risks.
42	JS-program dredging	Avoid declaring a function in the statement block. syntax errors are reported in strict mode.
43	JS-program dredging	The array constructor replaces the array and object constructor with the array and object literal. The array constructor can easily make mistakes on its parameters.
44	JS-program dredging	Use a ternary operator to allocate or return statements to avoid complex conditions.
45	JS-program dredging	Single quotation marks (') are used for all strings without double quotation marks ("), which is very advantageous in creating HTML strings: for example: Var msg = 'this is some HTML <div class = "makes-sense"> </div> '.
46	JS-program dredging	Do not use redundant programs. The following example serves as a reference: The consumer has an unused subroutine. Repeated token Initialization Define unused variables
47	JS-logic correctness	No strange logic (empty functions and unprocessed branches)
48	JS-logic correctness	The string length in the text input box is limited based on two points: 1. Whether the business requirements are met; 2. Whether the database field length meets the requirements
49	JS-logic correctness	After the query is complete, the query conditions should be kept in the corresponding input box
50	JS-logic correctness	Whether the query results are sorted.
51	JS-logic correctness	The total number of items in the query area should be the total number of all data items currently queried. Instead of the number of entries displayed on the current page
52	JS-logic correctness	The query condition input box should remove spaces before and after Query