前端开发注意事项
出现原因
项目上线后,客户要求界面基础块统一时,单独改几百个文件是一件枯燥的事,所以,在开发中,需要明确很多注意事项,避免以后一些不必要的处理。本文针对开发全过程记录些注意事项,分为三大点:
- 开发前
- 开发过程中
- 项目上线后
一、开发前注意事项
1 业务逻辑清晰
作为前端开发人员,业务逻辑尽量清晰,表结构能牢记就牢记。
2 界面基础统一
2.1 按钮类
按钮统一有以下几点参考方向:
- 表述类型;
- 大小;
- 水平垂直方向;
- 触发动画;
2.1.1 表述类型
表述类型有哪些,是否一致。
比方说警告、新增等类型 背景,是否含有图标,边框,阴影,内外边距
2.1.2 大小
按钮大小是否统一,文字高度,按钮高度,图标高度 是否一致。
2.1.3 水平垂直方向
方向是否一致,可参考:
- 文字;
- 按钮之间;
- 图标
2.1.4 触发动画
- hover;
- click;
- loading;
- 3d | 2d;
3 基础代码块统一
3.1 css
常用布局css,可以整理一个公用的出来,开发统一使用。
3.2 html
常用标签块,仿用demo标签,争取做到统一。
3.3 js
常用代码封装,做到精简,避免代码冗余。
3.3.1 ajax请求
ajax请求 各个结果判断。
调用多次接口测试,有可能与浏览器有关;排查。
3.3.2 domjs
- 表单;
- 列表;
- 图片;
- 公共方法(校验、时间、替换等);
4 命名
4.1 文件名
大小驼峰严格统一。
4.2 css样式名
大小驼峰,或使用特殊符号(- | _ )严格统一。
4.3 变量名、函数名
大小驼峰,或使用特殊符号(- | _ )严格统一。
二、开发过程中
- 严格遵从划定开发规范 执行;
- 代码移植性 争取提高;
- 开发性能 努力提升(非不要循环控制、引入组件等);
在上线前,有时还需要前端人员进行 测试。
三、上线注意事项
1 去掉非必要部分
1.1 调试内容
例如 debugger 、console等都去掉。
1.2 未使用方法等非必要内容注释
例如 不再使用的遗弃代码。
- 遗弃方法代码块;
- 遗弃的注释;
- 未使用的变量声明
2 测试
在项目上线前,需进行频繁的内容测试。如业务测试、触发回调、代码健壮性、界面交互测试等。
在网络上可查阅 node 测试案例。