前端命名那些事儿

骂谁是程序员呢
1,804 阅读6分钟

一、前言

代码是写给人看的，偶尔让机器执行一下。在编码过程中，命名是一个重要的技术细节；良好的名称会加强代码的可读性和可维护性，它在一定程度上影响着软件质量和研发效率；同时命名也是件困难的事情，开发人员经常会为怎样取个称心如意的名称而纠结；接下来通过一些命名原则和技巧并结合研发相关场景为大家提供些参考。

二、原则和技巧

通常，好的名称都遵循可读可写、通俗易懂、名副其实的原则 。可读指名称可以通过嘴巴读出声音且不拗口，方便同行之间进行描述和沟通；可写指名称长度不能太长，不能有特殊字符，不需要通过组合键就可以快速完成编码。通俗易懂指在可读可写的基础上使用那些简单的常用的词汇，这样的名称会更具有普适性，方便绝大多数的人去理解。名副其实指在通俗易懂基础上要确保名称表达的语义要准确，不能有二义性。

有些常用策略和技巧，可以很好的帮助开发人员进行命名工作，整理如下：

  1. “min-length && max-information”原则：使用最少的字符表达最多的信息。
  2. 名称的语义完整性优先级高于名称的长度。
  3. 尽量使用开发领域常用的词汇和单词缩写。
  4. 使用名词或动名词短语描述实体，使用动词短语表达动机。
  5. 允许存在差异性，只要遵循可读可写、通俗易懂、名副其实的原则。
  6. 虚实结合，抽象的名称一定要关联内容上下文。
  7. 学习优秀开源项目的命名方式，勤加练习形成自己的风格。
  8. 完美是不存在的，平衡之道才是长久之计。

三、相关命名场景

在开发过程中很多地方涉及到命名工作，比较常见的场景有：工程仓库命名、Git分支命名、目录及文件命名、代码中的命名。接下来结合这些场景介绍一下常见的命名方法。

工程仓库命名

工程目录的名称通常是根据其业务特点来命名，一定程度上要反应出要做的事情，通常使用简短的小写的英文单词或缩写。有时为了确保语义性，名称会长一点，惯例上会使用连字符-把相关的词汇连起来。案例如下：

茅台项目名称：moutai
茅台预售项目名称：moutai-presale
茅台活动项目名称：moutai-activity

Git分支命名

日常开发工作中涉及到新建分支的场景基本有三个：功能迭代、上线发布、问题修复，同时也有三个常用的英文名称：feature、release、hotfix与之对应，并作为分支名称的前缀。分支名称通常采用前缀+描述+日期的结构进行命名；前缀部分固定，日期部分可选，描述部分使用简短的英文单词或短语表示要做什么事情；描述部分如若过长通过驼峰或连字符-联结。行业内有两种常见的命名方式，主要区别是对分支名称分割方案的不同，案例如下：

方案一：feature-removeLog、release-20210828、hotfix-issue2021
方案二：feature/moutai-presale/removeLog 、release/moutai-activity/20210828、hotfix/presale/issue2021

这两种方案各有千秋；方案一简洁，适合用在单个Git仓库单个项目中；方案二描述性更好，适合用在单个Git仓库多个项目中，它还有分组管理的内涵；工作中，根据实际情况灵活运用这两套方案即可。

目录及文件命名

目录和文件的命名一般遵循两个逻辑：写实和写意；写实是根据具体内容要做什么，由内到外的命名方法；写意是从宏观管理思维，由外到内的命名方法。目录用来管理文件，常用写意的命名方法；文件用来管理内容，多采用写实的命名方法，有时也会根据文件用途使用写意的命名方法。

写意的名称按照惯例多使用小写的英文名词或名词短语命名，短语通过连字符-联结。案例如下：

/src/components/notice-bar/
/vue/src/core/global-api/
/package-lock.json、/tsconfig.json

写实的名称根据文件具体内容来命名；如JavaScript文件的名称通常会关联具体的代码内容，使用驼峰式的命名规则。案例如下：

// now.js
export default Date.now || function () {
    return new Date().getTime()
}
// isArray.js
const { toString } = ({});
const arrayTypeString = toString.call([]);
export default Array.isArray || function(value) {
    return toString.call(value) === arrayTypeString;
}

// Queue.js
class Queue {
    constructor() { this.store = []; }
    enqueue(elem) { this.store.push(elem); }
    dequeue() { return this.store.shift(); }
    front() { return this.store[0]; }
    back() { return this.store[this.store.length - 1]; }
    toString() { return this.store; }
    isEmpty() { return this.store.length === 0; }
}

export default Queue;

代码中的命名

前端代码主要涉及CSS和JavaScript两部分。CSS编码的底层逻辑是建立一种HTML元素选择器到其样式呈现的映射关系，并不会有很多的逻辑计算；所以，在CSS编码中选择器命名跟样式实现相比显着微不足道，后面会简要介绍CSS命名规则。在JavaScript编码中有大量的计算过程，计算会涉及到数据存储和数据交互，所以会有很多变量命名工作，下面着重介绍JavaScript的命名方法和技巧。

总则：在JavaScript中，标识符只能包含字母或数字或下划线（“_”）或美元符号（“$”），且不能以数字开头。

JavaScript命名方法

  1. 常量采用大写字母和下划线来组合命名，使用名词或动名词短语表示：const SUCCESS_CODE = 1;
  2. 变量采用小驼峰式命名，使用名词或动名词短语表示：var statusCode = 1;、let statusCode = 1;
  3. 函数或函数表达式采用小驼峰式命名，使用动词短语表示：function sayHi(){}、const sayHi = ()=>1
  4. 类或命名空间采用大驼峰式命名，使用名词或动名词短语表示：class Queue{}、const Cookie= {};
  5. 正则表达式采用小驼峰+后缀RE方式命名，使用名词或动名词短语表示：const dashAlphaRE=/-([a-z])/g;
  6. React函数组件采用大驼峰式命名，使用名词或动名词短语表示：function Alert(props) { return <div />; }
  7. TypeScript中的interface和类型声明采用大驼峰式命名，使用名词或动名词短语表示。

JavaScript命名技巧

  1. 过程变量采用领域高频词汇，可减少命名成本，如：res、req、ret、arr、obj、val、key、elem等。
  2. 巧用下划线_，防止命名冲突问题。
  3. 工具加持：百度翻译、CODELF变量搜索工具。

CSS命名规则

  1. 选择器名称不能以数字、下划线_、连字符-等特殊字符开头，必须使用字母开头。
  2. 选择器名称按照惯例采用小写字母和连字符-来组合命名，特殊情况除外。
  3. 行业内命名方法论推荐：BEM命名方法论。

四、结语

基本上，所有开发相关的命名纠结，都是因为缺少衡量标准和个人偏好造成的。放下没有逻辑的偏好，搞个可执行的标准就会得到解放。

avatar
文章
阅读
粉丝