编码规范
命名规范
- 项目命名
项目文件夹全部采用小写方式， 以中划线分隔。正例： mall-management-system 反例： mall_management-system / mallManagementSystem - 目录命名
基于业务二次封闭的组件全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数
【特殊】VUE 的项目中的 components 中的组件目录，使用 kebab-case(中横线) 命名正例: scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img /doc 反例：script / style / demo_scripts / demoStyles / imgs / docs
【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名正例： head-search / page-loading / authorized / notice-icon 反例： HeadSearch / PageLoading正例：page-one / shopping-car / user-management 反例：ShoppingCar / UserManagement上面写了特殊是因为，对于这种规范有些团队(Vue-element-admin)用的并不是kebab-case相反他用的就是驼峰命名，但是一定不会用小驼峰命名 - 静态资源文件命名
JS、CSS、SCSS、HTML、PNG 等静态文件的命名全部采用小写方式， 以中划线分隔
实例：正例：render-dom.js / signup.css / index.html / company-logo.png 反例：renderDom.js / UserManagement.html
- 命名严谨性
代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用
杜绝完全不规范的缩写，避免望文不知义：正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。 反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3正例：getContractBaseInfo (获取合同基本信息) 如果函数名太长可以将重要部分写全, 修饰的简写成前四个 反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，
HTML 规范 （Vue Template 同样适用）
- HTML 类型
建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限- 规定字符编码 - IE 兼容模式 - 规定字符编码 - doctype 大写<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta charset="UTF-8" /> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company" /> </body> </html>- 缩进 缩进使用 2 个空格（一个 tab）嵌套的节点应该缩进。 - 分块注释 在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式 - 引号 对于引号我一般是这样的, 结构、模板中的用双引号，js 中用单引号 - 语义化标签 HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签//语义化 <header></header> <footer></footer> //非语义 <div> <p></p> </div>
CSS 规范
- 命名
- 类名使用小写字母，以中划线分隔 - id 采用驼峰式命名 - SCSS中的变量、函数、混合、placeholder 采用驼峰式命名 ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂 的名称/*不推荐*/ .fw-800 {font-weight: 800;} .red {color: red;} /*推荐*/ .heavy {font-weight: 800;} .important {color: red;} - 选择器
- CSS 选择器中避免使用标签名 从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签， 并且在 css 选择器中出现 标签名会存在潜在的问题。 - 很多前端开发人员写选择器链的时候不使用 直接子选择器 直接子选择器和后代选择器的区别有时的，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。 然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的， 需要匹配到 DOM 末端的选择器， 你应该总是考虑直接子选择器。
尽量使用缩写属性/*不推荐*/ .content .title {font-size: 2rem;} /*推荐*/ .content > .title {font-size: 2rem;}
避免使用 ID 选择器及全局标签选择器防止污染全局样式/*不推荐*/ border-width: 1px; border-style: solid; border-color: red; /*推荐*/ border: 1px solid red;/*不推荐*/ #header{height:500px;} /*推荐*/ .header{height:500px;}
LESS/SCSS 规范
Javascript 规范
- 函数方法常用的动词:
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 聚集
Vue 项目规范
- Vue 编码基础
- 组件规范
- 模板中使用简单的表达式
- 指令都使用缩写形式
- 标签顺序保持一致
- 必须为 v-for 设置键值 key
- v-show / v-if / v-for 选择
如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。 避免 v-for 和 v-if 一起使用，改用绑定为一个计算属性，在计算属性里过滤满足条件的数据 - Vue options 顺序
- Vue Router 规范
// 动态加载 export const reload = [ { path: '/reload', name: 'reload', component: Main, meta: { title: '动态加载', icon: 'icon iconfont', }, children: [ { path: '/reload/smart-reload-list', name: 'SmartReloadList', meta: { title: 'SmartReload', childrenPoints: [ { title: '查询', name: 'smart-reload-search', }, { title: '执行reload', name: 'smart-reload-update', }, { title: '查看执行结果', name: 'smart-reload-result', }, ], }, component: () => import('@/views/reload/smart-reload/smart-reload-list.vue'), }, ], }, ];
Vue 项目目录规范
-
基础
vue 项目中的所有命名一定要与后端命名统一。 比如权限：后端 privilege, 前端无论 router , store, api 等都必须使用 privielege 单词！ -
使用 Vue-cli 脚手架
使用 vue-cli3 来初始化项目，项目名按照上面的命名规范。 -
目录说明
目录名按照上面的命名规范，其中 components 组件用大写驼峰，其余除 components 组件目录外的 所有目录均使用 kebab-case 命名。
-
注释说明
-
其他
作者：前端自学驿站
链接：https://juejin.im/post/6888559622391595016
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
扫一扫
630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
