编码规范（前端）

Coisini_甜柚か

已于 2024-04-17 14:51:14 修改

阅读量1k

点赞数 20

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

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

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

本文链接：https://blog.csdn.net/weixin_45266979/article/details/135483383

版权

web前端同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

前端知识库

31 篇文章 0 订阅

订阅专栏

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）【强制】不允许使用拼音与英文的混合命名，更不允许直接使用中文的方式；禁止同一个含义的内容，在同一个应用中出现多种不同的单词与翻译。

	//bad
	.xiangqing {
		//someRules
	}
	.xiaoxi-list {
		//someRules
	}
	//good
	.detail {
		//domeRules
	}
	.news-list {
		//someRules
	}

2.2.3 命名-词汇规范

1）【参考】不依据表现形式来命名。
2）【参考】可根据内容来命名，可根据功能来命名。

	//bad
	left、right、center、red
	//good
	nav、news、aside、search

2.2.4 命名-缩写

1）【强制】保证缩写后还能较为清晰保持原单词所能表述的意思。
2）【推荐】使用业界熟知的或者约定俗成的来定义CSS类名。

	//bad
	navigation => navi、header => head
	//good
	navigation => nav、header =>hd

2.2.5 编码风格

1）【强制】所有声明都应该以分号结尾、不能省略。

 	//bad
	.selector {
		margin-top: 10px;
		padding-left: 15px;
	}
	//good
	.select {
		margin-top: 10px;
		padding-left: 15px;
	}

2）【推荐】使用2个空格缩进，不要使用4个空格或tab缩进。
3）【推荐】选择器和{之间保留一个空格。
4）【推荐】属性名和 : 之前无空格，: 和属性值之间保留一个空格。
5）【推荐】>、+、~ 、|| 等组合器前后各保留一个空格。
6）【推荐】在使用 , 分隔的属性值中，, 之后保留一个空格。
7）【推荐】注释内容和注释符之间留有一个空格。
8）【推荐】声明块的右大括号 } 应单独成行。
9）【推荐】属性声明应单独成行。
10）【推荐】单行代码最多不要超过 100 个字符。
11）【参考】使用多个选择器时，每个选择器应该单独成行。
12）【参考】声明块内只有一条语句时，也应该写成多行。
13）【参考】注释行上方需留有一行空行，除非上一行是注释或块的顶部。

2.2.5 选择器

1）【参考】不要使用id选择器。
id会带来过高的选择器优先级，使得后续很难进行样式覆盖（继而引发使用!impoortant覆盖样式的恶性循环）。
2）【参考】属性选择器的值始终用双引号包裹。

	//bad
	input[typr=text] {
		height: 20px;
	}
	//good
	input[typr='text'] {
		height: 20px;
	}

知识点

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

const nodes = [...foo];

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

ES5与ES6的相同点与不同点

Coisini_甜柚か

关注

20
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
编码规范（前端）

软件行业的高速发展，对软件开发者的综合素质要求越来越高，不仅仅是编程知识点，其他维度知识点也会影响最后的交付质量，本文档以开发前端项目角度，详细描写了前端的代码规范，分别从HTML、CSS、JavaScript、TypeScript、四个方面入手，并且每个章节进行了详细划分，方便读者能快速定位，规范自己的代码，提高项目质量。但对于新业务，如无特殊要求，统一使用UTF-8字符编码，以便统一。单行注释，需在注释内容和注释符之间需留有一个空格，以增强可读性。多行注释，注释符单独占一行，注释内容2个空格缩进。
复制链接

扫一扫