编码规范（前端）

Coisini_甜柚か

已于 2025-03-17 15:31:20 修改

阅读量1.3k

点赞数 20

分类专栏：前端知识库 web前端文章标签：前端

于 2024-03-04 08:55:54 首次发布

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/weixin_45266979/article/details/135483383

版权

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="

最低0.47元/天解锁文章