注释规范
本项目采用jsDoc标准注释规范,并使用esdoc作为注释文档生成和管理工具
在本项目中使用如下参考范例规则
关于jsDoc 参考:
http://usejsdoc.org/
关于esdoc 参考:
https://esdoc.org/manual/tags.html
通用
@deprecated - 弃用
句法: @deprecated [description]
/**
 * @deprecated use MyClassEx instead of this.
 */
class MyClass{...}
@example - 样例
句法: @example <JavaScript>
用于解释函数/类/变量等的用法
/**
 * @example
 * let myClass = new MyClass();
 * let result = myClass.foo();
 * console.log(result);
 * 
 * @example
 * let result = MyClass.bar();
 * console.log(result);
 */
class MyClass{...}
@ignore
句法: @ignore
忽略
/**
 * @ignore
 */
class MyClass{...}
@todo
句法: @todo <description>
/**
 * @todo support multi byte character.
 * @todo cache calculation result.
 */
class MyClass{...}
@version
句法: @version <version>
/**
 * @version 1.2.3
 */
class MyClass{...}
类 class
@extends
句法: @extends <identifier>
/**
 * @extends {SuperClass1}
 * @extends {SuperClass2}
 */
class MyClass extends mix(SuperClass1, SuperClass2) {...}
@implements
句法: @implements <identifier>
/**
 * @implements {MyInterface1}
 * @implements {MyInterface2}
 */
class MyClass {...}
@interface
句法: @interface
/**
 * @interface
 */
class MyInterface {...}
方法/函数
@abstract
句法: @abstract
class MyClass {
  /**
   * this method must be overridden by sub class.
   * @abstract
   */
  method(){...}
}
@override
句法: @override
class MyClass extends SuperClass {
  /**
   * @override
   */
  method(){...}
}
@param
句法: @param <type> <name> [-] [description]
class MyClass {
  /**
   * @param {number} p - this is p description.
   */
  method(p){...}
}
@return
句法: @return <type> [description]
class MyClass {
  /**
   * @return {number} this is description.
   */
  method(){...}
}
@throws
句法: @throws <identifier> [description]
注: 关联try/catch/throw语句使用
class MyClass {
  /**
   * @throws {MyError1} throw error when foo.
   * @throws {MyError2} throw error when bar.
   */
  method(){...}
}
测试 test
@test
句法: @test <identifier>
/** @test {MyClass} */
describe('MyClass has foo bar feature', () => {
  /** @test {MyClass#baz} */
  it('MyClass#baz returns magic value', () => {
    assert(true);
  });
});
类型句法 Type Syntax
@param @return @type @typedef 支持的type syntax.
Simple
/**
 * @param {number} param - this is simple param.
 */
function myFunc(param){...}
Array
/**
 * @param {number[]} param - this is array param.
 */
function myFunc(param){...}
Object
/**
 * @param {Object} param - this is object param.
 * @param {number} param.foo - this is property param.
 * @param {string} param.bar - this is property param.
 */
function myFunc(param){...}
Record
/**
 * @param {{foo: number, bar: string}} param - this is object param.
 */
function myFunc(param){...}
/**
 * this is nullable property
 * @param {{foo: ?number, bar: string}} param - this is object param.
 */
function myFunc(param){...}
/**
 * this is object destructuring.
 * @param {{foo: number, bar: string}} param - this is object param.
 */
function myFunc({foo, bar}){...}
Generics
/**
 * @param {Array<string>} param - this is Array param.
 */
function myFunc(param){...}
/**
 * @param {Map<number, string>} param - this is Map param.
 */
function myFunc(param){...}
/**
 * @return {Promise<string[], MyError>} this is Promise return value.
 */
function myFunc(){...}
Function
/**
 * @param {function(foo: number, bar: string): boolean} param - this is function param.
 */
function myFunc(param){...}
Union
/**
 * @param {number|string} param - this is union param.
 */
function myFunc(param){...}
Nullable/Not Nullable
/**
 * @param {?number} param - this is nullable param.
 */
function myFunc(param){...}
/**
 * @param {!Object} param - this is not nullable param.
 */
function myFunc(param){...}
/**
 * @param {?(number|string)} param - this is nullable and union param.
 */
function myFunc(param){...}
Spread
/**
 * @param {...number} param - this is spread param.
 */
function myFunc(...param){...}
Optional/Default
/**
 * @param {number} [param] - this is optional param.
 */
function myFunc(param){...}
/**
 * @param {number} [param=10] - this is default param.
 */
function myFunc(param){...}
React
全局变量
/**
 * 使用Card.SimpleCard组件
 */
const { SimpleCard } = Card;
/**
 * item 说明变量用途
 */
const item = {};
公共组件
@reactProps react组件 props属性,必填
@example 说明组件使用方法
@extends 说明继承组件
@return 默认返回React.element,必填
/**
 * MyComponent 自定义React组件
 * @extends {PureComponent} - React.PureComponent
 * @reactProps {?string} [className=my-component] - 组件react className属性
 * @return {Object} React.element
 * @example
 * import React from 'react';
 * import { FormItem } from 'components/MyComponent';
 *
 * const Test = (props) => {
 *   return (
 *     <MyComponent />
 *   );
 * };
 */
class MyComponent extends React.PureComponent {
  render(){...}
}
功能/页面组件
@author 作者
@reactProps react组件 props属性,必填
@example 说明组件使用方法,可选
@extends 说明继承组件
@return 默认返回React.element,必填
/**
 * MyComponent 自定义React组件
 * @author yourname <yourname@hand-china.com>
 * @extends {PureComponent} - React.PureComponent
 * @reactProps {?string} [className=my-component] - 组件react className属性
 * @return {Object} React.element
 * @example
 * import React from 'react';
 * import { FormItem } from 'components/MyComponent';
 *
 * const Test = (props) => {
 *   return (
 *     <MyComponent />
 *   );
 * };
 */
class MyComponent extends React.PureComponent {
  render(){...}
}
数据模型 model
- 
注明 namespace用途
- 
注明 state内各状态变量用途
- 
effects异步方法详细注明方法逻辑及用途
- 
reducers状态处理方法需要详细注明方法逻辑及用途
import {
  query,
} from '../../services/testService';
export default {
  namespace: 'test', // 测试model
  state: {
    code: {}, // 编码
    list: [], // 数据集合
  },
  effects: {
    // 查询list数据
    *query({ payload }, { put, call }) {
      const response = yield call(query, payload);
      if (response && !response.failed) {
        yield put({
          type: 'updateStateReducer',
          payload: {
            list: response
          },
        });
      }
    },
  },
  reducers: {
    // 合并state状态数据,生成新的state
    updateStateReducer(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
  },
};
接口 service
@async 一般情况下使用async函数需要注明
@params 说明参数
@returns 返回值
/**
 * 查询 说明接口逻辑用途
 * @async
 * @function queryMembers 接口函数名称
 * @param {object} params - 接口参数
 * @param {!number} [params.page = 0] - 数据页码
 * @param {!number} [params.size = 10] - 分页大小
 * @returns {object} fetch Promise 默认返回值
 */
 export async function query(params) {
  return request('/api', { query: params });
}
js文件说明注释
description 说明文件名称及用途
@date 创建日期
@author 作者
@version 版本号
@copyright 公司信息
// test.js
/**
 * test - 测试代码
 * @date: 2018-7-24
 * @author: yourname <yourname@hand-china.com>
 * @version: 0.0.1
 * @copyright Copyright (c) 2018, Hand
 */
 // ... js code
css/less样式文件注释
description 说明文件名称及用途
@date 创建日期
@author 作者
@version 版本号
@copyright 公司信息
// test.less
/*!
    test - 平台角色分配-列表页面
    @date 2018-6-23
    @author yourname <yourname@hand-china.com>
    @version 0.0.1
    @copyright Copyright (c) 2018, Hand
*/
// ... style code