优雅之夜
# 优雅之夜
市⾯上常⽤的命名规范:
camelCase
(⼩驼峰式命名法 ------ ⾸字⺟⼩写)PascalCase
(⼤驼峰式命名法 ------ ⾸字⺟⼤写)kebab-case
(短横线连接式)Snake
(下划线连接式)
# 1.1 项目文件命名
# 1.1.1 项目名
全部采⽤⼩写⽅式,以短横线分隔。例: my-project-name
# 1.1.2 ⽬录名
参照项⽬命名规则,有复数结构时,要采⽤复数命名法。例:docs、assets、components、directives、
mixins、utils、views。
my-project-name/
|- BuildScript // 流⽔线部署⽂件⽬录
|- docs // 项⽬的细化⽂档⽬录(可选)
|- nginx // 部署在容器上前端项⽬ nginx 代理⽂件⽬录
|- node_modules // 下载的依赖包
|- public // 静态⻚⾯⽬录
|- index.html // 项⽬⼊⼝
|- src // 源码⽬录
|- api // http 请求⽬录
|- assets // 静态资源⽬录,这⾥的资源会被wabpack构建
|- icon // icon 存放⽬录
|- img // 图⽚存放⽬录
|- js // 公共 js ⽂件⽬录
|- scss // 公共样式 scss 存放⽬录
|- frame.scss // ⼊⼝⽂件
|- global.scss // 公共样式
|- reset.scss // 重置样式
|- components // 组件
|- plugins // 插件
|- router // 路由
|- routes // 详细的路由拆分⽬录(可选)
|- index.js
|- store // 全局状态管理
|- utils // ⼯具存放⽬录
|- request.js // 公共请求⼯具
|- views // ⻚⾯存放⽬录
|- App.vue // 根组件
|- main.js // ⼊⼝⽂件
|- tests // 测试⽤例
|- .browserslistrc// 浏览器兼容配置⽂件
|- .editorconfig // 编辑器配置⽂件
|- .eslintignore // eslint 忽略规则
|- .eslintrc.js // eslint 规则
|- .gitignore // git 忽略规则
|- babel.config.js // babel 规则
|- Dockerfile // Docker 部署⽂件
|- jest.config.js
|- package-lock.json
|- package.json // 依赖
|- README.md // 项⽬ README
|- vue.config.js // webpack 配置
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# 1.1.3 图像⽂件名
全部采⽤⼩写⽅式,优先选择单个单词命名,多个单词命名以下划线分隔。
banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_TV.jpg
# 1.1.4 HTML ⽂件名
全部采⽤⼩写⽅式,优先选择单个单词命名,多个单词命名以下划线分隔。
|- error_report.html
|- success_report.html
# 1.1.5 CSS ⽂件名
全部采⽤⼩写⽅式,优先选择单个单词命名,多个单词命名以短横线分隔。
|- normalize.less
|- base.less
|- date-picker.scss
|- input-number.scss
# 1.1.6 JavaScript ⽂件名
全部采⽤⼩写⽅式,优先选择单个单词命名,多个单词命名以短横线分隔。
|- index.js
|- plugin.js
|- util.js
|- date-util.js
|- account-model.js
|- collapse-transition.js
"上述规则可以快速记忆为"静态⽂件下划线,编译⽂件短横线"。
# 1.2 Vue 组件命名
# 1.2.1 单⽂件组件名
⽂件扩展名为 .vue
的 single-file components
(单⽂件组件)。单⽂件组件名应该始终是单词⼤
写开头 (PascalCase)。
components/
|- MyComponent.vue
# 1.2.2 单例组件名
只拥有单个活跃实例的组件应该以 The
前缀命名,以示其唯⼀性。
这不意味着组件只可⽤于⼀个单⻚⾯,⽽是每个⻚⾯ 只使⽤⼀次。这些组件永远不接受任何 prop,因
为它们是为你的应⽤定制的。如果你发现有必要添加 prop,那就表明这实际上是⼀个可复⽤的组件,
只是⽬前 在每个⻚⾯⾥只使⽤⼀次。
⽐如,头部和侧边栏组件⼏乎在每个⻚⾯都会使⽤,不接受 prop,该组件是专⻔为该应⽤所定制的。
components/ |- TheHeading.vue |- TheSidebar.vue
# 1.2.3 基础组件名
"基础组件:不包含业务,独⽴、具体功能的基础组件,⽐如⽇期选择器、模态框等。这类组件作为项⽬的基础控件,会被⼤量使⽤,因此组件的 API 进⾏过⾼强度的抽象,可以通过不同配置实现不同的功能
应⽤特定样式和约定的基础组件(也就是展示类的、⽆逻辑的或⽆状态、不掺杂业务逻辑的组件) 应该全部以⼀个特定的前缀开头 ------ Base。基础组件在⼀个⻚⾯内可使⽤多次,在不同⻚⾯内也可复⽤,是⾼可复⽤组件。
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
# 1.2.4 业务组件
"业务组件:它不像基础组件只包含某个功能,⽽是在业务中被多个⻚⾯复⽤的(具有可复⽤性)它与基础组件的区别是,业务组件只在当前项⽬中会⽤到,不具有通⽤性,⽽且会包含⼀些业务,⽐如数据请求;⽽基础组件不含业务,在任何项⽬中都可以使⽤,功能单⼀,⽐如⼀个具有数据校验功能的输⼊框
掺杂了复杂业务的组件(拥有⾃身 data
、 prop
的相关处理)即业务组件应该以 Custom
前缀命
名。业务组件在⼀个⻚⾯内⽐如:某个⻚⾯内有⼀个卡⽚列表,⽽样式和逻辑跟业务紧密相关的卡⽚就
是业务组件。
components/
|- CustomCard.vue
# 1.2.5 紧密耦合的组件名
和⽗组件紧密耦合的⼦组件应该以⽗组件名作为前缀命名。因为编辑器通常会按字⺟顺序组织⽂件,所以这样做可以把相关联的⽂件排在⼀起。
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue
# 1.2.6 组件名中单词顺序
组件名应该以⾼级别的 (通常是⼀般化描述的) 单词开头,以描述性的修饰词结尾。因为编辑器通常会
按字⺟顺序组织⽂件,所以现在组件之间的重要关系⼀⽬了然。如下组件主要是⽤于搜索和设置功能。
1 components/
2 |- SearchButtonClear.vue
3 |- SearchButtonRun.vue
4 |- SearchInputQuery.vue
5 |- SearchInputExcludeGlob.vue
6 |- SettingsCheckboxTerms.vue
7 |- SettingsCheckboxLaunchOnStartup.vue
还有另⼀种多级⽬录的⽅式,把所有的搜索组件放到"search"⽬录,把所有的设置组件放到"settings"⽬
录。我们只推荐在⾮常⼤型 (如有 100+ 个组件) 的应⽤下才考虑这么做,因为在多级⽬录间找来找去,
要⽐在单个 components ⽬录下滚动查找要花费更多的精⼒。
# 1.2.7 完整单词的组件名
组件名应该倾向于⽽不是缩写。编辑器中的⾃动补全已经让书写⻓命名的代价⾮常之低了,⽽其带来的
明确性却是⾮常宝贵的。不常⽤的缩写尤其应该避免。
1 components/
2 |- StudentDashboardSettings.vue
3 |- UserProfileOptions.vue
# 1.3 代码参数命名
# 1.3.1 name
组件名应该始终是多个单词,应该始终是 PascalCase 的。根组件 App 以及
<transition> 、 <component> 之类的 Vue 内置组件除外。这样做可以避免跟现有的以及未来的
HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。
1 export default {
2
name: 'ToDoList',
// ...
3
4 }
# 1.3.2 prop
# 1.3.3 router
Vue Router Path 命名采⽤ kebab-case 格式。⽤ Snake(如: /user_info )或 camelCase
(如: /userInfo )的单词会被当成⼀个单词,搜索引擎⽆法区分语义。
1 // bad
2 {
3
4
5
6
7
path: '/user_info', // user_info 当成⼀个单词
name: 'UserInfo',
component: UserInfo,
meta: {
title: ' - ⽤户',
8
desc: ''
9
}
10 },
11
12 // good
13 {
14
path: '/user-info', // 能解析成 user info
15
name: 'UserInfo',
component: UserInfo,
meta: {
16
17
18
title: ' - ⽤户',
desc: ''
19
20
}
21 },
# 1.3.4 模板中组件
对于绝⼤多数项⽬来说,在单⽂件组件和字符串模板中组件名应该总是 PascalCase 的,但是在 DOM 模
板中总是 kebab-case 的。
1 <!-- 在单⽂件组件和字符串模板中 -->
2 <MyComponent/>
3
4 <!-- 在 DOM 模板中 -->
5 <my-component></my-component>
# 1.3.5 ⾃闭合组件
在单⽂件组件、字符串模板和 JSX 中没有内容的组件应该是⾃闭合的------但在 DOM 模板⾥永远不要这样
做。
1 <!-- 在单⽂件组件和字符串模板中 -->
2 <MyComponent/>
3
4 <!-- 在所有地⽅ -->
5 <my-component></my-component>
# 1.3.6 变量
命名⽅法:camelCase
命名规范:类型 + 对象描述或属性的⽅式
1 // bad
2 var getTitle = "LoginTable"
3
4 // good
5 let tableTitle = "LoginTable"
6 let mySchool = "我的学校"
# 1.3.7 常量
命名⽅法:全部⼤写下划线分割
命名规范:使⽤⼤写字⺟和下划线来组合命名,下划线⽤以分割单词
1 const MAX_COUNT = 10
2 const URL = 'http://test.host.com'
# 1.3.8 ⽅法
命名⽅法:camelCase
命名规范:统⼀使⽤动词或者动词 + 名词形式
1 // 1、普通情况下,使⽤动词 + 名词形式
2 // bad
3 go、nextPage、show、open、login
4
5 // good
6 jumpPage、openCarInfoDialog
7
8 // 2、请求数据⽅法,以 data 结尾
9 // bad
10 takeData、confirmData、getList、postForm
11
12 // good
13 getListData、postFormData
14
15 // 3、单个动词的情况
16 init、refresh
动
词
含义
返回值
判断是否可执⾏某个动作
can
has
is
函数返回⼀个布尔值。true:可执⾏;false:不可执⾏;
(权 )
函数返回⼀个布尔值。true:含有此值;false:不含有此
判断是否含有某个值
判断是否为某个值
值;
函数返回⼀个布尔值。true:为某个值;false:不为某个
值;
get
set
获取某个值
设置某个值
函数返回⼀个⾮布尔值
⽆返回值、返回是否设置成功或者返回链式对象
# 1.3.9 ⾃定义事件
⾃定义事件应始终使⽤ kebab-case 的事件名。
不同于组件和 prop,事件名不存在任何⾃动化的⼤⼩写转换。⽽是触发的事件名需要完全匹配监听这个
事件所⽤的名称。
1 this.$emit('my-event')
2 <MyComponent @my-event="handleDoSomething" />
不同于组件和 prop,事件名不会被⽤作⼀个 JavaScript 变量名或 property 名,所以就没有理由使⽤
camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被⾃动转换为全⼩写 (因为 HTML
是⼤⼩写不敏感的),所以 v-on:myEvent 将会变成 v-on:myevent ------导致 myEvent 不可能被监
听到。
原⽣事件参考列表[1]
由原⽣事件可以发现其使⽤⽅式如下:
1 <div
2
3
@blur="toggleHeaderFocus"
@focus="toggleHeaderFocus"
4
@click="toggleMenu"
5
@keydown.esc="handleKeydown"
6
@keydown.enter="handleKeydown"
@keydown.up.prevent="handleKeydown"
@keydown.down.prevent="handleKeydown"
@keydown.tab="handleKeydown"
7
8
9
10
11
12
@keydown.delete="handleKeydown"
@mouseenter="hasMouseHoverHead = true"
@mouseleave="hasMouseHoverHead = false">
13 </div>
⽽为了区分原⽣事件 和⾃定义事件 在 Vue 中的使⽤,建议除了多单词事件名使⽤ kebab-case 的情况
下,命名还需遵守为 on + 动词 的形式,如下:
1 <!-- ⽗组件 -->
2 <div
3
4
5
@on-search="handleSearch"
@on-clear="handleClear"
@on-clickoutside="handleClickOutside">
6 </div>
7 // ⼦组件
8 export default {
9
methods: {
10
handleTriggerItem () {
11
this.$emit('on-clear')
12
}
}
13
14 }
# 1.3.10 事件⽅法
命名⽅法:camelCase
命名规范:handle + 名称(可选)+ 动词
1 <template>
2
3
4
5
<div
@click.native.stop="handleItemClick()"
@mouseenter.native.stop="handleItemHover()">
</div>
6 </template>
7
8 <script>
9
10 export default {
11
methods: {
12
handleItemClick () {
13
//...
14
},
15
handleItemHover () {
16
//...
17
}
}
18
19 }
20 </script>