Web前端测试

学习《前端测试》【淘宝UED 赵勇（花名：遇春）】ppt笔记

一. 为什么前端也要测试？（Why？）

1. 产品的变化：前端技术突飞猛进（RIA，Base on browser，Heavy Javascript，HTML5）
2. 开发量的变化：以前前端（Browser）开发量远远小于服务器端（Server），现在比重已大为提升
3. 前端关注点的变化：由重视外部质量（功能、界面）过渡到内部质量（可维护性、性能、设计模式、开发效率）

二. 如何进行前端测试？（How？）

1. 前端测试的目标：

1. 产品界面
2. 功能可用
3. 性能高效稳定
4. 代码可维护性强

2. 从哪些角度进行测试？

1. DOM测试（浏览器、兼容性、DOM）：结构，布局，兼容性
2. 单元测试（匿名函数、Ajax、闭包）：对象属性，方法，过程函数
3. 功能测试（异步、面向过程）：过程
4. 性能测试（性能）：动态执行响应

3. 每种测试的具体目标：

（1）DOM测试：

1. DOM结构完整
2. 模块布局样式无错乱
3. 浏览器兼容性

（2）功能测试：

1. 功能可用
2. 交互过程正确

（3）性能测试：

1. 同步执行耗时
2. 异步响应耗时

（4）单元测试：

1. 函数
2. 对象的属性和方法
3. 业务逻辑

4. 如何提升代码的可测试性？

（1）抽象：由过程式函数结构改为面向对象的结构

抽象的方法：

1. 单一职责法则，更细颗粒的过程抽象
2. 避免使用匿名函数
3. 将数据处理和DOM操作完全分开
4. 分离业务逻辑和展现逻辑
5. 减少闭包，为闭包中待测函数提供全局命名空间

（2）分层；提升可测试性，提升可扩展性（各层关注分离），业务逻辑和展现逻辑分离，UI修改更安全

a. js分层

1. 构建js本地对象
2. 处理数据逻辑
3. 与server通信
4. 添加事件回调
5. 操作DOM和BOM

b. MVC对象结构

1. View：获取DOM和BOM数据，修改DOM和BOM，处理展现层逻辑
2. Model：建立业务数据模型，处理数据间的逻辑关系，提供数据访问器，预留数据事件接口
3. Control：对象实例化，初始化，定义过程（实现View和Model的对接），事件绑定