• 开发规范


    开发规范

    目的

    出于加快开发流程,提高代码质量,减少不必要的沟通和方便维护代码等目的,制定用于Hzero & Choerodon-UI 集成前端的开发规范。

    以下主要关注于集成项目的一些规范开发说明,与Hzero 规范冲突时遵循此规范,Hzero 项目前端开发准备工作参考: HZERO 前端开发规范

    目录结构

    项目

    |-- opt                                  # 根目录
        |-- .babelrc
        |-- .editorconfig
        |-- .eslintignore
        |-- .eslintrc.js
        |-- .gitignore
        |-- .prettierignore
        |-- .prettierrc
        |-- .stylelintrc
        |-- README.md
        |-- jsconfig.json
        |-- lerna.json
        |-- package.json
        |-- yarn.lock
        |-- config                           # 配置文件夹
        |   |-- alias.js
        |   |-- compileBuildEnv.js
        |   |-- compileStartEnv.js
        |   |-- compileTestEnv.js
        |   |-- env.js
        |   |-- paths.js
        |   |-- routers.js                   # 路由
        |   |-- theme.js                     # c7n-ui 变量覆盖文件
        |   |-- webpack.config.js
        |   |-- webpack.dll.config.js
        |   |-- webpackDevServer.config.js
        |   |-- jest
        |-- mock
        |-- public
        |-- scripts
        |-- src
            |-- index.js
            |-- index.less                  # 修改覆盖全局样式
            |-- router.js
            |-- serviceWorker.js
            |-- setupProxy.js
            |-- models                      # model 文件夹
            |-- routes                      # 界面文件夹
            |-- services                    # service 文件夹
            |-- utils                       # 公共方法 / 组件 文件夹
            |   |-- c7nUIConfig.js          # c7n-ui 全局化配置
    

    界面

    routes
    |
    |-- modules1                                # page1
        |-- detail                              # 详情界面 page1
        |    |-- DetailPage.js                  # 页面以 Page 为后缀
        |    |-- InputFieldTable.js             # Table 以 Table 为后缀
        |    |-- LogVIewModal.js                # 弹窗 以 Modal 为后缀
        |-- list                                # 列表界面 page2
        |    |-- ListPage.js                    # 页面以 Page 为后缀
        |-- stores                              # 存放 DataSetProps 配置文件
        |    |-- xxxHeaderDS.js                 # DataSetProps 以 DS 为后缀
        |    |--  xxxLineDS.js
    

    代码规范

    基本风格

    import classNames from 'classnames';
    
    // simple
    <li className={active ? 'active' : null} />
    
    // complex
    const classString = classNames(`${prefixCls}-form-editor`, {
      dragging,
    });
    <li className={classString} />
    

    能够表明这个函数的用处。

    // bad 
    handleSave() {}
    
    // good,可以带上模块名称
    handleSaveCompany() {}
    

    能够表明这个变量的用处

    // bad
    visible: false
    
    // good
    modalVisible: false
    
    // bad
      <TableList
        search={this.handleSearchCalendar}
      />
    
    // good
      <TableList
        onSearch={this.handleSearchCalendar}
      />
    

    注释规范

    /**
     * module - 
     * @Author: xxx <xxx@hand-china.com>
     * @Date: 2019-08-14 14:31:25
     * @LastEditTime: 2019-08-14 17:34:26
     * @Copyright: Copyright (c) 2018, Hand
     */
    
    [操作][:][空格][commit内容]
    

    [commit内容]请详细填写具体的文件新增/修改/删除操作过程

    例如

    fix: 修复查询功能bug
    
    fix:修复bug
    feat:更新/新增文件/新特性
    modify:重命名
    delete:删除文件
    docs: 文档调整补充
    

    patches:

    $ git commit -a -m "fix(parsing): fixed a bug in our parser"
    

    features:

    $ git commit -a -m "feat(parser): we now have a parser \o/"
    

    breaking changes:

    $ git commit -a -m "feat(new-parser): introduces a new parsing library
    BREAKING CHANGE: new library does not support foo-construct"
    

    other changes:

    You decide, e.g., docs, chore, etc.

    $ git commit -a -m "docs: fixed up the docs a bit"
    

    CSS/LESS相关

    参 数 说 明
    renderer 单元格渲染回调
    command 行操作按钮集,该值为数组 或 返回数组的钩子
               <Table
                 buttons={this.buttons}
                 dataSet={this.ds}
                 columns={this.columns}
                 queryFields={{
                   queryFieldName: ReactNode,
                 }}
               />
    

    DataSet

    {
        dataKey: null,
        transport: {
          read: {
            url: `/lc/v1/organizations/${orgId}/view/${code}`,
            method: 'get',
          },
        },
    }
    

    Form

    try {
        await this.ds.submit();
    } catch(error) {
        // 相应处理
        // error 返回的错误信息
        // if xxx
    }
    
    // ds 配置字段 id code name
    // 新建提交数据
    id:xx
    code: xx
    name: xx
    __status: create
    
    // 如果查询获取数据 id code name queryName
    id:id1
    code: code1
    name: name1
    queryName: ok
    // 那么编辑修改 code/name 后提交的数据
    id: id1
    code: code2
    name: name2
    queryName: ok
    

    即:查询到的系统字段,比如who字段,token字段等等, 这些会原路返回给后端,没有配field的字段不会对数据进行加工。