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

}

}