前端编码规范

前端编码规范

代码规范

编码规范

命名规则：

js文件名采用小写，单词之间用“-”连接：例is-ci.js

类的基础命名方式：“项目英文简写-当前页-页面内容块”如“.ijobs-index-box”。

Id 的基础命名方式：语义化，并使用下滑杠连接，如步骤名称可命名为‘#step_name’。

Javascript 变量命名方式：按照变量类型的首个字母为前缀，使用驼峰命名法；

例子：

var aName = ['zhangsan','lizi','zhaowu']; //Array 数组var oBtn = window.document.getElementById('btn'); //Object 对象function fnName(){}; //Function 函数var nAge = 25; //Integer(int) 整型var sWebURL="wangyingran.com"; //String 字符串

代码提交规范

每次代码提交必须有备注说明，注明本次提交做了哪些修改

commit 分类： bugfix: -------- 线上功能 bug sprintfix: ----- 未上线代码修改 （功能模块未上线部分 bug） minor: --------- 不重要的修改（换行，拼写错误等）feature: ----- 新功能说明

前端代码注释

HTML 注释

CSS 注释 内容比较少是可以只在顶部加注释，内容比较多时在尾部加结束标签“/ 注释内容 end /”

/* 新建任务 start */ .new-task{} /* 新建任务名 */ .task-name{color:#333;} /* 新建任务时间 */ .task-created-time{background:url(img/clock.png) no-repeat;} /* 新建任务 end */

JS 注释 JS 注释同上，函数如果有参数，建议简单备注一下参数的内容和类型。

文件或包的引用

(1)【必须】前端页面：在页面中引用 CSS 和 JS、或配置 url 路径时，必须使用“绝对路径”，而不要使用‘…/’，‘./’等相对路径的引用方式。 (2)发布上线之前，需要检查相应的环境是否存在引用的静态资源，不同环境之间不能交叉引用。 (3)在页面中引用开发者编写的静态文件时，需要在资源路径后面增加版本号。

如：

用户体验

页面呈现

(1)全局字体默认使用“微软雅黑”，字号“14px”，字体每增大一号加2px

(2)【必须】页面内容必须保证对齐（最少要有一条参考线），这样能保证页面整齐

(3)整站所有按钮的风格一致（圆角或直角），颜色按功能区分，尽量不要同个颜色按钮放一起

(4)整站不能出现横向滚动条

(5)表格样式：默认左对齐，可根据表格内容适当调整，如下图最后一列操作列可居中对齐

(6)异步加载时，尽量先显示页面的元素，然后再异步导入数据，例下拉框在异步导入的时候有一段时间显示空白，不大友好

(7)页面提示信息，弹窗风格一致，例如都使用 bootstrap 模态框

(8)【必须】出现错误的时候，错误提示信息明确，不要出现源码，错误码等非有好提示

(9)【必须】无数据时，页面必须有提示信息

(10)【必须】页面所有 icon 必须加上 title 提示

(11)字符串过长情况时的页面显示，是否要截断显示，并给出全文显示功能

(12)图标信息展示时，需要加上水印。

WEB控件 表单元素： 对所有已知的表单元素类型，比如数字、电话号码、IP等必须做基本的校验（前后台均要校验）。

文本框：

1.【必须】边界校验：字段长度

所有字段都要做长度、大小限制(不管需求有没有给出明确要求，不管测试颗粒度，都要限制长度，不允许报数据库错误，都要测！！！)。 最大长度限制可限定方法：1、不允许再输入；2、自动截断处理，并且给用户提示

2.判空校验：是否可以为空

3.【必须】特殊符号测试输入：

A.SQL注入校验 or 1<>'1　' or '1'='1' or '1'<>'2"|?>> E.输入特殊字符，特别是&、单引号’、空格检查是否能保存

4.【必须】特殊格式时输入内容是否合法（tel，ip，url，email）序号等校验

5.多文本框空格，换行是否保存

单选框：

1.默认是否有选中2.是否只能选中一个3.与接口交互传递的值是否正确4.选中后出现的效果是否符合预期（不同选择时的展示内容不同的情况）

复选框：

1.多个复选框全不选和全选以及部分选择时传递的值是否正确2.当复选框太多时，是否提供全选、全不选和反选的功能3.选中后出现的效果是否符合预期（不同选择时的展示内容不同的情况）

下拉框： 1.【展示与使用】

2.【数据正确性】

A.下拉框数据被存储后，其他地方显示时，传递的数据正确性检查比如下拉框选项按数字传递，而其他页面显示时应该显示对应的文字 B.组合筛选的情况，有级联操作的，只有选择了前一个数据后，才能进行下一个的选择比如省市之间，只有选择了省份，才能继续选择市，否则市不可选 C.组合下拉框实现的筛选功能正确性检查

时间框：

1.【必须】起、止时间选择检验（起始时间不能晚于结束时间，结束时间不能早于开始时间）2.时间框选择时间后，确定，检查传递的值是否正确，尤其检查是否包含当天，比如最近一个月，是否包含今天等3.时间框展示在不同浏览器下，不同分辨率是否正确

左右选择框：

1.左侧数据源以及右侧选中数据的内容是否正确，前端展示是否符合预期左侧能否展开，展开后显示数据是否正确。首次进入是否展开，右侧数据是否默认展开2.数据添加或删除后，左侧数据置灰检查，右侧数据正确性检查3.两侧数据是否有个数提示，有的话，添加和删除后，个数提示是否正确

按钮： 【按钮展示】

1.自然状态、鼠标悬浮和按钮按下状态下，按钮的状态2.【必须】邻近的按钮颜色要有区分

【操作响应】

列表： 【前端展示】

1.列表记录顺序是否符合预期2.字段名称是否与表单一致3.列表数据为空时，显示是否正确4.列表表头帮助信息是否完整，比如 title 旁边是否有小问号支持

【功能】

1.列表翻页功能是否正确，翻页后，对页面数据做编辑，是否能保存成功，成功之后是否仍停留在当前页2.列表其他附加功能（比如：删除、新增，编辑，-等）是否正常3.列表切换的功能检查比如在列表1和列表2在同一区域展示，展示1时不展示表2当在列表1编辑物料后，切换到列表2，再切换回列表1，检查编辑的物料是否生效

4.带筛选条件的列表展示是否正确：

选择不同的选项，列表中展示筛选的结果，内容，默认排序等是否正确组合条件时，列表中内容是否符合预期

搜索 输入框

1.是否提供模糊查询、输入数值有种类限定时，是否考虑换成下拉框搜索2.考虑搜索结果：是否存在分页，分页是否正常；是否有序3.注意：分页是否仍保存查询条件，检查后面的记录是否符合条件4.【必须】输入不存在的字段值测试、包括特殊字符查询测试例如： ' or '1'='1

下拉框

1.搜索结果是否有序2.分页时，是否保存搜索条

导航条

1.导航是否直观，简单明了，直接反应系统的主要功能2.导航的链接跳转是否正确，tab 间的来回跳转，是否正确，传递的参数是否正确3.导航条之外的公共内容，在导航条不同 tab 内的展示应该保持一致，且功能正确性检查4.导航条各级之间有上下级关系时，进入下级页面，再返回，是否能正常返回上级页面

上传与-（文件或图片）： 【上传】

1.【必须】文件类型、大小是否有限制，如果有，要提前说明2.上传空文件， 超大文件，正在使用的文件等，是否能正确处理3.上传文件错误，提示语是否正确，是否明确出错原因4.文件名是否可以手工输入，输入不存在的文件名称返回是否符合预期，文件名称和后缀名是否有校验5.连续多次选择不同的文件，查看是否上传最后一次选择的文件6.【必须】 Excel 文件类型时，检测文件内容正确与否，出错信息提示明确如：excel 列数不符合预期，内容类型不符合预期

【-】

1.右键是否可以正常-文件，保存到本地是否正常显示2.使用工具-文件，是否可正常-，保存到本地是否正常显示3.对于本机没有安装工具的文件是否能正常打开，能否给出正确提示4.对于直接在页面内打开的内容是否能正常显示5.后台设置了-权限的文件，是否可以被正常-

图表类

树形图

1.各层级用不同图标表示，最下层节点无加减号2.树形图展开和关闭是否正常3.树形图内容展示是否正确，无数据时显示是否符合预期，展开时内容刷新是否正常4.只有单层时和有多层时的显示情况是否正确

曲线图

1.图表的维度，时间轴等的展示是否符合预期，数据展示是否正确2.某一天无数据，其他天有数据时，图表展示是否正常3.鼠标悬浮到曲线上，能展示当前点的数据4.和时间框组合，选择不同的时间，折线图的数据是否自动变化，且显示正确

圆环图

1.图的百分比值是否显示正常，各项的颜色是否与提示一致2.图中心显示的数字长度检查，过长是不是能正常显示3.鼠标浮动到对应项上，是否有浮层提示对应的值，同时检查值是否显示正确4.选择不同的时间框，图形内容是否随时间变化，变化值是否正确5.无数据时显示是否符合预期

柱状图

1.数据为空时的显示是否正确，范围区分是否符合预期2.多个柱状差异比较大时的显示，比如一个数据是 1000，一个是 1，检查页面显示情况3.鼠标悬浮时，浮层的显示内容检查4.选择不同的时间框，图形内容是否随时间变化，变化值是否正确

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。