可交互式页面总结

饥人谷前端六班——第22课

一些面试题

  • What are data- attributes good for?
    • HTML data- 属性是做什么的?
  • 请描述一下 cookies,sessionStorage 和 localStorage 的区别?

目录

  1. 页面的一般制作流程
  2. 示例:某商城

页面的一般制作流程

  1. 从设计师 / 产品经理处得到视觉稿
  2. 分析视觉稿
  3. 将自己的理解与产品经理 & 设计师确认
  4. 开工
  5. 测试
  6. 兼容性测试

前端工程师的位置

视觉稿

页面看起来是什么样子(静态)

  1. 用了什么字体、有哪些图标?
  2. 主要颜色有哪些?
  3. 页面宽度是多少?
  4. 运行在哪些浏览器上?
  5. ……

分析视觉稿

与需求提供者和设计师一起确认

  1. 产品目标
  2. 页面层次结构
  3. 数据(大小)
  4. 有哪些交互

与产品经理 & 设计师确认

目的

  • 只有一个:避免返工

形式:

  • 站立会议
  • Demo 演示

开工

  1. 分析内容结构
  2. 分析页面结构
  3. 分析样式
  4. 分析行为
  5. 脑补视觉稿中没有体现的部分

将 PSD/PNG 变为可交互的页面

测试

  1. 人工测试
    • 刷新 - 点击 - 刷新 - ……
  2. 单元测试
    • QUnit、mocha……
  3. 自动化测试
    • 在 Web 开发领域成本较高,使用得较少

兼容性测试

测试时机

新手:一边实现页面、一边测试,防止错误累积太多

老手:避免使用不兼容的功能,写完页面后测试(较快)

测试工具

  • IE tester?
  • IE 开发者工具(测不到 IE 6)
  • 多个虚拟机
  • 远程登录 Windows

示例

某商场首页

完。

没有作业。

请预习:

$.ajax  http://devdocs.io/jquery-ajax/

Made with Slides.com