当前位置：首页 > news >正文

编码规范（前端）

news 2025/9/24 10:34:56

文章目录

1. 文档说明
- 1.1 编制说明
- 1.2 名词解释
2.前端研发规范
- 2.1 HTML编码规范
- - 2.1.1 文档类型
  - 2.1.2 语言
  - 2.1.3 元数据
  - 2.1.4 资源加载
  - 2.1.5 页面标题
  - 2.1.6 编码风格
  - 2.1.7 标签
  - 2.1.8 属性
  - 2.1.9 语义化
- 2.2 CSS编码规范
- - 2.2.1 文件引用
  - 2.2.2 命名-组成元素
知识点

1. 文档说明

1.1 编制说明

软件行业的高速发展，对软件开发者的综合素质要求越来越高，不仅仅是编程知识点，其他维度知识点也会影响最后的交付质量，本文档以开发前端项目角度，详细描写了前端的代码规范，分别从HTML、CSS、JavaScript、TypeScript、四个方面入手，并且每个章节进行了详细划分，方便读者能快速定位，规范自己的代码，提高项目质量。

1.2 名词解释

序号	名词	释义
1	JavaScript	（通常编写为JS）是一种高级的，解释型的编程语言。支持面向对象设计，函数式编程，以及指令式编程。
2	圈复杂度	软件源码某部分发圈复杂度就是这部分代码中线性无关路径的数量 eg：如果一段源码中不包含控制流语句（条件或决策点），那么这段代码的圈复杂度为1，因为这段代码中只会有一条路径；如果一段代码中仅包含一个if语句，且if语句仅有一个条件，那么这段代码的圈复杂度为2；包含两个嵌套的if语句，或是一个if语句有两个条件的代码块的圈复杂度为3。
3	认知复杂度	认知复杂度分数根据三个基本规则进行评估：忽略允许将多个语句易于理解地简写成一个的情况在代码线性流程中的每一次中断都增加（+1）（复杂度）断流结构嵌套时增加（复杂度）

2.前端研发规范

2.1 HTML编码规范

2.1.1 文档类型

1）【强制】使用HTML5 DOCTYPE。

//<!DOCTYPE html>
<html>
</html>

2.1.2 语言

1）【推荐】指定html标签上的lang属性。

<html lang="zh-CN"><!--...-->
</html>

2.1.3 元数据

1）【推荐】使用UTF-8字符编码。
声明一个明确的字符编码，可以让浏览器更快更高效地确定适合网页内容的渲染方式。
由于历史原因，不同浏览器采用了不同的字符编码。但对于新业务，如无特殊要求，统一使用UTF-8字符编码，以便统一。
在HTML中使用<meta charset="utf-8:/>声明文档

<head><meta  charset="utf-8" />
</head>

2）【推荐】页面提供给移动设备使用时，需设置viewport。

2.1.4 资源加载

1）【推荐】引入CSS和JavaScript时无需指定type。根据HTML5规范，引入CSS和JavaScript时通常不需要指明type，因为text/css和text/javascript分别是他们的默认值。
2）【推荐】在head标签内引入CSS，在body结束标签前引入JS。在<body></body>中指定外部样式表和嵌入式样式块可能会导致页面的重排和重绘，对页面的渲染造成影响。因此，一般情况下，CSS应在<head></head>标签里引入。

2.1.5 页面标题

1）【强制】页面需要指定title标签，有且仅有1个。

2.1.6 编码风格

1）【推荐】统一使用2个空格缩进，不要使用4个空格缩进或tab缩进。
2）【强制】在HTML注释代码中，不允许出现任何敏感信息。
3）【推荐】单行注释，需在注释内容和注释符之间需留有一个空格，以增强可读性。
4）【推荐】多行注释，注释符单独占一行，注释内容2个空格缩进。

2.1.7 标签

1）【强制】标签名统一使用小写。

<!-- bad -->
<H1>Hello,world!</H1>
<!-- good -->
<h1>Hello,world!</h1>

2）【推荐】不要省略自闭合标签结尾处的斜线，且斜线前需留有一个空格。

<!-- bad -->
<meta name = "viewport" content="width=device-width,initial-scale=1.0">
<img src="images/foo.png" alt="foo"><!-- good -->
<meta name = "viewport" content="width=device-width,initial-scale=1.0" />
<img src="images/foo.png" alt="foo" />

2.1.8 属性

1）【强制】属性值使用双引号，不要使用单引号。
2）【推荐】不要为Boolean属性添加取值。
XHTML需要每个属性声明取值，但是HTML5并不需要。一个元素中Boolean属性存在即表示取值true，不存在则表示取值false。
3）【推荐】自定义属性的命名：以data-为前缀。

2.1.9 语义化

1）【参考】尽量根据语义使用HTML标签。

2.2 CSS编码规范

2.2.1 文件引用

1）【强制】一律使用link的方式调用外部样式。
2）【推荐】不要在<style>块中使用@import；不要在页面中使用<style>块。

2.2.2 命名-组成元素

1）【强制】命名必须由字母、中划线或数字组成且不能以数字或中划线开头。
2）【强制】不允许使用拼音与英文的混合命名，更不允许直接使用中文的方式；禁止同一个含义的内容，在同一个应用中出现多种不同的单词与翻译。

知识点

map用于构建一个新数组，单纯想遍历数组应使用forEach
用copy = {...original,c:3};取代copy = Object.assign(original,{c:3});
将类数组结构转换为数组

const nodes = [...foo];const uniqueNodes = [...new Set(foo)]; //可以利用Set和...将数组去重

ES5与ES6的相同点与不同点