按照 ESDoc 规范编写代码注释

2,696 阅读1分钟
原文链接: github.com

介绍

ESDoc 是一个 JavaScript 文档生成器,按照规范编写代码注释,即可生成友好的 JavaScript 代码文档。

应用场景

目前,我们前端团队在开发通用组件(React 和 Vue)、工具和类库等时,强制要求按照 ESDoc 规范编写注释,便于团队其他成员快速阅读和使用,减少沟通成本。

参考

比较完整的例子

/**
 * 一个关于动物的类
 * 如果你想了解关于人的类的详情,请参考 {@link Person}
 * @see https://github.com/zhaotoday/esdoc
 * @todo 需要完善某些功能
 * @example
 * const dog = new Animal()
 */
class Animal {
  /**
   * 构造方法
   * @param name {string} 名字
   * @param age {number} 年龄
   * @param abilities {string[]} 拥有的能力
   */
  constructor(name, age, abilities) {
    this.name = name
    this.age = age
    this.abilities = abilities

    /**
     * 拥有的腿的数量
     * @type {number}
     */
    this.legs = 4

    /**
     * 朋友
     * @type {Object}
     * @property {number} friend.name 名字
     * @property {string} friend.age 年龄
     */
    this.friend = {
      name: 'chen',
      age: 30
    }
  }

  /**
   * 获取
   * @type {string}
   */
  get value() {
    return this.name
  }

  /**
   * 设置
   * @type {string}
   */
  set value(name) {
    this.name = name
  }

  /**
   * 吃饭方法(该方法必须被子类重写)
   * @abstract
   */
  eat() {
  }
}

/**
 * 一个关于人的类,继承自 Animal 类
 * @extends {Animal}
 */
class Person extends Animal {
  /**
   * 吃饭方法
   * @override
   */
  eat() {
    console.log('I eat food.')
  }

  /**
   * 获取他说的话
   * @param {string} [words = '']
   * @return {string}
   */
  getWords(words = '') {
    return `${this.name} said: ${words}`
  }

  /**
   * 获取人的信息
   * @return {Object}
   * @property {string} name 名称
   * @property {number} age 年龄
   */
  getInfo() {
    return {
      name: this.name,
      age: this.age
    }
  }

  /**
   * 设置人的信息
   * @param {Object} param
   * @param {string} param.name 名称
   * @param {number} [param.age = 10] 年龄
   */
  setInfo({name, age = 10}) {
    this.name = name
    this.age = age
  }
}

const person = new Person('zjt', 29, ['eat', 'speek', 'run'])
person.name = 'zhaojintian'
console.log(person.getWords('Hello.'))