“事件”& 前端代码设计淘宝旅行计划前端架构及解决方案

杨翰文（地极） @ 淘宝微博： @ 微波小吃

为什么是“事件”？

Javascript 中的“事件”有哪些特点？

欢迎体验！

http://go.taobao.com/plan.htm

模块多 平台型产品 富交互

模块多：如何有效的管理各种模块触发的事件？

平台型产品：如何保证简单快速的扩展能力？

富交互：如何有效的组织交互逻辑？

Answer …

关于事件管理

解耦：不同的模块产生了许多“事件”

资源数据过滤操作

问题：需要了解事件到底是由哪个组件发出的

全局事件代理机制：集中控制自定义事件

解决方案：增加一个代理层

基本工作流程

• 需要冒泡到代理的事件在初始化时要注册到代理层

• 事件名称约束：“模块 . 事件名称” - 》“ EP. 事件名称”

• 使用时只需要监听代理层相应的事件即可，不必了解事件的来源

关于快速扩展

Eclipse

Aptana

FlexBuilder

FreeMind

灵活扩展：扩展点机制

扩展点：预先定义好的可以扩展的地方

扩展（插件）：对扩展点的实现

ExtensionPoint

在目标对象上创建扩展

点

设定对应的扩展的前辍

扫描目标对象并将对应的扩展加入到扩展点上

提供启动扩展点和停用扩展点的方

法

指定目标扩展点

等待被扩展点扫描并初始化

实现扩展点约定的接口

Extension

通过实现扩展点在功能流程中预留的接口来完成功能的动态扩充

景点无结果 酒店无结果

无结果功能目录结构：

第一步：在目标功能上创建扩展点

第二步：在功能流程中插入扩展点的自定义事件

第三步：创建扩展，并实现约定好的接口

关于富交互逻辑

富交互代码设计：使用有限状态机

有限状态机

有限状态机对行为建模，在该模型中，对将来事件的响应取决于先前的事件。有限状态机的实用定义十分简单明了。有限状态机就是包含如下内容的计算机程序：

• 事件：程序对事件进行响应。• 状态：程序在事件间的状态。• 转移：对应于事件，状态间的转移。• 动作：转移过程中采取动作。• 变量：变量保存事件间的动作所需的值。

“ 事件”驱动状态变化

JavaScript 的语言特性特别适合构造事件驱动的有限状态机

解决项目中拖拽交互逻辑

第一步：设计状态转移

第二步：加入状态转移时的动作

创建一个新卡片获取交通信息

…

创建拖拽替身…

第三步：转换成代码

• 状态对象：管理各状态对事件的响应以及下一步的状态转换

• 动作对象：状态发生变化时的各种动作

• 状态转换逻辑：通过监听事件实现

状态对象

代码实现了对状态机模型的描述

动作对象

状态转换逻辑

由事件驱动状态变化，并从返回值中得到下一个状态

• 多模块事件管理：全局事件代理机制

• 快速扩展：扩展点机制

• 富交互逻辑设计：引入有限状态机

Q & A

谢谢！