[前端] 只知道驼峰命名法?看看这些编程命名规范

又菜又爱玩，在死亡边缘疯狂抹茶⚫️⚪️

/ 就像是语文中给书名加《书名号》,标题加粗等等一样,为了更高的辨识度易读性,编程上规定了若干种命名法.由于是拼音文字，所以主要通过区分大小写和连接符等上表示区别 /

001 典型的几个需要记忆的要素有:

标识符长度
大小写字母
数字
多个单词之间的连接符(连字符

比如以下几种不同写法，你可知他们叫什么？

two-words
two_words
TwoWords
twoWords
fnChangeCase

002 经典命名法

2.1 kebab-case 烤肉串命名法

字母小写
连字符：-（hyphens）

2.2 camelCase 小驼峰命名法

首单词小写，后每个单词大写
不使用连接符

2.3 PascalCase 大驼峰命名法

每个单词都大写

2.4 snake_case 小蛇式命名法

字母小写
下划线连接

2.5 MACRO_CASE 大蛇式命名法

大写字母
下划线连接

003 JavaScript 中常见命名法

3.1 常见类型

\begin{array}[b] {|c|c|} \hline 标识符类型&命名规则&举例\\ \hline && XMLHttpRequest / TypeError\\ 类/数据类型/构造函数& 名词/大驼峰命名法/全称&RegExp/DOMObject\\ & &\color{red}{\text{class}}\ ImageSprite\left\{ \right\} \\ \hline & & getElementById()\\ 函数方法&动词打头/小驼峰命名法& querySelector()\\ && createCDATASection()\\ \hline 变量 &名词打头/小驼峰命名法& \color{red}{\text{let}}\ i\\ &开头不使用下划线和美元符号& \color{red}{\text{let}}\ myCount = 10 \\ &&\color{red}{\text{let}}\ tableTitle ='用户数据表' \\ \hline 常數& 大蛇式命名法/数字不放首位&\color{red}{\text{const}}\ MIN\_COUNT=10\\ && \color{red}{\text{const}}\ URL = 'www.baidu.com'\\ \hline \end{array}\\

3.2 其他设计规范

3.2.1 函数前缀动词命名建议

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

例如

// 可以写入
function canWrite(): boolean {
  return true;
}
// 获取列表
function getList(): string {
  return this.list;
}

3.2.2 类的成员

公共属性和方法：同普通变量和函数命名一致
私有属性和方法：前缀添加 _ 下划线

class Person {
  //私有属性
  private _name: string;
  constructor() { }
  // 公共方法
  getName() {
    return this._name;
  }
  // 公共方法
  setName(name) {
    this._name = name;
  }
}
const person = new Person();
person.setName('阿斯蒂芬');
person.getName(); // ->阿斯蒂芬