1.推荐使用airbnb 编码规范

2. 命名规范

ECMAScript 规范中标识符采用驼峰大小写格式,驼峰命名法由小(大)写字母开始,后续每个单词首字母都大写。根据首字母是否大写,分为两种方式:

  1. Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo、UserInfo、ProductInfo

  2. Camel Case 小驼峰式命名法:首字母小写。eg:studentInfo、userInfo、productInfo

标识符,则包括变量、函数名、类名、属性名和函数或类的参数,每个命名方法又略有不同,下面详细解释一下:

2.1 变量

命名方法:小驼峰式命名法。
命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)
命名建议:尽量在变量名字中体现所属类型,如:length、count等表示数字类型;而包含name、title表示为字符串类型。

eg:

  1. // 增,删,改,查
  2. // add addFor ...
  3. // remove removeFor ...
  4. // update removeFor...
  5. // addOrUpdate addOrUpdate ...
  6. // query queryFor ...
  7. // queryList queryFor ... 分页 or others,
  8. // queryDetail queryFor ... 详情
  9. // queryEmunsFor ... 枚举
  10. // 类似触发click的方法命名 推荐用handle做前缀,(on做前缀备用)
  11. // 组件上对应handle方法的属性名,用on...,基础组件命名尽量简洁
  12. // 文件夹命名,组件级目录用类名的命名规则,
  13. // 其余用snake命名(全小写,下划线分割,例如: components_map/Leaflet/Test)
  14. // 适当按模块划分目录结构(类似组件按业务模块区分),
  15. // 好的命名方式
  16. let maxCount = 10;
  17. let tableTitle = 'LoginTable';
  18. // 不好的命名方式
  19. let setCount = 10;
  20. let getTitle = 'LoginTable';

2.2 常量

命名方法:名称全部大写。
命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词。

eg:

  1. const MAX_COUNT = 10;
  2. const URL = 'http://www.foreverz.com';

2.3 函数

命名方法:小驼峰式命名法。
命名规范:前缀应当为动词。
命名建议:可使用常见动词约定

动词 含义 返回值
can 判断是否可执行某个动作(权限) 函数返回一个布尔值。true:可执行;false:不可执行
has 判断是否含有某个值 函数返回一个布尔值。true:含有此值;false:不含有此值
is 判断是否为某个值 函数返回一个布尔值。true:为某个值;false:不为某个值
get 获取某个值 函数返回一个非布尔值
set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
load 加载某些数据 无返回值或者返回是否加载完成的结果

eg:

  1. // 是否可阅读
  2. function canRead(): boolean {
  3. return true;
  4. }
  5. // 获取名称
  6. function getName(): string {
  7. return this.name;
  8. }

2.4 类 & 构造函数

命名方法:大驼峰式命名法,首字母大写。
命名规范:前缀为名称。

eg:

  1. class Person {
  2. public name: string;
  3. constructor(name) {
  4. this.name = name;
  5. }
  6. }
  7. const person = new Person('mevyn');

2.5 类的成员

类的成员包含:

  1. 公共属性和方法:跟变量和函数的命名一样。

  2. 私有属性和方法:前缀为_(下划线),后面跟公共属性和方法一样的命名方式。

eg:

  1. class Person {
  2. private _name: string;
  3. constructor() { }
  4. // 公共方法
  5. getName() {
  6. return this._name;
  7. }
  8. // 公共方法
  9. setName(name) {
  10. this._name = name;
  11. }
  12. }
  13. const person = new Person();
  14. person.setName('mervyn');
  15. person.getName(); // ->mervyn

3. 注释规范

js 支持三种不同类型的注释:行内注释、单行注释和多行注释:

3.1 行内注释

说明:行内注释以两个斜线开始,以行尾结束。
语法:code // 这是行内注释
使用方式://(双斜线)与代码之间保留一个空格,并且//(双斜线)与注释文字之间保留一个空格。
命名建议

  1. // 用来显示一个解释的评论
  2. // -> 用来显示表达式的结果,
  3. // >用来显示 console 的输出结果,

eg:

  1. function test() { // 测试函数
  2. console.log('Hello World!'); // >Hello World!
  3. return 3 + 2; // ->5
  4. }

3.2 单行注释

说明:单行注释以两个斜线开始,以行尾结束。
语法:// 这是单行注释
使用方式:单独一行://(双斜线)与注释文字之间保留一个空格。
eg

  1. // 调用了一个函数;1)单独在一行
  2. setTitle();

3.3 多行注释

说明:以 /* 开头, */ 结尾
语法/* 注释说明 */
使用方法:若开始/*和结束*/都在一行,推荐采用单行注释。若至少三行注释时,第一行为/*,最后行为*/,其他行以*开始,并且注释文字与*保留一个空格。
eg:

  1. /*
  2. * 代码执行到这里后会调用setTitle()函数
  3. * setTitle():设置title的值
  4. */
  5. setTitle();

3.4 函数(方法)注释

说明:函数(方法)注释也是多行注释的一种,但是包含了特殊的注释要求,参照JSDoc
语法

  1. /**
  2. * 函数说明
  3. * @关键字
  4. */

常用注释关键字:(只列出一部分,并不是全部)

注释名 语法 含义 示例
@param @param 参数名 {参数类型} 描述信息 描述参数的信息 @param name {String} 传入名称
@return @return {返回类型} 描述信息 描述返回值的信息 @return {Boolean} true:可执行;false:不可执行
@author @author 作者信息 [附属信息:如邮箱、日期] 描述此函数作者的信息 @author 张三 2015/07/21
@version @version XX.XX.XX 描述此函数的版本号 @version 1.0.3
@example @example 示例代码 演示函数的使用 @example setTitle(‘测试’)
  1. /**
  2. * 合并Grid的行
  3. * @param grid {Ext.Grid.Panel} 需要合并的Grid
  4. * @param cols {Array} 需要合并列的Index(序号)数组;从0开始计数,序号也包含。
  5. * @param isAllSome {Boolean} :是否2个tr的cols必须完成一样才能进行合并。true:完成一样;false(默认):不完全一样
  6. * @return void
  7. * @author polk6 2015/07/21
  8. * @example
  9. * _________________ _________________
  10. * | 年龄 | 姓名 | | 年龄 | 姓名 |
  11. * ----------------- mergeCells(grid,[0]) -----------------
  12. * | 18 | 张三 | => | | 张三 |
  13. * ----------------- - 18 ---------
  14. * | 18 | 王五 | | | 王五 |
  15. * ----------------- -----------------
  16. */
  17. function mergeCells(grid: Ext.Grid.Panel, cols: Number[], isAllSome: boolean = false) {
  18. // Do Something

4.现阶段项目开发约定

4.1 dva项目

操作 前缀 后缀 中间描述 简单场景(前缀+后缀) 复杂场景(前缀+中间描述+后缀) 推荐场景 备注
add User add addUser model
remove User remove removeUser model
update User update updateUser model
query User query queryUser model
增或改 addOrUpdate User addOrUpdate addOrUpdateUser model
查询列表 query List User queryList queryUserList model
查询详情 query Detai User queryDetail queryUserDetail model
查询枚举 queryEmuns AboutUser queryEmuns queryEmunsAboutUser 中间描述推荐统一用About做前缀
处理事件 handle 事件名(例如:Click) ListItem handleClick handleListItemClick 组件
props传递事件 on 事件名(例如:Click) ListItem onClick onListItemClick 组件 基础组件尽量选择简单场景命名
项目文件夹命名
- 文件夹命名,组件级目录用类名的命名规则,(首字母大写,例如:Leaflet/Test)
- 其余用snake命名(全小写,下划线分割,例如: components_map)

- 当一个文件夹目录下的文件内容过多时,可以考虑适当通过多个文件夹做分类,尽量做到层次分明;(例如:components组件目录下组件过多,可以适当按业务模块分类(User/Role/…))

react书写规范参考中文版地址

vue书写规范参考