编码规范可以保证代码可读性和健壮性,既方便自己也方便别人哦。
一、注释规范
在开发过程中,我们编写的代码不单单只有自己维护,后期也有其他的小伙伴查看,所以要尽可能让代码阅读起来方便易懂。但是注释并不是越多越好,多余的注释就好像冗余的代码,一旦代码改变,注释会变成负担,只需在合适的位置添加即可,比如复杂的逻辑处。
vscode 提供注释的插件,比如 koroFileHeader 等,之后结合 Eslint 等进行代码检测。
1. 单行注释
单行注释一般使用在变量定义,函数调用,函数体内逻辑解释等。
// 变量解释,尽可能放在上面,而不是后面
var params = 1;
// 注释上部尽量保留一个空行,增加可读性
// 函数功能解释
function sum(num1, num2);
2. 多行注释
/**
* 多行注释,此处表示函数具体功能
* @param a 参数 1 含义
* @param b 参数 2 含义
* @yapi xxx 使用接口时添加 yapi 链接
* @doc 使用外部链接添加文档
* @return 返回内容
*/
function func(a, b) {
var a = 1;
var b = 2;
// 单行注释,逻辑含义
if (a > b) {
// do
}
}
/**
* 枚举注释
*/
enum DemoEnum {
/** 枚举1含义 */
枚举1,
/** 枚举2含义 */
枚举2,
}
/**
* 类注释
*/
class DemoClass {
/** 类属性注释 */
private prop1:Number = 100;
/**
* 类函数注释,与普通函数注释保持一致
*/
func() {}
}
3. dom 注释
<!-- template中注释形式 -->
<div>
<!-- 模块功能,注意事项 -->
<div>具体内容</div>
</div>
二、编码规范
1. html 规范
- img 标签要 alt 属性,最好有内容,没有也要写空
- 单标签元素不写闭合标签
- 行内元素内不使用块级元素
- 尽量使用语义化标签
- 小写元素名称、属性名称等
2. css 规范
- 请勿使用 ! important 覆盖样式
- 严格使用 css module 样式隔离
- 十六进制值应小写、简写,eg:
#fff
- 避免为 0 指定单位,eg:使用
margin: 0
代替margin: 0px;
三、命名规范
1. CSS 类名
- 基础组件使用 BEM 风格命名
- 页面中类名使用驼峰风格命名
2. TS 命名
- 基础:语义明确,首字母大写
- 枚举命名:命名以Enum结束
- 类型命名:命名以Type结束
- 不要使用
I
做为接口名前缀。
3. 文件命名
- 组件命名: 驼峰风格命名,首字母大写
- 页面路由命名:短横线kebab-case风格
这里简单书写了一些常见的编码规范,但是具体的还是要看每一个公司的要求,这个还是比较重要的,开发小伙伴要认真对待哦,