# 03-前端编码规范 ## 1. HTML ### 文档结构 - **【强制】** 使用 HTML5 DOCTYPE - **【推荐】** 指定 `` - **【推荐】** 使用 UTF-8 编码(``) - **【推荐】** 移动端设置 viewport ### 资源加载 - **【推荐】** CSS 在 `` 引入,JS 在 `` 前引入 - **【推荐】** 引入 CSS/JS 无需指定 type ### 页面标题 - **【强制】** 必须有且仅有 1 个 `` ### 编码风格 - **【推荐】** 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 不得省略大括号