前端开发注意事项

出现原因

项目上线后，客户要求界面基础块统一时，单独改几百个文件是一件枯燥的事，所以，在开发中，需要明确很多注意事项，避免以后一些不必要的处理。本文针对开发全过程记录些注意事项，分为三大点：

• 开发前
• 开发过程中
• 项目上线后

一、开发前注意事项

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 测试案例。