乐趣区

关于前端:编写高质量可维护的代码优雅命名

jiezi

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

前言

俗话说得好，万事开头难。而对于前端 coder 来说，每次新我的项目、新需要来的时候，我想大家最苦恼的往往就是如何去命名，无论是项目名称、页面的文件名称亦或是代码中的办法名称，对于我来说，凡是名字想好了当前，我感觉需要就曾经写完一半了。

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

不适合的命名

咱们先来看一些例子：

  • 无意义的，形象的，任何中央能够应用，谁都不晓得你这里用的命名起源是谁
// 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'

命名规定

如何让命名更简略呢，只有遵循一些规定标准，总能将简单的事件拆分开来，变成一件简略的事件。

直白、有意义

想要让你的命名简略易懂，最简略的形式就是直白并且有意义，直接了当的在命名中体现出你这个命名的性能，或者形容，举个例子：

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

// good
function getUserInfo(){};
function formatNewsList(){};
const articleData = [];

如果在页面中定义了下面这样的变量，哪种写法能够让你在没有正文的状况下，就能疾速理解原作者的书写用意呢？（当然，代码中还是须要一些必要正文的）。

所以在命名的时候，须要的就是直白、齐备、有意义，让他人通过命名就能理解到这个名称（无论是变量、办法或者是款式名）背地的的含意，这样的命名就是高效的、易懂的。

听从常规、规范

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

  • 用 id 当做数据标识命名，而不是 identifier
  • 例如布尔值命名类型，通常只有两个值类型：真，假，依据不同的应用场景，也能够有一些罕用的命名形式
// 可见、状态等，可用 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"}]
    }
}
  • 我的项目中如果碰到不符合规范的就会间接报错提醒

命名标准举荐

下面简略介绍了一些命名的规定，那么具体到实际操作中，咱们又有哪些较好的命名标准能够抉择呢？上面依据不同的应用场景，也简略给大家介绍一些常常举荐应用的命名标准。

项目名称、文件名称

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

  1. kebab-case：横短线命名，也叫串式命名法，小写字母的词组，两头加 - 拼接的形式，这种形式命名便于同类内容疾速查找
// good
news-index;
news-list;
news-detail;
  1. 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 命名标准的网站，有趣味的能够去看看：

  • https://csswizardry.com/
  • https://mediatemple.net/
  • https://www.udemy.com/

罕用 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 当然就不说了，有趣味的敌人都能够尝试一下。

总结

命名其实并不麻烦，遵循一些定好的规定标准，或者本人给本人定义好这个标准，而后进行直白、有意义的命名，那么之后的命名就只会成为你的一种习惯，而不再是困扰你的难题，也心愿大家能够分享一些本人的命名标准或者技巧，独特探讨下吧。

参考文献

  • 故宫命名法
  • 如何代码命名

举荐浏览

【Flutter 技能篇】你不得不会的状态治理 Provider

编写高质量可保护的代码：组件的形象与粒度

招贤纳士

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

如果你想扭转始终被事折腾，心愿开始能折腾事；如果你想扭转始终被告诫须要多些想法，却无从破局；如果你想扭转你有能力去做成那个后果，却不须要你；如果你想扭转你想做成的事须要一个团队去撑持，但没你带人的地位；如果你想扭转既定的节奏，将会是“5 年工作工夫 3 年工作教训”；如果你想扭转原本悟性不错，但总是有那一层窗户纸的含糊… 如果你置信置信的力量，置信平凡人能成就不凡事，置信能遇到更好的本人。如果你心愿参加到随着业务腾飞的过程，亲手推动一个有着深刻的业务了解、欠缺的技术体系、技术发明价值、影响力外溢的前端团队的成长历程，我感觉咱们该聊聊。任何工夫，等着你写点什么，发给 ZooTeam@cai-inc.com

最初一句话

掘金 2020 年度作者榜单炽热打榜中！你的反对是咱们最大的能源！小编已被要求今日不减少两千票会被祭天（求爱护~）

点我投票 - 认准团队榜单第一名政采云前端团队

退出移动版