1.需求
公司向外提交源代码时,不希望同时提交注释或部分注释。
制订公司员工(前端)编写代码注释规范
2.注释规范
注释的目的:
提高代码的可读性,从而提高代码的可维护性
注释的原则:
如无必要,勿增注释
如有必要,尽量详尽
3.解决方案
使用JSDoc对代码注释进行规范:网址
3.1 HTML 代码注释
推荐:
不推荐:
...
3.2 CSS 代码注释
推荐:
/* 说明 */
.box-list {}
/* 说明 */
.box-down {}
不推荐:
/* 说明 */
.box-list {
display: block;
}
.box-down {
display: block;/* 说明 */
}
3.3 JavaScript 代码注释
单行注释
推荐:
// 是否激活
const active = true
不推荐:
const active = true // 是否激活
注释行的上方需要有一个空行 (除非注释行上方是一个块的顶部) ,以增加可读性。
推荐:
function getType () {
console.log('fetching type...')
// 设置默认值为no type
const type = this.type || 'no type'
return type
}
// 注释行上面是一个块的顶部时不需要空行
function getType () {
// 设置默认值为no type
const type = this.type || 'no type'
return type
}
不推荐:
function getType () {
console.log('fetching type...')
// 设置默认值为no type
const type = this.type || 'no type'
return type
}
多行注释
多行注释使用 /** ... */,而不是多行的 //
推荐:
/**
* make() 方法返回一个新的**
* 基于***
*/
function make (tag) {
// ...
return element
}
不推荐:
// make() 返回一个新的**
// 基于***
function make (tag) {
// ...
return element
}
注释空格
推荐:
// is current tab
const active = true
/**
* make() 返回一个新的**
* 基于***
*/
function make(tag) {
// ...
return element
}
不推荐:
//is current tab
const active = true
/**
*make() 方法返回一个新的**
*基于***
*/
function make(tag) {
// ...
return element
}
特殊标记
有时我们发现某个可能的 bug,但因为一些原因还没法修复;或者某个地方还有一些待完成的功能,这时我们需要使用相应的特殊标记注释来告知未来的自己或合作者:
class Calculator extends Abacus {
constructor () {
super ()
total = 0
// TODO: 在这里写代办的事项
this.total = 0
}
}
文档类注释
文档类注释,如函数、类、文件、事件等;都使用 jsdoc 规范
在提交源代码时,若要删除的注释则添加 @internal ,方便最后全局搜索一并去除
/**
* Book类,代表一个书本.
* @constructor
* @param {string} title - 书本的标题.
* @param {string} author - 书本的作者.
*/
function Book(title, author) {
this.title = title
this.author = author
}
Book.prototype = {
/**
* 获取书本的标题
* @returns {string|*}
*/
getTitle: function() {
return this.title
},
/**
* 设置书本的页数
* @param pageNum {number} 页数
* @internal
*/
setPageNum: function(pageNum) {
this.pageNum = pageNum
}
}