前端开发规范

前端开发规范

文件命名

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

图片资源

图片资源放置在 "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