Purpose 1.

Code specifications are rules that programmers follow when coding. The purpose of a specification is to allow programmers to write easy-to-read, maintainable code. Some of its benefits:

  • It promotes teamwork
  • Maintenance costs can be reduced
  • helpcode review(Code review)
  • Getting into the habit of code specification helps programmers grow

2. Naming conventions

Naming conventions generally refer to whether the name is humped, Hungarian or PASCAL; Use nouns, noun groups, or verb-object structures for naming.

    const userInfo = {} // Hump, lower case
    const UserInfo = {} // Start with a capital letter
    cosnt strUser = ' ' // Hungarian, the prefix indicates what the variable is. The prefix STR represents a string
Copy the code

Variable naming and function naming have different emphases:

  • The point of variable naming is to indicate what the variable “is,” preferring nouns.
  • The point of function naming is to indicate what the function “does,” and it tends to be named with a verb-object structure (doSomething)
    // Example of variable naming
    const userName = 'I'm just a chicken.'
    const userAge = 10
    
    // Function naming example
    function getUserInfo () {}
    const chooseAge = () = > {}

Copy the code

3. JS annotation

JS code comments are relatively simple, such as // for single-line comments and /**/ for multi-line comments.

/ * * *@TODO Add two numbers *@param {Number} a 
 * @param {Number} b 
 * @return {Number} Returns a sum *@func {getUserInfo} Re-create user information */
function add(a, b) {
    return a + b
}

// Single-line comment
const active = true

Copy the code

If this is an exported module, then we should have a file header that indicates what the file does, such as:


/* * @todo formatting time * @author: mikey.zhaopeng * @date: 2016-07-29 15:57:29 * @last Modified by: mikey.zhaopeng * @Last Modified time: 2016-08-09 13:29:41 */

Copy the code

Vscode-fileheader can be used to generate header comments using CTRL + Alt + I. It will listen for the file modification and generation time, and the time will change whenever you modify it. I added the TODO content here myself.

4. HTML comments

For simple HTML files, we use 

<body>
    
    <! - the header module -- -- >
    <div></div>
    <! - the main module -- -- >
    <div></div>
    <! - footer module -- -- >
    <div></div>

</body>

Copy the code

5. The CSS comment

CSS section, let’s comment on the main part, don’t need to be very detailed. Each small piece is annotated. Such as

/ * * * * / head
.header{}

/** * body **/
.main{}

/**footer**/
.footer{}

Copy the code

At the same time, we should try to semantically name the class name. Such as:

// indicates the outermost layerheaderThe container style.header-wrap{} // represents each style of the item list.goods-item{} // represents the age plate style.age{}

Copy the code

6. Vue components

In a VUE project we should annotate the props and methods of the component when we componentize it. And what is required. Such as:

<! @param{Array} header @param{Number} total Number of entries @param{Object}? PageInfo Data page information This item is optional --> <DataTable :data="tableData" :total="total" :pageInfo="pageInfo" />Copy the code

For the vUE project code specification, check out my other articles. portal

Follow-up record