Skip to content

Latest commit

 

History

History
282 lines (206 loc) · 7.13 KB

命名规范.md

File metadata and controls

282 lines (206 loc) · 7.13 KB
Raw

1.命名规范

JavaScript常用小驼峰命名.

匈牙利命名法

匈牙利(Hungary)命名法又被称为HN命名法.

基本组成: 变量名 = 属性 + 类型 + 对象描述. 其中每一个对象的名称都要求有明确含义, 可以取对象名字全程或名字的一部分.

eg:

  1. 表单名称为form, 可以简写为frm, 当变量名称为Switchboard时, 变量全称应为frmSwitchboard. 这样可以很容易从变量名看出Switchboard是一个表单, 同样, 如果此变量类型为标签, 那么就该命名成lblSwitchboard.
  2. 在windowsForm应用程序中, 控件采用匈牙利命名法.
    • TextBox 类型, 前缀加txt, 命名为txtCustomName, txtAddress等.
    • Button 类型, 前缀加btn, 命名为btnSave, btnDelete等.

常用小写字母前缀:

前缀 类型
a 数组Array
b 布尔值Boolean
by 字节Byte
c 有符号字符Char
cb 无符号字符Char Byte (很少有人使用)
cr 颜色参考值ColorRef
cx, cy 坐标差ShortInt (长度)
dw Double Word
fn 函数
... 还有很多自行查取

驼峰命名法

驼峰命名法由小(大)写字母开始, 后续每个单词首字母都大写. 根据首字母是否大写, 分为两种方式:

  • Pascal Case 大驼峰命名法: 首字母大写. eg: StudentInfo、UserInfo、ProductInfo.
  • Camel Case 小驼峰命名法: 首字母小写. eg: studentInfo、userInfo、productInfo.

下划线命名法

与驼峰命名法差不多, 表现形式有不同, 驼峰命名法每个单词之间首字母用大写, 而下划线命名法则使用下划线. eg: student_info、user_info、product_info.

例如: Python语言中使用下划线命名.

项目命名

采用小驼峰命名法.

eg: myProjectName

目录命名

参照项目命名规则. 有复数结构时, 要采用复数命名法.

eg: scripts、styles、images、dataModels

文件命名

参照项目命名规则. 不同文件只是后缀名不同.

  • JS: detailHeader.js.
    1. 通常: detailHeader.js.
    2. 组件: DetailList.js大写字母开头.
    3. 配置文件: default.conf.js.
    4. 环境变量: dev.env.js.
    5. 以及xxx.base.js、xxx.dll.js、xxx.min.js、xxx.common.js等等.
  • CSS,SCSS: detailHeader.scss.
  • HTML: detailHeader.html.

1.1 变量

规范: 前缀为名词. (函数名前缀为动词, 区分变量和函数).

建议: 尽量在变量名字中提现所属类型, 如: length、count等表示数字类型; 包含name、title表示为字符串类型.

// 好的命名方式
let maxCount = 10;
let tableTitle = 'sysTable';

// 不好的命名方式
let setCount = 10;
let getTitle = 'sysTable';

1.2 常量

方法: 全部大写.

规范: 使用大写字母和下划线来组合命名, 下划线用以分割单词.

const MAX_COUNT = 10;
const URL = 'http://google.com';

1.3 函数

规范: 前缀为动词.

建议: 可使用常见动词约定:

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

1.4 类 & 构造函数

方法: 大驼峰命名法, 首字母大写.

规范: 前缀为名词.

class Person {
    // ...
}
const person = new Person();

1.5 类的成员

成员有:

  1. 公有属性和方法: 与变量和函数命名方式相同.
  2. 私有属性和方法: 前缀为_(下划线), 后面与 1 命名方式相同.
class Person {
    // 公有方法
    getName() {
        return this._name;
    }
    // 公有方法
    setName(name) {
        this._name = name; // 私有属性
    }
}
const person = new Person();
person.setName('fgk');
person.getName(); // -> fgk

1.6 循环

循环中参数使用i, j, k等, 或有意义参数名.

eg:

persons.forEach(person => {
    // ...
});

1.7 this替代名

使用self来代替this.

eg:

const self = this;

2. 注释规范

JavaScript支持三种不同类型的注释:

  • 行内注释.
  • 单行注释.
  • 多行注释.

2.1 行内注释

语法: code // 这是行内注释.

使用方法: //(双斜线)与代码之间保留一个空格, 并且//(双斜线)与注释文字之间保留一个空格.

建议:

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

eg:

function test() { // 测试函数
    console.log(123); // >123
    return 3 + 2; // ->5
}

2.2 单行注释

语法: // 这是单行注释.

使用方式: 单独占一行. //与注释文字之间保留一个空格.

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

2.3 多行注释

说明: 以/*开头, */结尾.

语法: /* 注释说明 */.

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

eg:

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

2.4 函数(方法)注释

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

语法:

/**
* 函数说明
* @关键字
*/

常用注释关键字(部分):

注释名 语法 含义 实例
@param @param 参数名 {参数类型} 描述信息 描述参数的信息 @param name {String} 传入名称
@return @return {返回类型} 描述信息 描述返回值的信息 @return {Boolean} true: 可执行; false: 不可执行;
@author @author 作者信息[附属信息: 如邮箱、日期] 描述此函数作者的信息 @author 张三 2018-11-23
@version @version XX.XX.XX 描述此函数的版本号 @version 1.0.3
@example @example 示例代码 演示函数的使用 @example setTitle('测试') 
/**
 * Book类，代表一个书本.
 * @constructor
 * @param {string} title - 书本的标题.
 * @param {string} author - 书本的作者.
 */
function Book(title, author) {
    this.title = title;
    this.author = author;
}
Book.prototype = {
    /**
     * 获取书本的标题
     * @returns {string}
     */
    getTitle: function() {
        return this.title;
    },
    /**
     * 设置书本的页数
     * @param pageNum {number} 页数
     */
    setPageNum: function(pageNum) {
        this.pageNum = pageNum;
    }
};