代码标准
Sht FE 私有规范

Code 编码规范

命名规范

代码是给人看的

方便别人 就是 方便自己

不得随意乱命名

文件命名 一律使用 小写、多单词、使用 - 分割            ( max-count.vue )
变量命名 一律使用 小驼峰、多单词、以描述性的修饰词结尾   ( maxCount )
常量命名 一律使用 全大写、多单词、使用_分割            ( MAX_COUNT )
组件命名 一律使用 大驼峰、多单词、以描述性的修饰词结尾   ( MaxCount )
css 命名规范 一律使用 小写、多单词、使用 - 分割       ( .max-count {} )
 
例外情况
1、作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。
2、循环变量可以简写，比如：i，j，k 等。

Methods 方法命名命名规范 (尽量使用常用单词开头set、get、go、cancel、has、is)

// bad
go、nextPage、show、open、login
// good
jumpPage、openCarInfoDialog、handleOpenClick、handleEditChange

请求数据命名 规范

  1. api 方法名称 统一以 get、post、put、delete、export、check 开头 请求数据方法以data结尾
get       表示获取
post      表示提交
put       表示更新
delete    表示删除
export    表示导出
check     表示校验
 
// 示例
getListData、postFormData、deleteItem、exportPurchaseOrder、checkIsPurchase

操作动作命名 规范

  1. 统统以 handle 开头
handleToAdd、 handleDelete、 handleUpdate

props 命名规范 (严禁使用 attr)

  1. 在声明 prop 的时候, 其命名应该始终使用小驼峰
  2. 自定义组件 推荐使用单标签
<!-- bad -->
<script>
props: {
  'greeting-text': String
}
</script>
 
<welcome-message greetingText="hi"></welcome-message>
 
<!-- good -->
<script>
props: {
  greetingText: String
}
</script>
 
<welcome-message greeting-text="hi" />
<WelcomeMessage greeting-text="hi" />

文件代码行数

  1. 推荐 - - - - -》每个文件代码长度 建议在 200 行以下
  2. 强制规定 - -》代码长度不得超过 400 (如果必须超过 续说明理由)

结构化规范

目录文件夹及子文件规范

  • 以下统一管理处均对应相应模块
  • 以下全局文件文件均以 index.js 导出，并在 main.js 中导入
  • 以下临时文件，在使用后，接口已经有了，发版后清除
  • (后期可能根据业务有增)
|-- public                静态资源目录
|-- src                   源码目录
    |--  api                接口，统一管理
    |--  assets             静态资源，统一管理
    |--  commponents        公用组件，全局文件
    |--  config             配置文件
    |--  page               静态视图页面
    |--  router             路由，统一管理
    |--  store              vuex, 统一管理
    |--  util               工具
    |--  views              业务视图
    |--  .eslintrc.js       eslint配置
    |--  App.vue            根组件
    |--  main.js            入口
|-- .gitignore            git忽略配置文件
|-- .prettierrc.js        编码风格配置
|-- babel.config.js       babel配置
|-- package.json
|-- README.md
|-- vue.config.js         项目配置文件
|-- yarn.lock

业务功能文件结构

简要说明: 新增文件必须以-add结尾  详情必须以 details 命名
|-- purchase-order                 采购订单
    |-- components                公共组件 (相对 列表页、详情、新增)
    |-- index.vue                 采购订单列表
    |-- details.vue               采购订单详情
    |-- purchase-order-add.vue    采购订单新增
    |-- utils.js                  公共方法 (相对 列表页、详情、新增)

添加注释列表

  • 公共组件使用说明
  • 各组件中重要函数或者类说明
  • 复杂的业务逻辑处理说明
  • 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
  • 多重 if 判断语句
  • 注释块必须以 /（至少两个星号）开头/
  • 单行注释使用 //

多行注释

/**
 * xxx (用途说明 必选)
 * @param id xxx (参数说明  非必选)
 * @return {Promise<void>} String id (返回说明  如果有返回 必写)
 */
async del(id) {
  await setTimeout()
  return id
}

函数方法常用动词

get 获取/set 设置,
add 增加/remove、delete 删除
edit 编辑/modify 修改,
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 浏览
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 聚集
ToC 系统标准规范Airbnb CSS / Sass