I. Naming Rules

1. File naming

All folders/files are named in lowercase to ensure good portability of the project and cross-platform reference

2. File reference path

Because files are named in lower case, references also need to be case-sensitive

3. Js variables

3.1 variable

Nomenclature: Small hump

Naming conventions: prefix nouns

Naming suggestion: Semantic

case

/ / friendly

let maxCount = 10; 

let tableTitle = 'LoginTable';

/ / not friendly

let setCount = 10;

let getTitle = 'LoginTable';
Copy the code
3.2 constant

Naming: all caps

Naming conventions: Use a combination of uppercase letters and underscores to separate words

Naming suggestion: Semantic

case

const MAX_COUNT = 10;

const URL = 'http://www.foreverz.com';
Copy the code
3.3 the function

Nomenclature: small hump nomenclature.

Naming conventions: prefixes should be verbs.

Naming suggestion: Semantic

You can refer to the following actions
The verb meaning The return value
can Determine whether an action can be performed (permissions) The function returns a Boolean value. True: executable. False: Cannot be executed
has Determines whether a value is present The function returns a Boolean value. True: contains this value. False: does not contain this value
is Determines whether it is a value The function returns a Boolean value. True: indicates a value; False: not a certain value
get Get a value The function returns a non-boolean value
set Set a value Returns no value, whether the setting was successful, or the chained object
load Load some data No return value or the result of whether the load is complete 
// Whether it can be read
function canRead(a): boolean {
  return true;
}
// Get the name
function getName(a): string {
  return this.name;
}Copy the code
3.4 Classes, constructors

Nomenclature: big camel case nomenclature, capital letter

Naming conventions: The prefix is a 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: prefixed with _(underscore) and followed by the same names as 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('mervyn');
person.getName(); // ->mervynCopy the code
3.5 The CSS Class and ID Naming rule BEM
We'll stick with the big teamBEM modelCopy the code

(1) Class naming BEM is an acronym for block, element, or modifier, using different blocks, functions, and styles to name elements. These three parts are concatenated with — using __ (two instead of one to leave a name for the block). The pattern of naming conventions is as follows:

.block{}
.block__element{}
.block--modifier{}

block Represents a higher level abstraction or componentblock__element On behalf ofblock The offspring used to form a completeblock As a wholeBlock - modifierblock Different states or versions ofCopy the code

(2) Id generally participate in the style, the name of the use of camel, if the JS call hook needs to be set to js_xxxx mode

Second, the annotation

1. One-line comments

// The execution condition of this function is approximate
dosomthing(a)Copy the code

2. Multi-line comments

/ ** You can use multi-line comments when XXXX is more descriptive* xxxx
*/
dosomthing();Copy the code

3. Refer to JSDoc for function (method) comments

The annotation of grammar meaning The sample
@param @param Parameter name {Parameter Type} Description information Description Parameter information @param name {String} The incoming name
@return @return {Return type} Indicates the description Information describing the return value @return {Boolean} True: executable. False: Cannot be executed
@author @author Author information [Affiliated information: email address, date] Describes information about the author of this function @ the author zhang SAN 2015/07/21
@version @version XX.XX.XX Describes the version number of this function @ version 1.0.3
@example @example Example code Demonstrate the use of functions @example setTitle(‘ test ‘)

Three, components,

It is recommended that you do not exceed 200 lines of code per Vue component, and if you do, split the component

Components can generally be split into basic/UI parts and business parts. Basic components are generally the part that hosts presentation, basic functions, and does not have business coupling. Business components typically contain business functions, business specific data, and so on

1 UI components or basic components

Pay attention to the extensibility of the development, support data transfer parameters for rendering, support slot slot

You have mixins, which contain basic information and methods

2 Container Components

It is highly coupled to the current business and consists of multiple basic components that can carry the business interface requests and data of the current page (VUEX).

3 Position for storing components

(1) UI components are stored in SRC/Components /, including xxx.vue, xxmixin.js and readme.md

    xxx.vueRepresents the UI part xxmixin.jsRepresents the JS part readme.mdProvides basic information about componentsCopy the code
noun meaning case
@name Component name Filter the drop-down box
@version version v1.0.0
@updateTime Updated date 2018.09.18
@describe Usage Scenario description Under certain scene
@props parameter [‘data’]
@author The author dd

You can simply import mixinelementFilter.js when referencing components as shown below. Methods in mixins can be refactored on pages referencing components



(2) Business components can be placed in the business module part

4 Component Communication

To avoid confusion in data distribution sources, it is not recommended to use eventBus to control data. Instead, use props and $emit for data distribution and transfer

Peer component communication usually has an intermediate container component as a bridge

Container components serve as acceptance and distribution points for data

Component hanging and destruction

(1) Control the hanging and destruction of components through V-IF

<testcomponent v-if='componentActive'> </testcomponent>
Copy the code

(2) Control the hanging and destruction of components through IS

<component is='componentName'> < /component>
Copy the code

6 Component sharing across projects

Components that are frequently shared are regularly extracted from the common component location and placed in npm.kuaizi.co for download and reference

Fourth, the codeReview

1 the rules

CodeReview is required before any changes to functional requirements that affect the previous process are released

2 practitioner

Junior programmers can be executed by intermediate programmers. Intermediate programmers can be executed by senior programmers, and so on

3 feedback

Every codereView needs feedback and is responsible for this codereView

The feedback is basically as follows

Functions: What functions are modified this timebug
Module: 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

Git specification

1 branch

named
masterThe "master" branch is called the "master" branch. The "master" branch is used in the online environment, and every update to the master requires a tagtestThe: test branch is the branch used by the test environmentdevelopDevelop branch is called develop branchFeature: Feature branch We can temporarily press feature/name/versionThis naming convention, if there's a better naming convention we'll change it later.versionRepresents the version number of the current iteration,nameHotfix: Name of the hotfix branch we can press hotfix/ for nowname/versionVerison is the version number of the fix,nameIndicates the title of the hot repairCopy the code

The slash mode is used for categorization in source-tree

2 Commit the template kZ-commit

In the improvement, will inherit automatic detection code, optional input release version submission version basic information and so on

Sharing meeting

Do this at least once every two weeks, sharing work and all aspects of your life

Reference:

juejin.cn/post/1…