浙江荣盛建设集团网站,男装网站模板演示,特种作业证查询,为什么要用wordpress大家好#xff0c;我是若川。今天分享一篇关于如何命名更优雅的文章。点击下方卡片关注我、加个星标#xff0c;或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列本文首发于政采云前端团队博客#xff1a;编写高质量可维护的代码#xff1a;优雅命名ht… 大家好我是若川。今天分享一篇关于如何命名更优雅的文章。点击下方卡片关注我、加个星标或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列本文首发于政采云前端团队博客编写高质量可维护的代码优雅命名https://www.zoo.team/article/good-name前言俗话说得好万事开头难。而对于前端 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;
例如方法命名也可以使用动词 名次类的组合命名方式操作类方法 fetchXxxgetXxx当需要根据某些属性获取数据时可用 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 的使用首选电脑全局安装 eslintnpm 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 表示具体操作 handlexxxxChangehandlexxxxShow而比如数据获取可以用 getfetch 这类// 小驼峰命名
function getUserInfo(){};
function addSuplierInfo(){};// 添加一些操作类的辅助命名
function handleUserInfoChange(){};
function handleTitleClick(){};
function fetchPageData(){};
类名大驼峰命名export class CommonLogo;
export class CartCenter;
cssBEM 规范BEM 是一种命名 CSS 样式的命名方法和规范全称 Block块、 Element元素、Modifier修饰符 想必很多人都比较熟悉了。Block一般可以看做是独立具有实际意义的模块部分例如 header,container,menu 等
Element组成 Block 的一部分没有具体的实际意义一般也不独立使用例如 menu itemlist itemheader title 等
Modifier一般是块或者元素的修饰状态或者行为例如 disabledcolorchecked 等
而 BEM 的写法一般是 .block-name__element-name--modifier-name其中 Block 与 Element 之间连接是通过 __ 双下划线BlockElement 与 Modifier 之间是通过 -- 双中划线进行连接当使用less或者 sass 语法编写 css 时通过嵌套语法也能够很简洁的书写这部分样式。div classheaddiv classhead__title标题div classhead__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, p, 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 (https://unbug.github.io/codelf)一个帮你搜索 Github、GitLab 等网站中你想查找的内容的不同命名。并且这个网站支持 JavaScript、CSS、HTML、Java 等多种语言的搜索可以方便的过滤不需要的搜索类型。Hover 搜索词后的操作Search 会再以当前选词进行一次搜索Repo 可以跳转这个词语的出处项目Copy 当然就不说了有兴趣的朋友都可以尝试一下。总结命名其实并不麻烦遵循一些定好的规则规范或者自己给自己定义好这个规范然后进行直白、有意义的命名那么之后的命名就只会成为你的一种习惯而不再是困扰你的难题也希望大家可以分享一些自己的命名规范或者技巧共同讨论下吧。参考文献故宫命名法https://juejin.cn/post/6844903913892610061如何代码命名https://www.cyningsun.com/07-04-2020/how-to-naming-things.html最近组建了一个江西人的前端交流群如果你也是江西人可以加我微信 ruochuan12 拉你进群。················· 若川出品 ·················今日话题略。欢迎在下方留言~ 欢迎分享、收藏、点赞、在看我的公众号文章~一个愿景是帮助5年内前端人走向前列的公众号可加我个人微信 ruochuan12长期交流学习推荐阅读我在阿里招前端我该怎么帮你现在还能加我进模拟面试群若川知乎问答2年前端经验做的项目没什么技术含量怎么办点击上方卡片关注我、加个星标或者查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列
