WEB前端代码规范

酒鬼SASA

已于 2022-07-13 18:08:22 修改

阅读量768

点赞数

分类专栏：其他 Vue 文章标签：前端代码规范

于 2022-07-13 17:56:19 首次发布

本文链接：https://blog.csdn.net/manyu888888/article/details/125769057

版权

Vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

其他

1 篇文章 0 订阅

订阅专栏

主要命名规则
- 目录名：采用短横分隔。例：directory-name
- 文件名：采用小驼峰方式。例：fileName
- 变量名：采用小驼峰命名。例：variableName
- 事件处理：on+小驼峰方式。例：onSomething()

HTML规范
- 标签上属性的顺序建议如下
  - class ( class 是为高可复用组件设计的,所以应处在第一位)
  - id name (id 更加具体且应该尽量少使用,所以将它放在第二位)
  - src for type href value
  - placeholder title alt
  - required readonly disabled
  - 其他

CSS规范
- 命名规范
  - - 中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号
  - __ 双下划线：双下划线用来连接块和块的子元素
  - _ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态
  - 例：type-block__element_modifier
- 属性顺序
  - 位置属性 position top right z-index display float
  - 大小 width height padding margin
  - 文字系列 font line-height letter-spacing color text-align
  - 背景background border
  - 其他 animation transition
- 尽量不使用标签选择器
- 属性尽量使用简化缩写；例： background: url('./img.png') center;
- 去掉小数点前面的 0 ；例： margin: 10px .8px;

JavaScript / TypeScript 规范
- 命名规则：
  - 变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（lowerNameCase）
  - 全局变量为大写 (UPPERCASE)
  - 常量 (如 PI) 为大写 (UPPERCASE)
- 代码缩进：通常使用2个空格符号来缩进代码块（一个 Tab ，编辑器可设置）
- 空格与运算符：通常运算符 ( = + - * / ) 前后需要添加空格; 例：let x = y + z;
- 变量声明：一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明
- 字符串：最外层统一使用单引号 ' '；例： let z = '<div id="test"></div>'
- 数组、对象：
  - 对象属性名不需要加引号
  - 对象以缩进的形式书写，不要写在一行
  - 数组、对象最后不要有逗号
- 函数
  - 函数调用括号前不需要空格
  - ```
  // 不推荐
  doSomething (item); 
  // 推荐
  doSomething(item);
```
- 无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格
- ```
function doSomething(item) {
}
```
  - 立即执行函数外必须包一层括号
  - ```
  (function() {
      return 1;
  })();
```
- 参数之间用', '分隔，逗号后有一个空格
- ```
// 不推荐
function(a,b,c) {}
// 推荐
function(a, b, c) {}
```
  - 对应的方法应该使用对应的动词，例：get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end

注释

在文件开始时写块注释

/** 
* 作用于哪些页面
* 注明代码业务/功能说明
* @authors Your Name
* @date    2022-06-24
* @version  1.0.0
*/

单个函数注释（公共函数尽量写注释）

/**
* 函数功能简述
*
* 具体描述一些细节
*
* @param {string} address 地址
* @param {array} com 商品数组
* @param {string} pay_status 支付方式
* @returns void
*
* @author Your Name
* @date 2022-06-24
 */