1、代码缩进****
前端: 前端代码缩进为 两个制表符
2、命名规范
1.一律小写;
2.尽量用英文(汉字跨域或引入会需要解码,很麻烦);
3.尽量不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词,如:wrapper可以写成wrap。
(命名千万要有意义 避免使用 var x= “”;之类的命名)****
3、驼峰命名法
3.1、小驼峰命名:
除第一个单词之外,其他单词首字母大写(常用于变量)
3.2、大驼峰命名:(帕斯卡命名法)
4、匈牙利命名法
变量属性+ 变量类型 + 变量描述 = 变量名
匈牙利命名 -- 描述(常用)
5、下划线分割命名法
所有字母都是小写,每个单词之间用下划线分开
4、空行释
写注释,虽然写起来很麻烦,也不能被机器运行,没有什么实际的效果,但 可以清楚的提醒程序员,被注释的这段代码功能是什么,需要传什么参数等等
写注释需要注意
· 最好不要在注释中使用缩写,特别是用的很少的 不经常使用的缩写。
· 注释书写时要准确、易懂,不要有二义性。错误的注释只会让你或看这段代码的人多加班
· 注释的书写的位置最好放在被描述的代码上行,或者右侧
注释:
1、单行注释: // 注释内容
2、多行注释:/* 注释内容 */
3、文档注释:/** 注释内容 */
5、空行
每写完一个代码功能块,应该空出一行,表示这个代码块已经结束了,后面出现的代码是下一个代码功能块的,与本代码块无关,(不空行也没什么影响,只是空行会让人看起来很舒服)
6、目录命名
全部采用小写方式, 以中划线分隔,有复数结构时,要采用复数命名法, 缩写不用复数
【特殊】VUE 的项目中的 components 中的组件目录,使用 kebab-case 命名
【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名
JS、CSS、LESS、HTML、PNG文件命名
3、HTML规范
推荐使用 HTML5 的文档类型申明: .
(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限)。
1、规定字符编码
2、IE兼容模式
3、Doctype大写
4、分块注释
在每一个块状元素,列表元素和表格元素后,加上一对 HTML 注释。注释格式
5、语义化标签
HTML5 中新增很多语义化标签,所以优先使用语义化标签,避免一个页面都是 div 或者 p 标签
1、引号
使用双引号(" ") 而不是单引号(’ ') 。
正例: ``
反例: “”
4、CSS规范
1、命名
类名使用小写字母,以中划线分隔
id 采用驼峰式命名
scss 中的变量、函数、混合、placeholder 采用驼峰式命名
ID 和 class 的名称总是使用可以反应元素目的和用途的名称,或其他通用的名称,代替表象和晦涩难懂的名称
不推荐:
推荐:
2、选择器
1、css 选择器中避免使用标签名
从结构、表现、行为分离的原则来看,应该尽量避免 css 中出现 HTML 标签,并且在 css 选择器中出现标签名会存在潜在的问题。
2、很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的区别)。有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而,在任何情况下,这是一个非常不好的做法。如果你不写很通用的,需要匹配到 DOM 末端的选择器, 你应该总是考虑直接子选择器。
不推荐:
推荐:
3、尽量使用缩写属性
不推荐:
推荐:
4、每个选择器及属性独占一行
不推荐:
推荐:
5、避免使用ID选择器及全局标签选择器防止污染全局样式
不推荐:
推荐:
4、Javascript规范
1、命名
采用小写驼峰命名 lowerCamelCase,代码中的命名均不能以下划线,也不能以下划线或美元符号结束
方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格,必须遵从驼峰形式。
增删查改,详情统一使用如下 5 个单词,不得使用其他(目的是为了统一各个端)
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 签入,