前端开发规范--自用

1.项目命名

全部采用小写方式， 以中划线分隔。
mall-management-system

2.目录命名

• 全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数
  scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

• 【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case 命名
  head-search / page-loading / authorized / notice-icon

• 【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名
  page-one / shopping-car / user-management

3.JS、CSS、SCSS、HTML、PNG 文件命名

全部采用小写方式， 以中划线分隔
render-dom.js / signup.css / index.html / company-logo.png

4.HTML缩进

• 缩进使用 2 个空格（一个 tab）
• 嵌套的节点应该缩进。

5.CSS命名规范

• 类名使用小写字母，以中划线分隔
• id 采用驼峰式命名
• scss 中的变量、函数、混合、placeholder 采用驼峰式命名

6.Javascript命名

• 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束
• 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。
  localValue / getHttpMessage() / inputUserId
  其中 method 方法命名必须是 动词 或者 动词+名词 形式

附： 函数方法常用的动词:

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 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

7.对象声明

7.1使用字面值创建对象

正例：let user = {};
反例：let user = new Object();

7.2使用字面量来代替对象构造器

//正例：
var user = {
  age: 0,
  name: 1,
  city: 3
};

//反例：
var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;