自整理我平时常范规范错误

项目命名

一般全部小写，采用中划线分隔

mall-management-system

目录命名

一般全部小写方式，采用中划线分隔（复数结构用复数命名法）

/static
/styles
/views

JS、CSS、SCSS、HTML、PNG 等文件命名

小写方式，以中划线分隔

-render-dom.js -signup.css

id命名

采用驼峰式命名

scss变量、函数、混合、placeholder命名

采用驼峰式命名

ClassName命名

使用小写字母，以中划线分隔

采用（继承 + 外来）格式

<div class="aaaa">
    <div class="aaaa-bb">
</div>

about 关于
account 账户
arrow 箭头图标
article 文章
aside 边栏
audio 音频
avatar 头像
bg,background 背景
bar 栏（工具类）
branding 品牌化
crumb,breadcrumbs 面包屑
btn,button 按钮
caption 标题，说明
category 分类
chart 图表
clearfix 清除浮动
close 关闭
col,column 列
comment 评论
community 社区
container 容器
content 内容
copyright 版权
current 当前态，选中态
default 默认
description 描述
details 细节
disabled 不可用
entry 文章，博文
error 错误
even 偶数，常用于多行列表或表格中
fail 失败（提示）
feature 专题
fewer 收起
field 用于表单的输入区域
figure 图
filter 筛选
first 第一个，常用于列表中
footer 页脚
forum 论坛
gallery 画廊
group 模块，清除浮动
header 页头
help 帮助
hide 隐藏
hightlight 高亮
home 主页
icon 图标
info,information 信息
last 最后一个，常用于列表中
links 链接
login 登录
logout 退出
logo 标志
main 主体
menu 菜单
meta 作者、更新时间等信息栏，一般位于标题之下
module 模块
more 更多（展开）
msg,message 消息
nav,navigation 导航
next 下一页
nub 小块
odd 奇数，常用于多行列表或表格中
off 鼠标离开
on 鼠标移过
output 输出
pagination 分页
pop,popup 弹窗
preview 预览
previous 上一页
primary 主要
progress 进度条
promotion 促销
rcommd,recommendations 推荐
reg,register 注册
save 保存
search 搜索
secondary 次要
section 区块
selected 已选
share 分享
show 显示
sidebar 边栏，侧栏
slide 幻灯片，图片切换
sort 排序
sub 次级的，子级的
submit 提交
subscribe 订阅
subtitle 副标题
success 成功（提示）
summary 摘要
tab 标签页
table 表格
txt,text 文本
thumbnail 缩略图
time 时间
tips 提示
title 标题
video 视频
wrap 容器，包，一般用于最外层
wrapper 容器，包，一般用于最外层

图片命名

图片业务+功能类别+模块名称+图片精度

wx-bg-goodslist@1x.png

图片业务（可选） +（图片业务）：

pp-：拍拍
wx-：微信
sq-：手Q
jd-：京东商城

图片功能类别：

mod-：是否公共，可选
icon：模块类固化的图标
logo：LOGO类
spr：单页面各种元素合并集合
btn：按钮
bg：可平铺或者大背景

图片模块名称：

goodslist：商品列表
goodsinfo：商品信息
userava tar：用户头像

图片精度：

普清：@1x
Retina：@2x | @3x

变量命名

is 是否

isTimeout	是否超时
isShow：是否显示 
isVisible：是否可见 
isLoading：是否处于加载中
isConnecting：是否处于连接中 
isValidating：正在验证中 
isRunning：正在运行中 
isListening：正在监听中

属性状态

disabled：是否禁用 
editable：是否可编辑 
clearable：是否可清除 
readonly：只读 
expandable：是否可展开 
checked：是否选中 
enumberable：是否可枚举 
iterable：是否可迭代 
clickable：是否可点击 
draggable：是否可拖拽

配置项（功能开启）

//是否带选项卡 withTab 
//不带选项卡 withoutTab 
//开启过滤 enableFilter 
//允许自定义缩放 allownCustomScale 
//是否清除 shouldClear 
//是否能选中元素 canSelectItem 
//不显示label后面的冒号 noColon 
//检查Js checkJs

异步函数

get 获取/set 设置
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁 
begin 开始/end 结束
backup 备份/restore 恢复
import 导入/export 导出
split 分割/merge 合并
inject 注入/extract 提取
attach 附着/detach 脱离
bind 绑定/separate 分离
view 查看/browse 浏览
edit 编辑/modify 修改
select 选取/mark 标记
copy 复制/paste 粘贴
undo 撤销/redo 重做
insert 插入/delete 移除
add 加入/append 添加
clean 清理/clear 清除
index 索引/sort 排序
find 查找/search 搜索
increase 增加/decrease 减少
play 播放/pause 暂停
launch 启动/run 运行 
compile 编译/execute 执行, 
debug 调试/trace 跟踪
observe 观察/listen 监听, 
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码 
encrypt 加密/decrypt 解密, 
compress 压缩/decompress 解压缩 
pack 打包/unpack 解包, 
parse 解析/emit 生成
connect 连接/disconnect 断开, 
send 发送/receive 接收 
download 下载/upload 上传,
refresh 刷新/synchronize 同步 
update 更新/revert 复原, 
lock 锁定/unlock 解锁 
expand 展开/collapse 折叠 
begin 起始/end 结束, 
start 开始/finish 完成 
enter 进入/exit 退出, 
abort 放弃/quit 离开

temp 临时数据

tempData

options 选择

maps 映射

路由跳转

to 跳转
go  跳转
navigate 导航到
jump 跳转
redirect 重定向
switch 切换
back  回到

数据处理

获取  get
查询 query
格式化 format
转换 convert
反转 inverse 
切换 toggle
解析 parse
展开 flat
降序 sort
删除 del/delete
修改 update / add
有没有 has
处理 handle
计算 calc
从 by   getAidByLocal  通过本地获取Aid
点击Click on  onConfirmTAg

新旧

oldVal 
newVal

常用缩写

message ==> msg
information ==> info
button ==> btn
background ==> bg
response ==> res
request ==> req
image ==> img
utility ==> util
prroperty ==> prop
source ==> src
boolean ==> bool
error ==> err
settings ==> set

标签语义化

头部：header
内容：content/container
尾部：footer
导航：nav
侧栏：sidebar
栏目：column
整体布局：wrapper
左右中：left / right / center
标签页：tab
文章列表：list
栏目标题：title

页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

功能

标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

实体命名

基础命名

标题: title
摘要: summary
箭头： arrow
商标： label
网站标志： logo
转角/圆角： corner
横幅广告： banner
子菜单： subMenu
搜索：search
搜索框： searchBox
登录： login
登录条：loginbar
工具条： toolbar
下拉： drop
标签页： tab
当前的： current
列表： list
滚动：scroll
服务： service
提示信息： msg
热点：hot
新闻： news
小技巧： tips
下载： download
栏目标题： title
热点： hot
加入： joinus
注册： regsiter
指南： guide
友情链接： friendlink
状态： status
版权： copyright
按钮： btn
合作伙伴： partner
投票： vote 左/右/中：left/right/center
简介：profiles
评论：comment

组件命名

Layout 布局
Container 布局容器
Color 色彩
Typography 字体
Border 边框
Icon 图标
Button 按钮
Link 文字链接
Radio 单选框
Checkbox 多选框
Input 输入框
InputNumber 计数器
Select 选择器
Cascader 级联选择器
Switch 开关
Slider 滑块
TimePicker 时间选择器
DatePicker 日期选择器
DateTimePicker 日期时间选择器
Upload 上传
Rate 评分
ColorPicker 颜色选择器
Transfer 穿梭框
Form 表单
Table 表格
Tag 标签
Progress 进度条
Tree 树形控件
Pagination 分页
Badge 标记
Avatar 头像
Skeleton 骨架屏
Empty 空状态
Descriptions 描述列表
Result 结果
Alert 警告
Loading 加载
Message 消息提示
MessageBox 弹框
Notification 通知
NavMenu 导航菜单
Tabs 标签页
Breadcrumb 面包屑
PageHeader 页头
Dropdown 下拉菜单
Steps 步骤条
Dialog 对话框
Tooltip 文字提示
Popover 弹出框
Popconfirm 气泡确认框
Card 卡片
Carousel 走马灯
Collapse 折叠面板
Timeline 时间线
Divider 分割线
Calendar 日历
Image 图片
Backtop 回到顶部
InfiniteScroll 无限滚动
Drawer 抽屉

分页

变量

prev//上一页
next//下一页
jumper//跳页元素
pageSize//每页显示条目个数
total//总条目数
pageCount//总页数
pagerCount//页码按钮的数量，当总页数超过该值时会折叠
currentPage//当前页数
prevText//替代图标显示的上一页文字
nextText//替代图标显示的下一页文字
hideOnSinglePage//只有一页时是否隐藏

数组/集合/对象

pager//页码列表
pageSizes//每页显示个数选择器的选项设置

函数

handleSizeChange
handleCurrentChange

事件

size-change
current-change
prev-click
next-click

全局常量

全局常量大写开头，前边加前缀

ZZUserName

Vue命名规范

自定义指令

v-开头，后面跟小写

组件

单文件组件

单词大写开头 (Hamburger)
横线连接 (city-select)

基础组件(展示类的、无逻辑的组件)

特定的前缀开头比如 Base,App

单例组件

单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。(TheHeading.vue)

紧密耦合的组件

以父组件名作为前缀命名

TodoList.vue
TodoListItem.vue
TodoListItemButton.vue

单词顺序

描述的单词开头描述性的修饰词结束 -SearchButtonClear -SettingsCheckboxTerms

前端规范