Public account: wechat search front end tool person; Take more dry goods

Consistent development practices across teams; Uniform code style; Team cooperation, work efficiency and later maintenance have been greatly improved;

Why you Need a “Front-end Development Specification”

The specification is not mandatory, and there are no fatal problems with writing code and running programs, but there are a number of problems without the specification, such as:

  • Lack of norms, the first problem is the different coding styles of the team, which increases the cost of code reading among members, and increases the cost of team collaboration and maintenance.
  • As the team changes (multiple people working on an application, or apps changing developers), projects can get messy and out of control without discipline;
  • Even for personal development, specifications are needed, and when the project is transferred to someone else, having a specification can greatly reduce the cost of reading.

. Therefore, it is useful to establish a set of development specifications that are suitable for the team.

A. Basic principles

  • Conform to thewebstandard(UTF-8, HTML5)
  • semantichtml(HTML5New requirements, reduceddivandspanAnd other tags without specific semantics)
  • Structural performance behavior separation (HTML-CSS-JSCode separation, high cohesion and low coupling of different behavior codes)
  • Excellent compatibility (compatible with earlier versions of browsers, mobile andPCCompatible with end device)
  • Page performance (reduce the number of requests, such as using Sprite andsass\lessSyntax)
  • The code needs to be clean and orderly, with as little server load as possible and the fastest parsing speed (reducedrepaintandreflow).

B. File naming conventions

1, HTML, CSS, JS, lib, images files are stored in the project directory. If a relevant front-end framework is used, arrange the layout according to the file format of the framework.

2. All folders and files shall be named in English (avoid using Chinese paths).

3. HTML files: Use index.html for entry files. If there is a design manuscript of the design team, name the design manuscript the same as the HTML file and store it properly.

4. CSS file name: suffix.css. Common initial. CSS, initializing base. CSS, home page index. CSS, other pages according to the corresponding HTML name.

5, Js file name: English name, suffix.js. common. Js, initialization base. Other pages are named according to the corresponding HTML.

C. the TML specification

1, document type declaration and encoding: unified html5 declaration type. Use IDE to implement hierarchical indentation when writing (default indentation is 4 Spaces).

2. Except for special cases, place the CSS file after the body
tag. Most JS files are placed at the end of the tag (if you need code executed before the interface is loaded, you can put it after the head tag) to avoid inline JS and CSS code.

3. All encoding must follow THE HTML (XML) standard. Tags & attributes & attributes must be named by lowercase letters, underscores and digits, and all tags must be closed, including BR (), HR (), etc. Attribute values are quoted in double quotes.

4. Introduce the JS library file, the file name should include the library name and version number and whether it is a compressed version, such as jquery-1.4.1.min.js. To import plug-ins, the file name format is library name + plug-in name, such as jquery.bootstrap.js.

5. When writing pages, consider backward extensibility. Class&id Refer to the CSS writing specifications.

6, when you need to add custom attributes to HTML elements, first consider whether there is a default existing appropriate tag to set. If not, you can use the prefix “data-” to add custom attributes, avoid using “data: “and other naming methods.

7. Semantic HTML, such as H * for headings based on importance (only one H1 on the same page), P for paragraph tags, ul for lists, no block level elements nested in inline elements.

8. Minimize multiple levels of div nesting.

9. Avoid redirection when writing the link address, for example: href=” http://myVue.com/ “, that is, to add “/” to the URL address;

10, avoid using the style attribute in the page, i.e. style=”…” .

11, You must add a label for a form element (input, textarea), such as name: name:

12. Write images that can be rendered as backgrounds into CSS styles.

13. Alt must be added to important images. Give titles to important elements and truncated elements.

14. Add annotations to block codes and important functions (such as loops) to facilitate the background to add functions.

15, special symbol use: use code substitution whenever possible: such as <(<)&>(>)& space ()&»(»), etc.

, dc SS specification

1. The coding specification is UTF-8.

2. Collaborative development and division of labor: I will write ** body frame file in advance according to each module and page similar program, and assign it to front end personnel to realize internal structure & performance & behavior. The common CSS file base. CSS is written by I. In the collaborative development process, please be sure to introduce every page, this file contains reset and the bottom of the header style, this file cannot be modified at will.

3, Use of class and ID: ID is unique and parent, class is repeatable and child, so ID is only used for large modules, class can be used for high reuse and child. The ID is in principle named when I distribute the framework file, except for the hook reserved for JS.

4. Reserve the name of the JS hook, starting with js_, such as js_hide and js_show.

5, class and id names: big name such as the framework of the header/footer/wrapper/left/right in 2 by I like unified naming. Other style names are lowercase & digit &, such as i_COMMENT, fontred, width200. Avoid using Pinyin and use simple word combinations. In short, naming to semantic, concise

6, avoid class and ID naming (this is important, if you do not understand, please timely communicate with I) : a) through the subordinate writing method to avoid, for example, see D. B) Rename the parent element id/class part, as shown in d. C) For names with high repeat usage, please start with your code name and underscore, such as i_clear. D) a, B two, applicable in 2 has built the framework of the page, for example, in 2 has built the framework of the page code to add a new div element, according to a naming rule:… #mainnav.firstnav{……. } according to b:… . Main_firstnav {……. }

7. Write CSS properties in the following order: Layout positioning properties > own properties > text properties > Other properties. This section can be written according to your own custom, but try to ensure that the same attributes are written together. Attribute listing: Layout positioning attributes mainly include: Display&list-style&Position (corresponding top, right, bottom, left) & Float&Clear & Visibility&overflow;

Its attributes mainly include: width & height & margin & padding & border & background.

Text attributes include color, font, text-decoration, text-align, vertical-align, and white-space

Other & content.

8. Improve style repetition before writing code.

9. Make full use of HTML attributes and style inheritance principles to reduce the amount of code. 10. Please transcode the Chinese font name in the style sheet into Unicode code to avoid garbled characters when coding errors occur.

11, background pictures please use as much as possible Sprite graph technology, reduce HTTP requests, considering the multi-person collaborative development, Sprite graph by module production.

12, when using the table tag (try to avoid using the table tag), please don’t use the width/height/cellspacing/cellpadding table attributes defined performance directly, and USES the private property of the table as possible to the separation of structure and performance, such as the thead, tr, Th, TD, TBody, Tfoot, COLgroup, Scope. Cellspaing and CELLPADDING CSS control method: table{border: 0 Margin: 0. Border – the collapse: the collapse. }tableth, tabletd{padding: 0. }, I will initialize the table styles in the base.css file.

13, eliminate the use of compatible IE8.

14. When using PNG images, the image format should be PNG-8. If PNG-8 really affects the image quality or has translucent effect, please define background for IE6 separately: _background: None. _filter: progid: DXImageTransform. Microsoft. AlphaImageLoader, (sizingMethod = crop, SRC = “img/bg. PNG ‘).

The use of 15, avoid compatibility attributes, such as text – shadow | | CSS 3 related properties.

16, reduce the use of impact performance properties, such as the position: absolute | | float.

17, must add comments for large block style, small block appropriate comments.

18, code indentation and format: it is recommended to write in a single line, according to their own habits, the later optimization will be unified processing.

E. JS writing specification

1, the file code is utF-8, the writing process, the end of each line of code must have a semicolon. In principle all functions are native development according to XXX project demand, in order to avoid down down online code caused by pollution (heavy redundant code | | conflict with existing code | |).

2. Library introduction: In principle, only jQuery library should be introduced. If a third-party library needs to be introduced, the decision should be discussed with other team members.

3, variable naming: camel name. Native JS variables are required to be pure English letters, the first letter must be lowercase; Require a centralized declaration of variables to avoid global variables; Private properties, variables, and methods begin with an underscore _; Constants, all letters in uppercase, words separated by underscores; Properties of enumerations, with all uppercase letters and underscore separated names between words

4, class naming: uppercase, camel name. Such as MyVue.

5, function naming: lowercase camel name. Such as myVue ().

6, naming semantic, as far as possible to use English words or their abbreviations.

7. Avoid using methods or attributes that are incompatible and consume resources, such as eval_r()&innerText.

8. In the later optimization, JS non-annotated Chinese characters must be converted into Unicode encoding to avoid garbled display when encoding errors occur.

9, the code structure is clear, add appropriate annotations. Increase function reuse.

Focus on separation from HTML, reduce reflow, focus on browser performance.

11, comments (try to improve the clarity and readability of the code itself, reasonable comments, blank typesetting, etc., can make the code easier to read, more aesthetic)

12. Use cache to store data, compress resources, avoid frequent page refresh and upload static resources to CDN

13, set the response headers cache-Control and Last-Modified (if the interval between two requests is less than 5 seconds, return 304 directly, no need for server processing)

14. Web server load balancing, request distribution (realization of seven-layer load balancing), upload files using asynchronous mode

15. Static all elements that can be static on an active page, and minimize dynamic elements. Anti-peak through CDN

16. After the user submits, the button is turned grey, and repeated submission is prohibited

17. Allow users to submit only one request within a certain period of time, such as IP traffic limiting

18, pictures on a page belongs to the large amount of data, try to avoid dynamic data and pictures of the sequence rendering, the use of picture server to separate data and pictures (to establish an independent picture server)

Use load balancing middleware such as Nginx to distribute requests to different machines to avoid a bloodbath caused by continuous processing of a single application

Single-line comments

A row must be exclusive. // Followed by a space, indented to match the next line of commented code.

Multiline comment

Avoid using /… / Multiline comments like this. Use multiple single-line comments when you have multi-line comment content.

Function/method comments

Function/method comments must contain function descriptions and must be identified with comments if they have arguments and return values. ; Parameter and return value annotations must contain type information and description; When the function is internal and not accessible externally, the @inner identifier can be used.

@param {number=} @param {number=} @param {number=} @param {number=} @param {number=} @param {number=} @param {number=} @param {number=} @param {number=} @param {number=} @param {number=returnObject} Return value Description */function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}
Copy the code

File comment

File comments are used to tell readers unfamiliar with the code what is contained in the file. You should provide the general content of the file, its author, dependencies, and compatibility information. As follows:

/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @author [email protected] (Firstname Lastname)
 * Copyright 2009 Meizu Inc. All Rights Reserved.
 */
Copy the code

F. Picture specification

1. All page element pictures are placed in IMG folder, and test pictures are placed in Demo folder.

2, image format GIF/PNG/JPG. Advocate the use of webP file format, the use of software for image compression.

3, named all lowercase letters | | digital | | _ combination, which may not contain characters | | Spaces | | special characters; Try to use words that are easy to understand for the rest of the team. The other, named separately end two parts, separated by an underscore, such as ad_left01. GIF | | btn_submit. GIF.

4. Select the minimum image format and image quality to reduce the loading time while ensuring the visual effect. 5. Avoid translucent PNG images (if yes, please refer to the CSS specification).

6. Use CSS Sprite technology to concentrate small background images or ICONS to reduce page HTTP requests, but note that please make sure to draw a reference line in the corresponding Sprite PSD source image and save it to the IMG directory

At the end

Article Source: Own blog post https://laijinxian.github.io/2019/03/06/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83%E5%8F%8A%E5%BC%80%E5%8F%9 1%E6%96%87%E6%A1%A3/

Reference: https://blog.csdn.net/weixin_41697143/article/details/81049778