According to the code specification of our company, I sorted out the following points: the first part of the HTML specification, the second is the CSS specification, the second is the javascript specification, and the last is the vue2. X specification.

HTML specification

DOCTYPE declaration

HTML files must be declared with a DOCTYPE declaration, and the HTML5 document declaration is universally used:

<! DOCTYPE html>Copy the code

CHARSET

Generally, utF-8 is used

<meta charset="UTF-8">
Copy the code

Element and tag closure

There are five types of HTML elements:

  • Empty elements: Area, base, BR, col, Command, Embed, HR, img, input, keygen, Link, Meta, param, source, track, WBR

  • Raw text elements: script, style

  • RCDATA elements: Textarea, title

  • Foreign elements: elements from the MathML namespace and the SVG namespace.

  • Regular elements: Any other HTML allowed elements are called regular elements.

Closing element tags should follow the following principles:

  • Raw text elements, RCDATA elements, and regular elements all have a start tag to indicate the beginning and an end tag to indicate the end.
  • The start and end tags of some elements may be omitted, and if it is specified that the tag cannot be omitted, then it must not be omitted.
  • Empty elements have only one start tag, and you cannot set an end tag for empty elements.
  • A foreign element can have a start tag and a paired end tag, or only a self-closing start tag, in which case the element cannot have an end tag.

In order for browsers to better parse code and make code more readable, there are conventions like the following:

  • All elements that have a start tag and an end tag should have a start tag, as well as elements that allow the start tag or bundle tag to be omitted.
  • Empty element tags are marked with a slash character

The type attribute

There is no need to specify type attributes for CSS and JS, which are included by default in HTML5

Recommendation:

<link rel="stylesheet" href="" >
<script src=""></script>
Copy the code

Is not recommended:

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
Copy the code

Grammar standard

  • Indent with TAB (2 Spaces);

  • Specification for element nesting: Nested nodes should be indented, each block element on a separate line, and inline elements are optional;

  • On attributes, use double quotes, not single quotes;

  • Attribute names are all lowercase, delimited by hyphens (-).

  • Use a slash at the end of the auto-close label;

    Page title 

    <! <h1 class="hello-world"> hello, world! </h1>Copy the code

Document template

Guide. Aotu. IO/docs/HTML/t…

2. CSS specifications

Grammar standard

  • Indent with TAB (2 Spaces);

  • End each declaration with a semicolon;

  • /* */;

    /* here is a comment */

    .element { width: 50px; height: 50px; }

  • quotes

    /* The contents of the URL should be quoted */

    .element:after { content: “”; background-image: url(“logo.png”); }

    /* Attribute values in attribute selectors need quotes */

    li[data-type=”single”] { … ; }

  • named

    /* class Class names are lowercase letters separated by hyphens

    .element-content {

    }

    /* The id is named in camelCase */

    #myDialog {

    }

Code legibility

  • Opens a new line for a single CSS selector or new declaration

    .jdc, .jdc_logo, .jdc_hd {

    color: #ff0; }

    .nav{

    color: #fff; }

  • Color Value RGB () RGBA () HSL () HSLA () Rect () does not contain Spaces, and the value does not contain an unnecessary 0

    The JDC {color: rgba (255255255, 5); }

  • Attribute value The hexadecimal value should not be abbreviated

    .jdc {

    color: #ffffff;

    }

  • Do not specify units for 0

    .jdc {

    margin: 0 10px; }

Attribute writing order

Follow this order:

  1. Layout positioning attributes: display/position/float/clear/visibility/overflow

  2. Its attributes: width/height/margin/padding/border/background

  3. Text attribute: color/font/text-decoration/text-align/vertical-align/white-space/break-word

  4. Other attributes (CSS3) : Content/cursor/border-radius/box-shadow/text-shadow/background: Linear gradient…

    .jdc {

    display: block;

    position: relative;

    float: left;

    width: 100px;

    height: 100px;

    margin: 0 10px;

    padding: 20px 0;

    font-family: Arial, ‘Helvetica Neue’, Helvetica, sans-serif;

    color: #333;

    background: rgba(0,0,0,.5);

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    -o-border-radius: 10px;

    -ms-border-radius: 10px;

    border-radius: 10px;

    }

Javasript specification

Variable naming

  • Using camalCase

The function name

  1. Naming method: small hump naming method

  2. Naming conventions: the way verbs + methods are described.

  3. Recommended verbs:

    The verb

    describe

    The return value

    is

    Whether it is a value

    Boolean value

    can

    Whether an operation can be performed

    Boolean value

    has

    Is there a certain value

    Boolean value

    set

    Set a value

    Returns no value, whether the setting was successful, or the chained object

    get

    Get a value

    A Boolean value

    function setName(name) {
	this.name = name;
}

function getName() {
	return this.name;
}
Copy the code

    If a constructor, use the big camel case.

    function Student(name, age) {
  this.name = name;
  this.age = age;
}

const oStudent = new Student('Tom', 18);
Copy the code

Writing optimization method

  • Multiple else-if optimization strategies with return values

    /* Before */

    Function getPosition(direction){if(direction == “left”){return “left”}else if(direction == “right”){return “right”}else If (direction == “top”){return “up”}else if(direction == “bottom”){return “down”}else{return “unknown”}}

    /* Optimized */

    Function getPosition (direction) {return ({left: “left” and right: “right,” top: “on”, the bottom: “under”}) (direction) | | “unknown”}

Iv. Vue2. X specification

Directory, file, and component naming conventions

  • directory

The kebab-case style is also adopted

  • Component files

Component names should always be multiple words

Component names should tend to be full words rather than abbreviations

Naming follows the PascalCase convention. All component file names except index.vue are written in PascalCase;

Under the Components common components folder, each index.vue should have a pascalCase-named folder describing the functionality of the component;

In views each component that constitutes a specific business follows PascalCase specification named.vue file

  • Public method files under utils, images under Assets, styles js;

Kebab-case style is adopted uniformly

  • File under API file

CamelCase method is used uniformly, and all member methods are named in camelCase mode

Component development specification

  • When registering components, use all PascalCase formats.

    import UserBook from ‘./user/UserBook’

  • Props naming convention

When declaring prop, it should always be named camelCase and kebab-case should always be used in templates

<welcome-message greeting-text="hi"></welcome-message>

<script>
  props: {
    greetingText: String;
  }
</script>
Copy the code

  • Component/instance option order

    • Name (global reference)
    • Components (template dependencies)
    • directives …
    • filters …
    • Mixins
    • Props (interface)
    • Data (Local state properties)
    • computed …
    • Watch (Response to callback)
    • Created (Lifecycle functions)
    • mounted …
    • Methods (Instance Attributes)

  • Methods naming conventions

In the camelCase, operant functions also use the verb or noun + verb form

jumpPage() {

}

openCarInfoDialog () {
    
}
Copy the code

A method that requests data, ending with data

getListData () {
 
}

postFormData () {
    
}
Copy the code

note

Reference documents are as follows:

Specification for the development of bump laboratory

Vue Style Guide