前端开发工作要求.md

前端开发工作要求

一、严格按照设计稿制作

文字样式

• 字体
• 字号
• 间距：行间距、段落间距
• 缩进
• 超出溢出
• 颜色

布局样式

• 块元素间距：内间距、外间距
• 描边：颜色、粗细、圆角
• 对齐：居中、平均分布、自动换行
• 大小应被撑起：自适应宽高、固定宽高
• 浮动与定位：固定位置、绝对定位

文字块、列表块

• 标题使用h标签
• 尽量使用统一的标签

图片图形

• 能用css简单绘制的，不使用图片
• 小图标都使用精灵图，不使用单独图标文件
• 图片资源的过大，需要考虑分割及压缩
• 根据实际情况考虑图片资源的格式

兼容性、适配

• 屏幕大小适配、最小宽度，最小高度等（pc端、手机，平板）
• 浏览器兼容性适配
• 平台适配、PC端、移动端、MAC系统

二、视觉及交互体验调整

视觉

• 布局块对齐
• 字体字号颜色等统一化``````````
• 页面间相同的部分，样式应当一致

交互及细节

• 弹框、弹出层过渡效果
• 鼠标悬停样式
• 感应区域：大小 手型 变化
• 操作响应：提示、动画、冒泡
• 表单操作：基本的验证、基本的提示、边框颜色，禁用等

样式

• 样式定义分层、分模块
• 样式名加模块前缀
• 样式名称要有意义
• 样式复用为原则，避免1个元件1个样式

html

通用

  * 图片要写alt
  * 不用混用元素的id命和class名
  * html文件名全小写，尽量使用1个单词，不超过两个单词

Vue项目、React项目

  * 不要使用id来获取元素，尽量不使用document
  * 不要将css样式写在交互代码里面
  * 不要在html标签内写style标签
  * 路由全小写，尽量使用1个单词，不超过2个单词

交互代码

通用

   * 命名格式规范
   * 代码格式规范
   * 逻辑分层：数据逻辑、业务逻辑一定要分离

Vue项目、React项目

   * 业务逻辑，严禁写在数据池
   * 数据逻辑，严禁写在vue文件
   * 组件中，不允许出现业务逻辑，只能写交互逻辑
   * 组件定义的接口尽量简洁明了
   * 多个界面的组件，尽量使用状态来描述
   * 预加载文件一定要仔细编写
   * 调接口前先判断缓存、并根据实际逻辑定义缓存过期规则