编写高质量可维护的代码：优雅命名

这是第 87 篇不掺水的原创，想获取更多原创好文，请搜索公众号关注咱们吧~ 本文首发于政采云前端博客：编写高质量可维护的代码：优雅命名css

前言

俗话说得好，万事开头难。而对于前端 coder 来讲，每次新项目、新需求来的时候，我想你们最苦恼的每每就是如何去命名，不管是项目名称、页面的文件名称亦或是代码中的方法名称，对于我来讲，但凡名字想好了之后，我以为需求就已经写完一半了。html

如何才能更好，更优雅的去解决这些命名问题呢？在这以前，先随我看一些不合适的命名示例吧。前端

不合适的命名

咱们先来看一些例子：git

无心义的，抽象的，任何地方可使用，谁都不知道你这里用的命名来源是谁

// bad
const data;
const info;
const tool;
复制代码

简称，单词的简称或者缩写很容易让人没法肯定具体指代什么

// bad
const comp;
const crt_date;

// good
const components;
const company;
const current_date;
复制代码

数字或者字母结尾的命名，让其余人没法获取这些之间的区别

// bad
const button1;
const button2;
const info1;

// good
const importButton;
const userInfo;
复制代码

全局的地方不要用前置或后置下划线，前置下划线一般表明了私有变量

// bad
const _firstName_ = 'Zcy';
const firstName_ = 'Zcy';
const _firstName = 'Zcy';

// good
const firstName = 'Zcy'
复制代码

命名规则

如何让命名更简单呢，只要遵循一些规则规范，总能将复杂的事情拆分开来，变成一件简单的事情。github

直白、有意义

想要让你的命名简单易懂，最简单的方式就是直白而且有意义，直接了当的在命名中体现出你这个命名的功能，或者描述，举个例子：web

// bad
function getInfo(){};
function formatList(){};
const data = [];

// good
function getUserInfo(){};
function formatNewsList(){};
const articleData = [];
复制代码

若是在页面中定义了上面这样的变量，哪一种写法可让你在没有注释的状况下，就能快速了解原做者的书写意图呢？（固然，代码中仍是须要一些必要注释的）。npm

因此在命名的时候，须要的就是直白、完备、有意义，让别人经过命名就能了解到这个名称（不管是变量、方法或者是样式名）背后的的含义，这样的命名就是高效的、易懂的。sass

听从惯例、标准

习惯使用业界习惯的命名标识，或者是约定俗成的书写习惯。markdown

用 id 当作数据标识命名，而不是 identifierapp
例如布尔值命名类型，一般只有两个值类型：真，假，根据不一样的使用场景，也能够有一些经常使用的命名方式

// 可见、状态等，可用 is+动词/形容词的方式
const isVisible;
const isLoading;

// 配置，选项等类型，能够用 withXxx、hasXxx 来标识是否有某个属性等,enableXxx 来表示是否开启配置
const withTab;
const hasPlan;
const enableFilter;
复制代码

例如方法命名，也可使用动词 + 名次类的组合命名方式，操做类方法 fetchXxx，getXxx，当须要根据某些属性获取数据时可用，getXxxByYxx 这类的命名，删除类方法 deleteXxx，格式化数据 formatXxx

// 数据获取方法
function getUserInfo(){};
function fetchSearchList(){};

// 须要根据一些属性去获取数据
function getGoodsById(){};
function queryUserByName(){};

// 删除数据
function deleteUser(){};
function removeGoodsItem(){};

// 格式化数据
function formatDate(){}；
function sortByDesc(){}
复制代码

规范约束

团队若是用统一的命名规范，那就必定要遵照，例如文件名的命名是大写字母开头的驼峰写法，那你的命名就不能再修改成其余方式，在规范建立之初或者修订时能够提出修改意见并进行讨论，但若是已经确立的，就不要再。去自由的破坏规范。

固然也可使用一些辅助手段帮助约束代码中的命名校验，**例如在 Eslint 配置中加入 id-match 或者 camelcase，前者能够直接经过正则配置本身须要的命名规范，后者则是直接采用了驼峰命名的规范约束 **。

这里也举例介绍一下在 VsCode 中 Eslint 的使用

首选电脑全局安装 eslint

npm install eslint -g
复制代码

VsCode 中安装 ESlint 插件而且启用

在本身项目中，执行 eslint --init 命令来建立项目的 .eslintrc.js 文件，以后能够在 .eslintrc.js 文件中的 rules 规则添加上规范的约束条件来使用这个规则

module.exports = {
    "rules": {
      "id-match": ["error", "^[a-z]+([A-Z][a-z]+)*$"],
      "camelcase": ["error", {"properties": "always"}]
    }
}
复制代码

项目中若是碰到不符合规范的就会直接报错提示

命名规范推荐

上面简单介绍了一些命名的规则，那么具体到实际操做中，咱们又有哪些较好的命名规范能够选择呢？下面根据不一样的使用场景，也简单给你们介绍一些常常推荐使用的命名规范。

项目名称、文件名称

项目或者单文件的命名方面，常见规则：

kebab-case：横短线命名，也叫串式命名法，小写字母的词组，中间加 - 拼接的方式，这种方式命名便于同类内容快速查找

// good
news-index;
news-list;
news-detail;
复制代码

camelcase：小驼峰命名，第一个单字以小写字母开始，第二个单字的首字母大写

// good
newsIndex;
newsList;
newsDetail;
复制代码

JavaScript

变量：经常使用小驼峰命名

// good
const userInfo;
const userAddressList;
const currentDate;
复制代码

所有使用大写字母，单词之间采用 _ 分割

// good 
const ITEM_LIST;
const PAGE_ITEM_LIST;
const DEFAULT_CONFIG;
复制代码

方法：小驼峰命名，而且推荐命名时添加一些动词类，能够帮助快速理解方法含义，例如以 handle 开头，中间 xxx 表示操做内容，show 表示具体操做， handlexxxxChange，handlexxxxShow，而好比数据获取能够用 get，fetch 这类

// 小驼峰命名
function getUserInfo(){};
function addSuplierInfo(){};

// 添加一些操做类的辅助命名
function handleUserInfoChange(){};
function handleTitleClick(){};
function fetchPageData(){};
复制代码

类名：大驼峰命名

export class CommonLogo;
export class CartCenter;
复制代码

css

BEM 规范

BEM 是一种命名 CSS 样式的命名方法和规范，全称 Block（块）、 Element（元素）、 Modifier（修饰符），想必不少人都比较熟悉了。

Block：通常能够看作是独立具备实际意义的模块部分，例如 header,container,menu 等
复制代码

Element：组成 Block 的一部分，没有具体的实际意义，通常也不独立使用，例如 menu item，list item，header title 等
复制代码

Modifier：通常是块或者元素的修饰状态或者行为，例如 disabled，color，checked 等
复制代码

而 BEM 的写法通常是.block-name__element-name--modifier-name，其中 Block 与 Element 之间链接是经过 __ 双下划线，Block，Element 与 Modifier 之间是经过 -- 双中划线进行链接，当使用less或者 sass 语法编写 css 时，经过嵌套语法也可以很简洁的书写这部分样式。

<div class="head">
	<div class="head__title">
    标题
    <div class="head__title--disabled">
      置灰内容
    </div>
  </div>
</div>
复制代码

.head {
  background-color: #fff;
  &__title {
    font-size: 14px;
    color: #666;
    &--disabled: {
    	color: #f00; 
    }
  }
}
复制代码

BEM 命名规范可让样式的命名更加模块化，组件之间结构独立，减小了命名之间的冲突，有着不错的易读性、维护性等等，但可能会让项目中的样式命特别的长。

下面也有一些使用 BEM 命名规范的网站，有兴趣的能够去看看：

经常使用 CSS 样式名称

这里引用一下掘金做者 冷石Boy 的 css 样式名称

包裹类： container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block

状态类： primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading

尺寸类： large, middle, small, bigger, smaller

组件类： card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog

位置类： first, last, current, prev, next, forward, back

文本类： title, desc, content, date, author, category,label,tag

人物类： avatar, name, age, post, intro

取名推荐工具

固然对于命名有困难选择症的朋友来讲，能够推荐大家一个意想不到的网站—— Codelf，一个帮你搜索 Github、GitLab 等网站中，你想查找的内容的不一样命名。

而且这个网站支持 JavaScript、CSS、HTML，Java 等多种语言的搜索，能够方便的过滤不须要的搜索类型。

Hover 搜索词后的操做，Search 会再以当前选词进行一次搜索，Repo 能够跳转这个词语的出处项目，Copy 固然就不说了，有兴趣的朋友均可以尝试一下。

总结

命名其实并不麻烦，遵循一些定好的规则规范，或者本身给本身定义好这个规范，而后进行直白、有意义的命名，那么以后的命名就只会成为你的一种习惯，而再也不是困扰你的难题，也但愿你们能够分享一些本身的命名规范或者技巧，共同讨论下吧。

参考文献

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 40 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在平常的业务对接以外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推进并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

若是你想改变一直被事折腾，但愿开始能折腾事；若是你想改变一直被告诫须要多些想法，却无从破局；若是你想改变你有能力去作成那个结果，却不须要你；若是你想改变你想作成的事须要一个团队去支撑，但没你带人的位置；若是你想改变既定的节奏，将会是“5 年工做时间 3 年工做经验”；若是你想改变原本悟性不错，但老是有那一层窗户纸的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但愿参与到随着业务腾飞的过程，亲手推进一个有着深刻的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我以为咱们该聊聊。任什么时候间，等着你写点什么，发给 ZooTeam@cai-inc.com

最后一句话

掘金2020年度做者榜单火热打榜中！你的支持是咱们最大的动力！小编已被要求今日不增长两千票会被祭天（求保护~）

每点一次是一票，天天能够点不少次哟~

web入口：点我投票-认准团队榜单第一名政采云前端团队
app 入口：请滚动到文章最顶部，而后……（见下）