v6ole
132 lines
4.3 KiB
Markdown
132 lines
4.3 KiB
Markdown
# 03-前端编码规范
|
||
|
||
## 1. HTML
|
||
|
||
### 文档结构
|
||
- **【强制】** 使用 HTML5 DOCTYPE
|
||
- **【推荐】** 指定 `<html lang="...">`
|
||
- **【推荐】** 使用 UTF-8 编码（`<meta charset="utf-8" />`）
|
||
- **【推荐】** 移动端设置 viewport
|
||
|
||
### 资源加载
|
||
- **【推荐】** CSS 在 `<head>` 引入，JS 在 `</body>` 前引入
|
||
- **【推荐】** 引入 CSS/JS 无需指定 type
|
||
|
||
### 页面标题
|
||
- **【强制】** 必须有且仅有 1 个 `<title>`
|
||
|
||
### 编码风格
|
||
- **【推荐】** 2 个空格缩进
|
||
- **【强制】** HTML 注释中不允许出现任何敏感信息
|
||
- **【强制】** 标签名统一小写
|
||
- **【推荐】** 自闭合标签结尾加斜线
|
||
|
||
### 属性
|
||
- **【强制】** 属性值用双引号
|
||
- **【推荐】** Boolean 属性不添加取值
|
||
- **【推荐】** 自定义属性以 `data-` 为前缀
|
||
|
||
---
|
||
|
||
## 2. CSS
|
||
|
||
### 文件引用
|
||
- **【强制】** 一律使用 `<link>` 引入外部样式
|
||
- **【推荐】** 不要在 `<style>` 块中使用 `@import`
|
||
|
||
### 命名
|
||
- **【强制】** 由字母、中划线、数字组成，不能以数字或中划线开头
|
||
- **【强制】** 禁止拼音与英文混合，禁止中文
|
||
- **【参考】** 不依据表现形式命名，依据内容/功能命名
|
||
- **【强制】** 缩写后仍能保持原单词意思
|
||
|
||
### 编码风格
|
||
- **【强制】** 所有声明以分号结尾
|
||
- **【推荐】** 2 个空格缩进
|
||
- **【推荐】** 选择器和 `{` 之间保留一个空格
|
||
- **【推荐】** `:` 和属性值之间保留一个空格
|
||
- **【推荐】** 单行不超过 100 字符
|
||
|
||
### 属性
|
||
- **【参考】** 不要使用 id 选择器
|
||
- **【推荐】** 不使用 `!important`
|
||
- **【推荐】** 十六进制统一小写
|
||
- **【推荐】** 属性声明顺序：定位 → 盒模型 → 文字排版 → 外观 → 其他
|
||
|
||
---
|
||
|
||
## 3. JavaScript
|
||
|
||
### 变量
|
||
- **【强制】** 使用 `const` 或 `let`，禁止 `var`
|
||
|
||
### 字符串
|
||
- **【强制】** 使用单引号或反引号
|
||
- **【推荐】** 模板字符串代替拼接
|
||
|
||
### 比较
|
||
- **【强制】** `===` 和 `!==` 代替 `==` 和 `!=`
|
||
|
||
### 函数
|
||
- **【强制】** 不要定义 `arguments` 参数
|
||
- **【强制】** 不要用 `Function` 构造函数
|
||
- **【强制】** 不要在块中声明函数
|
||
- **【强制】** 不使用 `arguments` 对象，用 `...` 替代
|
||
- **【推荐】** 使用默认参数语法
|
||
- **【参考】** 圈复杂度 ≤ 10，认知复杂度 ≤ 15
|
||
|
||
### 数组/对象
|
||
- **【推荐】** 字面语法创建
|
||
- **【强制】** `map/filter/reduce` 等回调必须有 return
|
||
- **【推荐】** 使用 `...` 展开运算符
|
||
|
||
### 模块
|
||
- **【推荐】** 使用 ES6 modules
|
||
- **【强制】** 禁止重复 import 同一模块
|
||
- **【强制】** import 放到模块最上方
|
||
- **【强制】** 禁止 default import 与其他 export 同名，禁止自引用、循环引用
|
||
|
||
### 代码风格
|
||
- **【强制】** 2 个空格缩进
|
||
- **【推荐】** 添加尾随分号
|
||
- **【推荐】** 文件最大行数 1000，函数最大行数 80
|
||
- **【推荐】** 单行最大字符数 100
|
||
|
||
### 命名
|
||
- **【强制】** 避免单字母名
|
||
- **【参考】** 变量/函数用小驼峰（camelCase），类用大驼峰（PascalCase）
|
||
|
||
---
|
||
|
||
## 4. TypeScript
|
||
|
||
### 类型声明
|
||
- **【强制】** interface/type 中成员分隔符统一用分号
|
||
- **【强制】** 类型声明时冒号前无空格、冒号后一个空格，箭头前后各一个空格
|
||
- **【强制】** 优先使用 `Interface` 而非 `type`
|
||
- **【强制】** interface 和 type 定义时必须声明成员类型
|
||
- **【推荐】** 简单数组用 `T[]`，复杂类型用 `Array<T>`
|
||
- **【强制】** 禁止无意义的 void 类型
|
||
|
||
### 类
|
||
- **【参考】** 为类成员声明可访问类型（public/private/protected）
|
||
- **【推荐】** 字面量属性用 `readonly` 而非 getter
|
||
|
||
### 变量
|
||
- **【强制】** 不得使用 `var`
|
||
- **【推荐】** 优先用 `const`，必要时用 `let`
|
||
- **【推荐】** 如非必要不使用 `any`
|
||
- **【参考】** 优先使用 `undefined`，避免 `null`
|
||
|
||
### 断言
|
||
- **【强制】** 类型断言使用 `as Type` 语法
|
||
|
||
### 枚举
|
||
- **【参考】** 使用联合类型替代枚举，避免在新代码中使用枚举
|
||
|
||
### 其他
|
||
- **【强制】** 禁止使用三斜杠 `///` 导入
|
||
- **【强制】** 禁止使用 `namespace`
|
||
- **【强制】** 重载函数写在一起
|
||
- **【强制】** 即使是单行语句，if/else/for/while 不得省略大括号
|