程序开发过程中变量命名不仅是一个头疼问题,也是一个对开发者综合素质的检验,它会直接影响到代码的最终交付质量、代码Review人员心智承受力。如何写出具有创造性、优雅性、易读性的高质量代码,需要开发者在实际工作中不断总结、提炼,在阅读他人代码时不断地吸收,并在一定的编码规范上形成自己的编码风格。在代码一道除了天资和经验更需要一份详实的参考来辅助,这正是本系列文章的出发点所在。
变量的命名不局限于JavaScript代码中的属性、方法和对象,也包含了路由的命名,工程结构的命名,数据库表和字段的命名,样式中Class和ID选择器的命名,html元素的选择等。
目前流行的经典命名规则有:驼峰命名法、匈牙利命名法、下划线命名法、帕斯卡命名法
相关命名的具体规则请另行查阅。前端主要涉及到驼峰命名法,react组件会用到帕斯卡命名法。
然后是变量命名规则:
这里给出一些在开发过程中约定成俗的通用规则,涉及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中使用JSX则属性使用驼峰命名法,并且文件文以”.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="page-header">
<div class="page-header__wrap common"></div>
<div class="page-header__wrap tab"></div>
</div>
// 反例
<div class="page-header">
<div class="page-header__wrap page-header--common"></div>
<div class="page-header__wrap page-header--tab"></div>
</div>
补充:这种方式的目的在于减少长度,通过 "主体 + 分类名词" 的方式,可以解释为 “带分类的主体”,但是有一个问题是全局样式要注意不要使用通用的词汇来定义样式,比如 title, action, header, footer, left, right等,不然会引起样式覆盖。
原文:https://segmentfault.com/a/1190000019887173
目前我们现在用的前后端分离模式属于第一阶段,下一阶段可以在前端工程化方面,对技术框架的选择、前端模块化重用方面,可多做考量。也就是要迎来“==前端为主的 MV* 时代==”。
当您必须使用匿名函数,请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。
standard是一个开源的JS代码规范库,制定了所谓standard(标准)的JS代码规范,配合编辑器插件可以实时检查代码规范以及语法错误,通过执行命令检查代码规范以及语法错误,自动修复(可以直接修复的)不合规范的代码,使其符合规范
对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。
为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。在Node环境中,一个.js文件就称之为一个模块(module)
引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...
嵌套的节点应该缩进;在属性上,使用双引号,不要使用单引号;属性名全小写,用中划线做分隔符;不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);不要忽略可选的关闭标签;
CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。module.exports属性表示当前模块对外输出的接口
W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。
不要使用 @import 与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!