1. Naming conventions

    1. File named folder/file named unified use lowercase guarantee project has good portability, cross-platform related reference (www.ruanyifeng.com/blog/2017/0…
    2. File reference path Because files are named in lower case, you need to pay attention to case reference
    3. Js variable
      1. Variable naming: small hump naming specification: prefix noun naming suggestion: semantic
        • Case study:
        // let maxCount = 10; let tableTitle = 'LoginTable'; // let setCount = 10; let getTitle = 'LoginTable';Copy the code
      2. Constant naming method: all uppercase naming specification: use uppercase letters and underscores to combine names, and underscores to separate words. Naming Suggestion: Semantic
        • Case study:
        const MAX_COUNT = 10;
const URL = 'https://pro.qsx001.com';
Copy the code
      3. Function naming: small camel – shaped naming. Naming conventions: prefixes should be verbs. Naming suggestion: Semantic
        • Reference:
        Can: Determines whether an action (permission) can be performed. The function returns a Boolean value, true: executable; False: cannot be executed. Has: Determines whether there is a value; The function returns a Boolean value, true: executable; False: cannot be executed. Is: determines whether the value is a certain value. The function returns a Boolean value, true: a value; False: not a certain value. Get: Get a value; Function returns a non-boolean value; Set: Sets a value; No return value, returns whether the setting was successful or returns the chained object; Load: loads some data. Returns no value or the result of whether the load is complete; TODO - to be addedCopy the code
      4. Class and constructor naming: big camel case naming convention: Prefix is name. Naming suggestion: Semantic
        • case
        class Person {
  public name: string;
  constructor(name) {
    this.name = name;
  }
}
const person = new Person('mevyn');
Copy the code

        Common properties and methods: Same naming as variables and functions. Private properties and methods: the prefix is_(underscore), followed by the same naming of public properties and methods.

        • case
        class Person { private _name: string; Constructor () {// Public method getName() {return this._name; } // Public method setName(name) {this._name = name; } } const person = new Person(); person.setName(''); person.getName();Copy the code
      5. CSS (class, ID) Naming rules BEM Class naming BEM is an acronym for block, element, or modifier. It uses different blocks, functions, and styles to name elements. These three parts are used__with--Concatenation (two instead of one here to leave names for the block);
        • The pattern of naming conventions is as follows:
        .block{}.block__element{}. Block -- Modifier {} Block represents a higher level of abstraction or component block__element represents a descendant of block, An overall block used to form a complete block--modifier represents different states or versions of a blockCopy the code

        Id is usually involved in the style, the name is camel, if the js call hook needs to be set to js_xxxx mode

  2. annotation

    1. Single-line comments
    Dosomthing () = dosomthing();Copy the code
    1. Multiline comment
    * * * dosomthing(); * * * dosomthing();Copy the code
    1. Refer to jSDoc for function (method) comments
    @param: Parameter name (parameter type) Description. Description Parameter information; Example: @param name[String] Incoming name @return: information describing the return value; @ return {Boolean}; Example: true executable, false not executable @author: author information [attached information: email, date]; Information describing the author of this function; Example: @author Zhang SAN 2015/07/21 @version: @version xx.xx.xx; Describes the version number of this function; Example: @version 1.0.3 @example: @example Demonstrate the use of functions; Example: @example setTitle(' test ')Copy the code

  3. Components Each Vue component is recommended not to exceed 200 lines of code. If it is recommended to split components, components can be split into basic/UI parts and business parts. Basic components are generally presented and basic functions are not coupled with business parts. Business components typically contain business functions, business specific data, and so on

    1. UI components/base componentsPay attention to the extensibility of the development, support data transfer parameters for rendering, support slot Settings with mixins, mixins put basic information and methods
    2. The container component is highly coupled to the current business and consists of multiple base components that can carry the business interface requests and data of the current page (VUEX).
    3. UI components are stored in SRC /components/ and contain xxx.vue, xxmixin.js and readme.md xxx.vue indicates the UI part, xxmixin.js indicates the JS part
      • Readme. md describes basic information about components
      @name: component name; Example: Filter the dropdown @version: version; Example: v1.0.0@updateTime: update date; Case: 2021.03.04@describe: Use scenario description; Example: The search function uses @props: parameters; ['data'] @author: author; Case: MarkCopy the code
      • Component structure
      Element - the filter/index. Vue element - the filter/mixinElementFilter. Js element - the filter/readme. Md reference component Directly introducing MixinElementFilter. Js. Methods in mixins can be refactored on pages referencing componentsCopy the code

      The business components are in the business module section

    4. It is not recommended to use eventBus to control data. Instead, use props and $emit to distribute and transmit data. There is usually an intermediate container component as a bridge container component to receive and distribute data
    5. Components mount and destroy throughv-ifcontrol<test-component v-if='componentActive'> </test-component>throughiscontrol<component is='componentName'> </component>
    6. Components shared across projects are regularly extracted from common component locations and placed in git repositories for download and reference

  4. codeReview

    1. Rules require codeReview before any changes to functional requirements that affect the previous process are released
    2. The executor has a fixed codeReviewer for each front-end
    3. Feedback Each codereView needs feedback and is responsible for this codereView
      • Examples of feedback content
      Module code problems affected by this release: code problems found in the process of Codereview, such as code performance, writing method, code style and other business problems: for example, found a logical problem affecting other modules, if not found, write. There is noCopy the code

  5. Git specification

    1. branch

      • named
      -Leonard: The master branch is called the master branch, and every time you update the master, you need to tag it. -Leonard: The test branch is the branch that the test environment uses. Experimental branch, according to the feature/name/version naming conventions, we will change later if there is a better naming convention. Version indicates the iteration version, and name indicates the iteration name. Hotfix: The hotfix branch is named hotfix/name/version. Verison indicates the version number of the hotfix, and name indicates the content title of the hotfixCopy the code

    2. Git Submission template

      • Gitcommit_template file
      [Department][Project]: Cause: Solution: Change type: Applicable model: Verification Suggestion: Associated Change Item: Task Id:Copy the code
      • Command to set a template
      Git config commit. Template [template file name] Git config --global commit_template git config --global commit_template Git config --global commit_template git commit_template git config-global core.editor Git config-global core.editor vim select the appropriate Settings you need and then you can submit your files. Git commit -a git commit -a git commit -a git commit -a git commit -a Then add the corresponding remarks according to your format and saveCopy the code

  6. Sharing sessions are held at least once every two weeks, sharing work and other aspects of life

  7. Vue component structure

Export default {// Don't forget the name attribute name: 'RangeSlider', // extends: {}, // Component properties, variables: {bar: {}, / / foo in alphabetical order: fooBar: {}, {},}, / / variable data () {}, computed: {}, / / use other components components: {}, / / the method watch: {}, the methods: BeforeCreate () {}, mounted() {},};Copy the code