乐趣区

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

这是第 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,前者能够间接通过正则配置本人须要的命名标准,后者则是间接采纳了驼峰命名的标准束缚

这里也举例介绍一下在 VsCodeEslint 的应用

  • 首选电脑全局装置 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 示意具体操作,handlexxxxChangehandlexxxxShow,而比方数据获取能够用 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,其中 BlockElement 之间连贯是通过 __ 双下划线,BlockElementModifier 之间是通过 -- 双中划线进行连贯,当应用 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,一个帮你搜寻 GithubGitLab 等网站中,你想查找的内容的不同命名。

并且这个网站反对 JavaScriptCSSHTMLJava 等多种语言的搜寻,能够不便的过滤不须要的搜寻类型。

Hover 搜索词后的操作,Search 会再以以后选词进行一次搜寻,Repo 能够跳转这个词语的出处我的项目,Copy 当然就不说了,有趣味的敌人都能够尝试一下。

总结

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

参考文献

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

举荐浏览

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

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

招贤纳士

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

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

最初一句话

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

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

退出移动版