前端项目自测

本文详细列举了前端工程师在开发过程中应该关注的自测点,包括Table列表、图文卡片列表、文件上传、弹框、表单、Banner图片、全局切换和全局样式的功能与样式检查,确保前端界面的交互体验和视觉效果。内容涵盖功能验证、样式一致性、异常情况处理等多个方面,是前端质量把控的重要参考。
摘要由CSDN通过智能技术生成

作为一个优秀的前端工程师,我们应该掌握一些前端自测的点

前端自测

Table列表

是否使用公共组件
	功能
		列表加载时是否加loading
		表单参数查询是否正常
		排序是否正常
		表头筛选是否正常
		翻页是否正常
		查询、筛选、排序操作后传入的分页参数是否正常
		批量操作是否正常
		删除或其他关键操作是否已提供二次确认框
	样式
		搜索表单控件间距是否正确
		搜索表单按钮间距、图标是否正确
		表头筛选、排序后高亮、图标是否正确
		列宽分配是否合理
		单元格内容展示形式是否合理
			文本内容过长需使用超出隐藏+toolTips弹框
			操作列按钮过多需要折叠

图文卡片列表

	功能
		翻页功能是否正确
	样式
		文字内容过多、过少时是否正确显示
		图片不按约定尺寸上传时是否正确显示
		图片列表无图片时是否正确显示
		无数据时是否做兼容

文件上传

	功能
		文件类型是否限制
		文件大小是否限制
		文件数量是否限制
		上传建议文案是否正确
		删除功能是否正常
		操作成功后提示语及动作是否正确
	样式
		文件预览样式是否正确
			预览图片是否变形
			不同颜色预览图片上删除按钮是否可见
			文件名过长时样式是否正确
		文件过多时样式是否正确
		无数据时是否做兼容

弹框

	是否使用公共组件
	功能
		表单弹框关闭后是否清除数据及校验结果
	样式
		按钮文案、顺序、间距是否正确
		弹框类型、标题、图标是否正确
		表单弹框表单项名称位置、间距是否正确
		表单弹框必填项标识位置是否正确

表单

	功能
		表单字段是否正确
			表单字段是否缺失
			表单字段名是否与接口文档对应
			已隐藏或删除的表单项是否已从提交数据中删除
		表单校验是否正确
			必填项需提供星号标识和提示
			校验规则需和产品设计一致
			输入项需考虑输入长度限制(与后端、产品协商)
			联动表单项、动态表单项校验是否正确
			校验提示语是否正确
			校验提示语句格式需保持统一
		表单回显是否正确
			字段缺失时是否做兼容
			后端返回数据类型不正确时是否做判断
			下拉、级联、多选、单选、树回显数据是否正确
		重复提交是否设限
		表单弹框关闭后是否清除数据及校验结果
		操作成功后动作是否正确
			成功后是否需要清除数据
			提示文字是否正确
			页面跳转是否正确
			修改列表数据时,操作完成后列表数据是否刷新
	样式
		表单项间距是否正确
		表单项名称位置、间距是否正确
		必填项标识位置是否正确
		按钮文案、间距是否正确

Banner图片

	功能
		轮播切换时长是否正确
		手动切换后,自动轮播是否正确
	样式
		图片是否正确展示
			不按约定尺寸上传的图片需要做兼容
		无数据时是否做兼容

全局切换

	组织切换
	项目切换
	功能
		切换下拉框内回显是否正确
		切换后页面数据是否正常
		应用切换后当前组织或项目是否正确
		刷新后当前组织或项目是否正确

全局样式

	正文、表单组件字号12px
	PC网页1440屏幕内是否可正常展示
	logo、用户头像是否展示正确
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值