前端变量命名规范

访客4年前黑客工具1192

程序开发过程中变量命名不仅是一个头疼问题,也是一个对开发者综合素质的磨练,它会直接影响到代码的最终交付质量、代码Review职员心智承受力。若何写出具有创造性、优雅性、易读性的高质量代码,需要开发者在现实工作中不停总结、提炼,在阅读他人代码时不停地吸收,并在一定的编码规范上形成自己的编码气概。在代码一道除了资质和履历更需要一份详实的参考来辅助,这正是本系列文章的起点所在。

变量的命名不局限于JavaScript代码中的属性、方式和工具,也包罗了路由的命名,工程结构的命名,数据库表和字段的命名,样式中Class和ID选择器的命名,HTML米素的选择等。


命名规则

现在盛行的经典命名规则有:驼峰命名法、匈牙利命名法、下划线命名法、帕斯卡命名法

相关命名的详细规则请另行查阅。前端主要涉及到驼峰命名法,React组件会用到帕斯卡命名法。

然后是变量命名规则:

  • 变量名首字母必须为字母(a-z A-Z),下划线(_),或者美米符号($)更先
  • 变量名只能是字母(a-z A-Z),数字(0-9),下划线(_)的组合,而且之间不能包罗空格,数字不能放在变量名首位。
  • 变量名不能使用编程语言的保留字。好比在javascript中不能使用true, false, while, case, break保留字等等。


命名气概

这里给出一些在开发过程中约定成俗的通用规则,涉及JavaScript, Typescript, 框架组件, 样式及目录。在文章中将使用【强制】来示意必须严格遵守,【推荐】来示意建议,【参考】来给出多种命名方式的一种。

1. 【强制】在JavaScript中使用驼峰命名法来示意变量,不能以下划线或美米符号作为更先和竣事。

// 反例
_name
__name
name_
$name
name$
弥补:由于受框架和第三方库及语言限制,不可能完全避免。例如:在RxJs中通常命绅士的时刻是以 变量名 + $ 的形式,在Class中界说私有变量时通常以 _ + 变量名 的方式来示意,在Vue中内部实例方式所有以 $ 更先,在AngularJs中内部方式以 $$ 更先,而lodash直接使用 _ 作为其别名。


2. 强制】在代码中严禁使用拼音与中英文夹杂的方式,更不允许直接使用中文的方式。除了一些国际通用的中文名称,要视为英文外,其它克制使用。

// 正例
taobao
tmall
shanghai
coupons

// 反例
yhq [优惠券]


3. 【强制】类名使用大写驼峰命名法来示意,Typescript中枚举值使用大写驼峰命名法示意。

// 正例
class User {}
enum Color {Red = 1, Green, Blue}

// 反例
class user {}


4. 【强制】常量名所有大写,单词间使用下划线离隔,力图表达完整清晰,不要嫌名字长。

// 正例
GOOGLE_MAP_TOKEN

// 反例
TOKEN


5. 【建议】Typescript中抽象类使用 Abstract 或 Base 开头;异常类使用 Exception 末端。

abstract class BaseDepartment {}


6. 【建议】在TypeScript中,类型使用 Type 作后缀,接口使用 I 作为前缀。

type PropsType = {}
interface ILoginProps {}


7. 【建议】 接纳有意义的命名,在项目中坚持使用一种变量命名方式。不要 usr 与 user 混用

// 正例
users
getUserByUid()

// 反例
registerUsr()
copyUserInfo()


8. 【建议】方式名必须准确表达该方式的行为,在多数情况下以动词开头。

// 正例
fetchCoupons()
updateToken()
createAccount()
generateUniqueId()

// 反例
getData()


9. 【建议】可以使用单词简写,然则只局限于常用词汇,注重差别词汇的简写有可能冲突。

// 正例
setProps() [props -> property]
selectCouponsDlg() [dlg -> dialog]
readPkg() [pkg -> package]
previewTpl [tpl -> template]

// 反例
vehicleDesc [desc -> description]
vehicleDesc [desc -> descending]
vehicleAesc [aesc -> aescending]
fetchUsr() [usr -> user]


10. 【建议】在Vue和Angular中,模板语法中所有组件名使用中线命名法,在React中使用大写驼峰命名法来示意。

// Vue
<el-button type="text" @click="toDetail">详情</el-button>
<custom-component a-prop="prop" />

// Angular
<nz-sider [nzWidth]="200" style="background:#fff"></nz-sider>

// React
<SelectPicture data={this.images} />


11. 【推荐】统一使用中线命名法来命名目录。

|-- page-header
|   |-- PageHeader.vue

12. 【参考】在Vue模板语法中组件属性使用连字符命名法,在Vue中使用 *** X则属性使用驼峰命名法,而且文件文以”.jsx”为文件类型。

<Thumbnail
  withHeadPicture={true}
  data={this.selectedImages[0]}
  withDetail={this.enabledDetail}
/>


13. 【强制】在服务名上使用 Service 后缀

class UserService {}


14. 【建议】在Vue中组件文件名接纳大写驼峰命名方式,React同样云云,在Angular中以使用点和横杠来分开文件名,而且符号名后面追加约定的类型后缀。

// Vue
User.vue

// Angular
app.component.ts
hero-list.component.ts
validation.directive.ts
app.module.ts
user-profile.service.ts

// React
User.jsx


15. 【参考】在React中使用目录名称作为组件名,在目录内容直接使用index作为入口,在Vue中不可以,在Angular中可以将index作为模块的入口,固然也可以直接作为组件的入口,但这样和其整个命名气概有所背离。

// Vue
|-- user-info
|  |-- UserInfo.vue

// Angular
|-- user-info
|  |-- user-info.component.ts
|  |-- index.ts

// React
|-- user-info
|   |-- index.jsx


16. 【建议】在工程中文档使用全大写命名

README.md
CONTRIBUTORS.md
CHANGELOG.md


17. 【建议】在Vue中指令命名使用 filter 作为竣事。所有引用命名使用 ref 作为后缀

formatCouponsFilter
inputRef
selectRef


18. 【强制】测试文件以 .spec 或者 .test 作为命名的一部分。

selectPicture.spec.js
pageHeader.test.js


19. 【建议】复数化变量名称,而不是命名中包罗聚集类型名称。

// 正例
hosts
users
validUsers
hostText
hostJson
portNumber

// 反例
hostList
userList
hostStr
intPort


20. 【建议】在 for 循环中使用 i, j, k 来作为索引,使用 n 示意数目/次数/限制,使用 e 示意异常, 使用 evt 示意事宜工具, 使用 cb 示意回调函数

for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    for (let k = 0; k < 10; k++) {
      // do something
    }
  }
}


21. 【强制】在解构时使用 const 来声明。

const [ foo, bar ] = { foo: 1, bar: 2 }


22. 【建议】在样式中Class命名可以使用一些常用简写来削减长度。

hd -> head
hdr -> header
ft -> foot
ftr -> footer
pg -> page
btn -> button
txt -> text
el -> element
opt -> option
bd -> border
cl -> clearfix
p -> padding
m -> margin
l -> left
r -> right
t -> top
b -> bottom
x -> horizontal
y -> vertical
px -> padding-left, padding-right
py -> padding-top, padding-bottom
pl -> padding-left
m -> margin
dlg -> dialog
sel -> select
img -> image
lbl -> label
chk -> checkbox
tpl -> template
tbl -> table
hoz -> horizontal
vert -> vertical
ref -> reference
wiz -> wizard
oh -> overflow: hidden
弥补:有些简写不能单独使用,终须组合才气使用,例如: p, m, x, y等单个词汇。


23. 【建议】在命名时接纳BEM的方式,并适当转变,详细参见后续文章。

.page-header__main
.dialog__content
.gallery-list--wrap
.thumbnail-image--info
.action__btn-group


24. 【建议】样式Class命名使用中线毗邻,ID命名接纳下划线毗邻。Class可以同时接纳中线和下划线,但要遵照一定的规则。

.thumbnail-item__image
#page_header


25. 【参考】样式Class接纳组合方式,通过外层Class名来限 *** 用局限。

// 正例
<div class="5567-6a42-3e21-e0eb page-header">
  <div class="6a42-3e21-e0eb-afe3 page-header__wrap common"></div>
  <div class="3e21-e0eb-afe3-429d page-header__wrap tab"></div>
</div>

// 反例
<div class="3343-ca01-b970-6d20 page-header">
  <div class="ca01-b970-6d20-d193 page-header__wrap page-header--common"></div>
  <div class="b970-6d20-d193-4c51 page-header__wrap page-header--tab"></div>
</div>
弥补:这种方式的目的在于削减长度,通过 "主体 + 分类名词" 的方式,可以解释为 “带分类的主体”,然则有一个问题是全局样式要注重不要使用通用的词汇来界说样式,好比 title, action, header, footer, left, right等,否则会引起样式笼罩。


原文:https://segmentfault.com/a/1190000019887173


思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

相关文章

夏天套装穿什么鞋子(夏天最好看的四双鞋)

夏天套装穿什么鞋子(夏天最好看的四双鞋)

这个月某一周的某一天,参加了 ASICS Tiger Gel-Kayano Trainer Knit 的新品发布会。随着“温度”一点点地升高,这场自 2012 年伦敦奥运,由 Flyknit 所引发的...

导热油泵型号(导热油泵该如何选型?)

导热油泵型号规格(导热油泵该怎样型号选择?)河北省恒盛水泵厂导热油泵关键为RY风冷导热油泵系列产品,该泵构造合理,特性优质,应用靠谱,用以运输没有固态颗粒物的常温下或高溫液态。那麼导热油泵型号选择时应...

家用智能按摩椅什么品牌好(送你个按摩椅选购速成手册)

针对电动按摩椅大伙儿了解吗? 电动按摩椅,是能够对身体的颈、肩、腰、背、臀等位置开展缓解推拿,做到释放压力全身肌肉,消除疲劳的目地。目前市面上的 家庭装电动按摩椅知名品牌也愈来愈多。那麼,家庭装电动按...

网赌黑客追款是真的吗 网赌追回损失的三种方式

在文件夹中双击一个保留的mht花样网页,打开它。 用浏览器打开该网页后,可以看到只显示英文和数字,这是由于IE浏览器部门损坏。 方式一:邮件管理软件打开 1、将mht网页文件的扩展名更改为eml,...

小米手机黑客代码,找黑客改成绩可行吗,找一名黑客老师

IScannerInsertionPoint insertionPoint) {//将解码后的id直接带进数据库仿制代码这样就不会发生Base64编码下的注入缝隙了。 也能够直接将原句子改为: ale...

我要做活动,申请多少预算合适?

我要做活动,申请多少预算合适?

编辑导语:不少做运营的城市碰着一浩劫题——预算,预算应该怎么做才公道?到底应该申请几多预算?推广预算应该怎么分派?怎么样才是科学预算?本文作者环绕运营的勾当预算与执行推广举办阐明,我们一起来看一下。...