前端单体编码有哪些规范

php中世界最好的语言

发布时间：2018-03-19 10:42:51

1920人浏览过

来源于php中文网

原创

这次给大家带来前端单体编码有哪些规范，使用前端单体编码规范的注意事项有哪些，下面就是实战案例，一起来看一下。

不论是前端还是后台代码，编码规范是尤其重要的，特别是大的项目中，在想开启之初就规范考代码、格式、和要求，会减少很多工作量的，有利于代码的后期维护。

前端单体编码规范整理表
no	范畴	验证内容
1	页面设计	列表标题居中显示。
2	页面设计	查询数据区域数据展示的样式： 1.不定长中文，不定长英文，不定长中英文，不定长英数字靠左 2.定长，定值数据居中，日期，时间，序号居中 3.金额：靠右
3	共通-书写规范性	每个文件头是否有正确的注释
4	共通-书写规范性	每个function是否有正确注释
5	共通-书写规范性	每个配置文件相关内容是否有注释
6	共通-书写规范性	每个逻辑块是否有注释
7	共通-书写规范性	是否有未使用的变量及引用
8	共通-书写规范性	缩进使用tab，设置tab为4个空格
9	HTML-书写规范性	标签1： 1.标签名必须使用小写字母，如<p></p>； 2.对于无需自闭合的标签，不允许自闭合，如 input、br、img、hr 等； 3.对 HTML5 中规定闭合标签，不允许省略闭合标签。
10	HTML-书写规范性	标签2： 1 标签使用必须符合标签嵌套规则，如 p 不得置于 p 中，tbody 必须置于 table 中。 2.HTML 标签的使用应该遵循标签的语义。常见标签语义 p - 段落 h1,h2,h3,h4,h5,h6 - 层级标题 strong,em - 强调 ins - 插入 del - 删除 abbr - 缩写 code - 代码标识 cite - 引述来源作品的标题 q - 引用 blockquote - 一段或长篇引用 ul - 无序列表 ol - 有序列表 dl,dt,dd - 定义表格
11	HTML-书写规范性	属性： 1.属性名必须使用小写字母； 2.属性值必须用双引号包围； 3.自定义属性建议以 xxx- 为前缀，推荐使用 data- ，如<ol data-ui-type="Select"></ol>。
12	HTML-书写规范性	编码1： 1.使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。 2.页面必须包含 title 标签声明标题。 3.title 必须作为 head 的直接子元素，并紧随 charset 声明之后。例<head> <meta charset="UTF-8"> <title>页面标题</title> </head>
13	HTML-书写规范性	编码2： 1.保证 favicon 可访问，（根目录放置 favicon.ico 文件，使用 link 指定 favicon）如<link rel="shortcut icon" href="path/to/favicon.ico">； 2.若项目为移动端或者为响应式布局，必须指定页面的 viewport。
14	HTML-书写规范性	引入： 1.引入 CSS 时必须指明 rel="stylesheet"，如<link rel="stylesheet" href="page.css">； 2.引入 CSS 和 JavaScript 时可以无须指明 type 属性，（有默认值）； 3.在 head 中引入页面需要的所有 CSS 资源，JavaScript 应当放在页面末尾，或采用异步加载。（将 script 放在页面中间将阻断页面的渲染）。
15	HTML-书写规范性	图片： 1.禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src（src为空会导致页面重加载)； 2.避免为 img 添加不必要的 title 属性，(多余的 title 影响看图体验，并且增加了页面尺寸)； 3.为重要图片添加 alt 属性； 4.有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。
16	HTML-书写规范性	表单： 1.有文本标题的控件必须使用 label 标签将其与其标题相关联； 2.使用 button 元素时必须指明 type 属性值； 3.负责主要功能的按钮在 DOM 中的顺序应靠前，（建议如此，具体以设计为准）。
17	HTML-书写规范性	视频与音频： 1.在支持 HTML5 的浏览器中优先使用 audio 和 video 标签来定义音视频元素； 2.只在必要的时候开启音视频的自动播放； 3. 在 object 标签内部提供指示浏览器不支持该标签的说明，如<object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>。
18	CSS-书写规范性	样式行长度每行不得超过 120 个字符，除非单行不可分割。
19	CSS-书写规范性	命名： 1.class、id必须单词全字母小写，单词间以 - (中划线)分隔； 2.class、id 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名，如 left, right, center, red, black等单词单独出现在命名里； 3.class必须加上相应前缀（避免全局污染），如 g-代表全局样式、m- 代表模块的样式、ui-代表组件的样式等，具体以项目规定为准； 4.单个样式不能允许出现 !important； 5.不允许 class 只用于让 JavaScript 选择某些元素，创建无样式信息的 class，（使用id）； 6.元素 id 必须保证页面唯一； 7.同一页面，不同的标签，避免使用相同的 name 与 id（同一标签可使用）。
20	CSS-书写规范性	当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
21	CSS-书写规范性	属性选择器中的值必须用双引号包围。如input[name="acd"] {……}
22	CSS-书写规范性	当数值为 0 - 1 之间的小数时，省略整数部分的 0。如 opacity: .8
23	CSS-书写规范性	url() 函数中的路径不加引号。如 background: url(bg.png);
24	CSS-书写规范性	长度为 0 时须省略单位。如 padding: 0 5px
25	CSS-书写规范性	样式代码应独立保存在后缀名为.css的文件中，非特殊情况下不得写行间样式。
26	CSS-书写规范性	RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
27	CSS-书写规范性	颜色： 1.RGB颜色值必须使用十六进制记号形式 #aabbcc，不允许使用 rgb(); 2.颜色值可以缩写时，必须使用缩写形式;如#fff,#000 3.颜色值不允许使用命名色值；如使用red green等不确定值 4.颜色值都统一使用小写英文字母。
28	CSS-书写规范性	字体1： 1. font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中，严禁使用中文。例 font-family: "Microsoft YaHei"; 字体操作系统 Family Name 宋体 (中易宋体) Windows SimSun 黑体 (中易黑体) Windows SimHei 微软雅黑 Windows Microsoft YaHei 微软正黑 Windows Microsoft JhengHei 华文黑体 Mac/iOS STHeiti 冬青黑体 Mac/iOS Hiragino Sans GB 文泉驿正黑 Linux WenQuanYi Zen Hei 文泉驿微米黑 Linux WenQuanYi Micro Hei
29	CSS-书写规范性	字体2： 1.font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )；例 font-family: Arial, sans-serif;
30	CSS-书写规范性	字号： 1.需要在 Windows 平台显示的中文内容，其字号应不小于 12px； 2.需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。
31	JS-书写规范性	命名：常见的几种命名：驼峰命名thisIsAnApple 、帕斯卡命名ThisIsAnApple、下划线命名this_is_an_apple、中划线命名this-is-an-apple 1.方法/属性名、变量名、参数名、命名空间、函数名，必须使用驼峰命名； 2.类名、枚举名、构造函数，必须使用帕斯卡命名； 3.常量名、枚举的属性：必须使用全部大写的下划线命名法，如IS_DEBUG_ENABLED； 4.私有（保护）成员(属性、函数等)：必须以下划线_开头； 5.boolean类型的应当使用is、has等起头，表示其类型； 6.命名同时还需要关注语义，如变量名应当使用名词、函数名应当用动宾短语(getAccListData)、类名应当用名词。
32	JS-书写规范性	JavaScript程序应独立保存在后缀名为.js的文件中。
33	JS-书写规范性	避免每行超过80个字符。
34	JS-书写规范性	尽量减少全局变量的使用，不要让局部变量覆盖全局变量。
35	JS-书写规范性	可以使用共通函数的情况下，是否使用了共通函数。
36	JS-书写规范性	语句： 1.每一行最多只包含一条语句，把;(分号)放到每条简单语句的结尾处； 2.return 语句一条有返回值的return语句不要使用( )(括号)来括住返回值。如果返回表达式,则表达式应与return 关键字在同一行,以避免误加分号错误； 3.避免使用continue语句，它很容易使得程序的逻辑过程晦涩难懂； 4.eval是JavaScript中最容易被滥用的方法，避免使用。
37	JS-书写规范性	ES5语法必须将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域，防止全局命名空间被污染。
38	JS-书写规范性	代码中加入js严格模式‘use strict'
39	JS-书写规范性	变量声明：使用var或let声明变量，不指定变量将被隐式地声明为全局变量，这将对变量难以控制。
40	JS-程序疏通性	明智地使用真假判断，if(a == true) 是不同于 if(a) 的，这种判断会通过特殊的操作将其转换为 true 或 false，下列表达式统统返回 false：false, 0, undefined, null, NaN,（空字符串）.
41	JS-程序疏通性	避免在循环中创建函数，在简单的循环语句中加入函数是非常容易形成闭包而带来隐患。
42	JS-程序疏通性	避免在语句块内声明函数，严格模式下是会报语法错误。
43	JS-程序疏通性	用数组和对象字面量来代替数组和对象构造器，数组构造器很容易让人在它的参数上犯错。
44	JS-程序疏通性	三元条件判断（if 的快捷方法），用三元操作符分配或返回语句，避免在复杂的情况下使用。
45	JS-程序疏通性	字符串统一使用单引号(‘)，不使用双引号(“)，这在创建 HTML 字符串非常有好处：如 var msg = 'This is some HTML <p class="makes-sense"></p>'.
46	JS-程序疏通性	不要冗余程序，以下的例子作为参考：・存在未使用的子程序・重复初始化・定义未使用的变量
47	JS-逻辑正确性	没有奇怪的逻辑（空函数及未处理的分支等）
48	JS-逻辑正确性	文本输入框字符串长度以两点为基础做限制：1、业务上是否要求；2、数据库字段长度是否满足
49	JS-逻辑正确性	查询完成后，查询条件应该保留在对应的输入框中
50	JS-逻辑正确性	是否对查询结果进行了排序。
51	JS-逻辑正确性	查询区域的共计条数应该为当前查询的所有数据的总条数。而不是当前页面的显示条数
52	JS-逻辑正确性	查询条件输入框应该去除前后空格后查询

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关专题

TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开，深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析，帮助开发者构建类型安全、结构清晰、易维护的前端工程体系，提高团队协作效率与代码质量。

2026.03.13

Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开，深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例，帮助开发者掌握 Python 在高并发场景中的高效开发方法，并提升系统资源利用率与整体运行性能。

2026.03.12

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

276

2026.03.11

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

105

2026.03.06

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

230

2026.03.05

PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

619

2026.03.04