• 注释规范


    本项目采用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

    1. 注明namespace用途

    2. 注明state内各状态变量用途

    3. effects异步方法详细注明方法逻辑及用途

    4. 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