这次给大家带来前端单体编码有哪些规范,使用前端单体编码规范的注意事项有哪些,下面就是实战案例,一起来看一下。
不论是前端还是后台代码,编码规范是尤其重要的,特别是大的项目中,在想开启之初就规范考代码、格式、和要求,会减少很多工作量的,有利于代码的后期维护。
No | 范畴 |
验证内容 |
1 |
页面设计 |
列表标题居中显示。 |
2 | 页面设计 |
查询数据区域数据展示的样式: 1.不定长中文,不定长英文,不定长中英文,不定长英数字靠左 2.定长,定值数据居中,日期,时间,序号居中 3.金额:靠右 |
3 | 共通-书写规范性 | 每个文件头是否有正确的注释 |
4 | 共通-书写规范性 | 每个function是否有正确注释 |
5 | 共通-书写规范性 | 每个配置文件相关内容是否有注释 |
6 | 共通-书写规范性 | 每个逻辑块是否有注释 |
7 | 共通-书写规范性 | 是否有未使用的变量及引用 |
8 | 共通-书写规范性 | 缩进使用tab,设置tab为4个空格 |
9 | HTML-书写规范性 |
标签1: 1.标签名必须使用小写字母,如; 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- ,如 |
12 | HTML-书写规范性 |
编码1: 1.使用 HTML5 的 doctype 来启用标准模式,建议使用大写的 DOCTYPE。 2.页面必须包含 title 标签声明标题。 3.title 必须作为 head 的直接子元素,并紧随 charset 声明之后。 例 |
13 | HTML-书写规范性 |
编码2: 如; 2.若项目为移动端或者为响应式布局,必须指定页面的 viewport。 |
14 | HTML-书写规范性 |
引入: 1.引入 CSS 时必须指明 rel="stylesheet",如; 2.引入 CSS 和 JavaScript 时可以无须指明 type 属性,(有默认值); 3.在 head 中引入页面需要的所有 CSS 资源,JavaScript 应当放在页面末尾,或采用异步加载。(将 script 放在页面中间将阻断页面的渲染)。 |
15 | HTML-书写规范性 |
图片: 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 标签内部提供指示浏览器不支持该标签的说明,如。 |
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 '. |
46 | JS-程序疏通性 |
不要冗余程序,以下的例子作为参考: ・存在未使用的子程序 ・重复初始化 ・定义未使用的变量 |
47 | JS-逻辑正确性 | 没有奇怪的逻辑(空函数及未处理的分支等) |
48 | JS-逻辑正确性 | 文本输入框字符串长度以两点为基础做限制:1、业务上是否要求;2、数据库字段长度是否满足 |
49 | JS-逻辑正确性 | 查询完成后,查询条件应该保留在对应的输入框中 |
50 | JS-逻辑正确性 | 是否对查询结果进行了排序。 |
51 | JS-逻辑正确性 | 查询区域的共计条数应该为当前查询的所有数据的总条数。而不是当前页面的显示条数 |
52 | JS-逻辑正确性 | 查询条件输入框应该去除前后空格后查询 |
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Safari浏览器select下拉列表文字太长不换行的解决方法
Atas ialah kandungan terperinci 前端单体编码有哪些规范. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!