常见的前端编码规范

编码规范可以保证代码可读性和健壮性，既方便自己也方便别人哦。

一、注释规范

在开发过程中，我们编写的代码不单单只有自己维护，后期也有其他的小伙伴查看，所以要尽可能让代码阅读起来方便易懂。但是注释并不是越多越好，多余的注释就好像冗余的代码，一旦代码改变，注释会变成负担，只需在合适的位置添加即可，比如复杂的逻辑处。

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 规范

1. img 标签要 alt 属性，最好有内容，没有也要写空
2. 单标签元素不写闭合标签
3. 行内元素内不使用块级元素
4. 尽量使用语义化标签
5. 小写元素名称、属性名称等

2. css 规范

1. 请勿使用 ! important 覆盖样式
2. 严格使用 css module 样式隔离
3. 十六进制值应小写、简写，eg：#fff
4. 避免为 0 指定单位，eg：使用margin: 0 代替 margin: 0px;

三、命名规范

1. CSS 类名

1. 基础组件使用 BEM 风格命名
2. 页面中类名使用驼峰风格命名

2. TS 命名

1. 基础：语义明确，首字母大写
2. 枚举命名：命名以Enum结束
3. 类型命名：命名以Type结束
4. 不要使用 I 做为接口名前缀。

3. 文件命名

1. 组件命名： 驼峰风格命名，首字母大写
2. 页面路由命名：短横线kebab-case风格

这里简单书写了一些常见的编码规范，但是具体的还是要看每一个公司的要求，这个还是比较重要的，开发小伙伴要认真对待哦，