First, the naming convention (English - literal translation)
1, the file name
Folder / file naming unified lowercase
ensure that the project has good portability across platforms
relevant reference
2, reference file path
Because the unified file naming lowercase, quoted capitalization issues also need attention
3, js variable
3.1 Variable
Naming: small hump
Naming convention: Prefix nouns
Naming suggestions: Semantic
Case
// 友好
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不友好
let setCount = 10;
let getTitle = 'LoginTable';
3.2 Constant
Naming: all caps
Naming convention: Use a combination of uppercase and underscores named underscore to separate words
Naming suggestions: Semantic
Case
const MAX_COUNT = 10;
const URL = 'http://www.foreverz.com';
3.3 Functions
Naming: small camel nomenclature.
Naming convention: verb prefix should be.
Naming suggestions: Semantic
You can refer to the following operation
| verb | meaning | return value |
|---|---|---|
| can | Determine whether an executable action (permission) | The function returns a Boolean value. true: Executable; false: unenforceable |
| has | To determine whether it contains a value | The function returns a Boolean value. true: This value is contained; false: This value does not contain |
| is | Determine whether a value | The function returns a Boolean value. true: some value; false: not as a value |
| get | Gets a value | The function returns a non-Boolean value |
| set | Setting a value | No return value, is set to return success or the object is returned Chain |
| load | Load some data | No return value or return the results are finished loading |
// 是否可阅读
function canRead(): boolean {
return true;
}
// 获取名称
function getName(): string {
return this.name;
}3.4 class constructor
Naming: large camel Nomenclature, the first letter capitalized
Naming convention: prefix name.
Naming suggestions: Semantic
Case
class Person {
public name: string;
constructor(name) {
this.name = name;
}
}
const person = new Person('mevyn');
公共属性和方法：With named variables and functions the same.
私有属性和方法：Prefixed with _ (underscore), like the back of public properties and methods are named.
Case
class Person {
private _name: string;
constructor() { }
// 公共方法
getName() {
return this._name;
}
// 公共方法
setName(name) {
this._name = name;
}
}
const person = new Person();
person.setName('mervyn');
person.getName(); // ->mervyn3.5 css (class, id) naming BEM
我们还是使用大团队比较常用的BEM模式
(1) classdesignated using BEM actually block ( block), the elements ( element), modifiers ( modifier) Abbreviation using different blocks, functionality, and style to name elements. And the use of these three parts __ - connector (used here is not one but two pieces for the named order to leave).
Naming conventions modes are as follows:
.block{}
.block__element{}
.block--modifier{}
block 代表了更高级别的抽象或组件
block__element 代表 block 的后代，用于形成一个完整的 block 的整体
block--modifier代表 block 的不同状态或不同版本(2) idgeneral participation style, name, then use the hump, if it is to call js to hook you need to set js_xxxxthe way
Second, comments
1. Single-line comments
// 这个函数的执行条件，执行结果大概说明
dosomthing()2. Multi-line comments
/*
* xxxx 描述较多的时候可以使用多行注释
* xxxx
*/
dosomthing();3. functions (methods) Notes Reference jsdoc
| Comment Name | grammar | meaning | Examples |
|---|---|---|---|
| @param | @param Parameter Name Parameter Type} {description | Information describing the parameters | @param name {String} passing in the name |
| @return @return {} Return Type Description Information | Description return values | @return {Boolean} | true: Executable; false: unenforceable |
| @author | @author author information [subsidiary Information: such as email, date] | A description of the function of | @author Joe Smith 2015/07/21 |
| @version | @version XX.XX.XX | Description Revision of this function | @version 1.0.3 |
| @example | @example Sample Code | Using the Demo function | @example setTitle ( 'Test') |
Third, the components
Vue code for each component is recommended not to exceed 200 lines, if exceed the recommended splitting component
The component is generally split into base / ui portion and a traffic portion, the carrier base component is generally presented, basic functions, and operations without coupling portion.
Business component generally comprises service specific data like business functions
1 UI component / base component
When developing the attention of scalability, supporting data transmission parameters for rendering support slot slot
Provided with a mixin, mixin put in basic information and methods
2 the container assembly
And coupling the relatively high current service, a plurality of basic components, interface request and may carry traffic data (vuex) of this page
3 component storage location
(1) ui stored in the component src/components/ are
contained xxx.vueand xxmixin.js and readme.md
xxx.vue 表示ui部分
xxmixin.js 表示js部分
readme.md 中描述组件的基本信息| noun | meaning | Case |
|---|---|---|
| @name | Component Name | Filter drop-down box |
| @version | version | v1.0.0 |
| @updateTime | Updated | 2018.09.18 |
| @describe | Use scene description | Under certain scenarios |
| @props | parameter | ['data'] |
| @author | Author | dd |
Below
when referring to the components can be introduced directly into mixinElementFilter.js. Can reconstruct the way in which mixin page reference component
(2) to the business component can be placed in service module section
4 Communication Components
Avoid data distribution source confusion, does not recommend the use of eventBuscontrol data should be used propsto and $emitto distribute and transmit data
Communication siblings have a generally intermediate container assembly as a bridge
Container assembly for receiving and distribution point data
5 hanging assembly and destruction
(1) by the control assembly and hanging v-if destruction
<testcomponent v-if='componentActive'> </testcomponent>
(2) is linked to the control assembly and destruction
<component is='componentName'> </component>
6 common components across projects
Common Components timing extraction position storage times more common in his npm.kuaizi.co component, the reference for download
Four, codeReview
Rule 1
All affect the functional requirements of the previous process changes require codeReview before the onset version
2 executives
Junior intermediate programmer programmer can be executed codeReview
intermediate programmer by senior programmer to perform codeReview
so
3 Feedback
Every codereView need to have feedback to be responsible for this codeReview
The basic content such as feedback
功能：本次主要是修改了什么功能或者bug
模块：本次发版影响的模块
代码问题：codereview过程中发现的代码问题，比如代码性能，写法，代码风格等等
业务问题：比如发现了某某影响到其他模块的逻辑问题，如果没有发现就写。无 Five, git specification
1 branch
name
master: master 分支就叫master 分支，线上环境正在使用的，每一次更新master都需要打tag
test: test分支就供测试环境使用的分支
develop: develop 分支就叫develop 分支
feature: feature 分支 咱们暂时可以按 feature/name/version 这种命名规范来，后面有更好的命名规范咱们再改。version 表示
当前迭代的版本号，name 表示当前迭代的名称
hotfix: hotfix 分支的命名我们暂时可以按 hotfix/name/version 这种来进行命名,verison表示这次修复的版本的版本号，name表示本次热修复的内容标题
Slash way to have categorized role in the source-tree in
2 submission template kz-commit
Note: This is the company's internal npm package, friends can refer to external commitizen Commitizen for multi-repo projects part
In consummation, will inherit automatically detect the code, optional input version made version submit basic information, etc.
Related to the installation package
npm i kz-commit --save-dev
npm i husky --save-dev
npm i lint-staged --save-dev
Placed package.json
"scripts": {
"kz-ci": "git add . && ./node_modules/.bin/kz-commit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/*.js": [
"eslint --fix"
]
}Where the lint-staged corresponding eslint validation rules will be written in the project root directory .eslintrc.js(if not create your own)
and then write a check unnecessary options, after all, not every option will require verification
such as
concrete syntax google eslintrc
module.exports = {
parser: 'babel-eslint',
env: {
browser: true,
},
extends: 'eslint:recommended',
// add your custom rules here
rules: {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
'camelcase': 0,
'no-undef': 0,
'no-console': 0,
'no-case-declarations': 0
}
}Additional lint-stagedconfiguration src/*.js represents the current directory to be verified js file
Reproduced in: https: //my.oschina.net/incess/blog/3058726