手记

前端开发规范

前端开发规范

文件命名

为了能准确区分各个文件或资源的用处,需对文件命名进行规范处理。

图片资源

图片资源放置在 "src/assets" 文件夹下

类型

描述

举例

图标[默认]

icon-*

icon-home

图标[焦点]

icon-*_active

icon-home_active

背景图

background-*

background-banner

logo

logo-*

logo-javashop

占位图

placeholder-*

placeholder-image

其它

other-*

other-xxx

Vue文件

  • 单词首字母大写

例如:MyVueFile

JS文件

  • 单词小写

  • 多个单词以横杠隔开

例如:my-js-file

代码中的命名

class命名

  • 单词小写

  • 多个单词以横杠隔开

例如:sidebar-container

js代码

  • 变量、常量

类型

描述

举例

普通变量

驼峰式

const myName = 'XiaoMing'

临时变量

_驼峰式

let _tempArray = new Array(10)

方法

驼峰式

const myFun = () => {}

  • 方法[函数]

类型

描述

举例

普通方法

驼峰式

const myFun = () => {}

用于数据交互

[交互类型]_[单词首字母大写]

GET_GoodsList 、POST_UserData 、 DELETE_Orders

其它命名

  • 状态命名

类型

描述

举例

多选

checked

const checked = true / false

单选

checked

const checked = true / false

下拉选择

selected

const selected = true / false

禁用状态

disabled

const disabled = true / false

加载中

loading

const loading = true / false

 


0人推荐
随时随地看视频
慕课网APP