[Code specification] DACHang specification & Vue development specification of CodeStyle in actual project

This is the fifth day of my participation in Gwen Challenge

VsCode integration terminal Cmder(4) Introduces VsCode integration terminal Cmder, a more convenient command line tool -, –

Writing arrangement is not easy, diligent big hand son, love small praise point just for reference, according to the need to eat, insufficient, welcome all big guy generous comments, supplement and perfect, welcome to share

This article studies the code specifications used in working practice for reference only

preface

In the process of multi-team collaboration, the code is not standardized, and colleagues silently cry.

Do you have trouble understanding his code or just seem to struggle with it? When you take over the last coder’s code, you need to change his code and you don’t know where to start

Some big factories are standardized

Most companies, work teams, and large factories have a clear code specification document, organized as follows:

The first Vue official specification in the table above, > the following describes some of the specifications developed in real projects using Vue2

First, annotation specification

In the process of multi-team collaboration, the code is not standardized, and colleagues silently cry. Good code practice is clear code comments

1. Usage instructions for common components
2. Description of important functions or classes in a component
3. Complex business logic processing instructions
4. Special case code handling instructions, for special purpose variables in the code, the existence of critical values, used in the functionhack, the use of a certain algorithm or ideas need to be annotated description
5. The comment block must be/** (at least two asterisks) begins with **/
6. Single-line comments are used//

Second, coding specifications

1. useES6Style coded source code
   • Define variables usinglet, define constants to useconst
   • useexport.importmodular
2. componentpropsatomization
   • Provide default values
   • usetypeAttribute verification type
   • usepropsCheck this firstpropIf there is a
3. avoidthis.$parent
4. Use cautionthis.$refs
5. Don’t need tothisAssigned tocomponentvariable
6. Debugging informationconsole.log() debuggerDelete immediately after use

Component naming conventions

1. Meaningful nouns, short and readable
2. Start with lowercase and name with a dash
3. Common component names are simply spelled with the company name as a namespace (app-xx.vue)
4. The folder name is mainly named after the functional module representative

Iv. Placing order of VUE method

• The components template
• The props parent component passes information
• data
• created
• mounted
• activited
• update
• beforeRouteUpdate
• metods
• filter
• computed
• watch

5. HTML specification

1. The structural order and the visual order are basically the same

2. Separate structure, performance, and behavior. Avoid inlining

3. Keep a nice clean tree structure

4. Structurally, if you can write side by side, do not nest.

   • If I could write it as<div></div><div></div>So don’t write it nested<div><div></div></div>

5. If the structure already meets the visual and semantic requirements, then don’t have extra redundant structure.

   • Such as<div><h2></h2></div>That satisfies the requirement, so don’t write it again<div><div><h2></h2></div></div>

6. Don’t reference too many class names on a tag, as few as possible.

   • For example, don’t:<div class = "class1 class2 class3" > </ div>

7. For a semantically internal tag, avoid using a className.

   • For example, in a list like this, the ITM in the LI tag should be removed:<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>

CSS specifications

1. Naming rules

   • Use the class selector and discard the ID selector
   • NEC special characters: “-” hyphen
   • Classification naming method: use a single letter +”-” prefix
   • Naming should be concise without losing semantics

2. Code format

   • Selectors, properties, and values are all lowercase
   • Write a selector definition in a single line
   • The last value also ends with a semicolon
   • Omit the value for0At the time of the unit
   • Use single quotes
   • Write in order of importance
   • Comment format:/* Comment the text */

3. Selector order

   • Please consider the following order:
   • From large to small (depending on the range of the selector)
   • From low to high (in order of rank)
   • From first to last (in structural order)
   • From father to child (depending on the structure of nesting)

Here list some configuration, only for reference, throw a brick to attract jade, have got it?

There was no warning this time

Below I will update [I haven’t decided yet] -, -.. Please look forward to thinking about it tomorrow.. hahah