Vue项目注释风格

Vue项目注释风格

注释说明：
一. data属性说明：
【1】、单行属性，注释写在行尾
good:

activeName: ‘actList’,// 活动名称
bad:

// 活动名称
activeName: ‘actList’,
【2】、多行属性，注释写在行上
good:

// 表格配置
tableConfig: [
{
name: “SKU”,
val: “product_model”
}, {
name: “活动已售”,
val: “sold”
}, {
name: “待拼成订单”,
val: “pending”
},
],
bad:

tableConfig: [ // 表格配置
{
name: “SKU”,
val: “product_model”
}, {
name: “活动已售”,
val: “sold”
}, {
name: “待拼成订单”,
val: “pending”
},
],
Array>Object结构的，只注释第一个对象内部属性接可。
good:

tableConfig: [
{
name: “SKU”,//表头名字
val: “product_model”//对应的接口字
}, {
name: “活动已售”,
val: “sold”
}, {
name: “待拼成订单”,
val: “pending”
},
],
bad:

tableConfig: [
{
name: “SKU”,//表头名字
val: “product_model”//对应的接口字
}, {
name: “活动已售”,//表头名字
val: “sold”//对应的接口字
}, {
name: “待拼成订单”,//表头名字
val: “pending”//对应的接口字
},
],
Object>简单类型的，每一个属性都进行说明，书写位置，规则如上。
good:

params: {
email: null,// 邮箱
name: null,// 名称
},
bad:

params: {
// 邮箱
email: null,
// 名称
name: null,
},
二. props、computed、watch说明：
统一采用行上注释

三. methods说明：
方法分为两种类型：
1、无参型
2、有参型

[1]、无参型，需进行功能说明。格式采用 “//”
good:

// 重置
reset(){
this.params = {}
this.page = 1
this.per_page = 10
this.search()
},
bad:

/**

• @desc 重置
  */
  reset(){
  this.params = {}
  this.page = 1
  this.per_page = 10
  this.search()
  },
  [2]、有参型，需进行功能、参数、返回值说明。如果是单参的，可以采用双斜线在功能后追加说明。
  good:

// 获取全选的数组 languages [Array] 获取数据的表单名称
filterSelectAll(languages){
let arr = []
for(let i = 0;i<languages.length;i++){
arr.push(languages[i].key)
}
this.selectArr = arr
},
bad:

如果是多个参数的，采用多行注释
good:

/**
*@desc 改变状态
*@param id [String] 改变对象的id
*@param status [String] 改变对象的status
*@return config [Object] 配置对象
*/
changeStatus(id, status) {
let self = this
return config = {
url: api.changeBannerStatus,
loading: “loading”,
param: {
banner_position_id: id,
status: status
}
};
bad:

// 改变状态 id [String] 改变对象的id ; status [String] 改变对象的status；return config [Object] 配置对象
changeStatus(id, status) {
let self = this
return config = {
url: api.changeBannerStatus,
loading: “loading”,
param: {
banner_position_id: id,
status: status
}
};

or:

// 改变状态
// id [String] 改变对象的id
// status [String] 改变对象的status
// config [Object] 配置对象
changeStatus(id, status) {
let self = this
return config = {
url: api.changeBannerStatus,
loading: “loading”,
param: {
banner_position_id: id,
status: status
}
};
四. vue配置项说明：
统一行上注释，格式 //
good:

export default {

// 组件名称
name: 'comName',

// 父子通信
props: {},

// 注册组件
components: {},

// 数据
data() {
  return {}
},

// 方法
methods: {},

// 数据init
created(){},

// DOM加载完成
mounted(){}

}
bad:
other

原文链接: https://www.jianshu.com/p/204160fec27b