1 / 47

“ 事件” & 前端代码设计

“ 事件” & 前端代码设计. 淘宝旅行计划前端架构及解决方案 杨翰文（地极）@淘宝 微博：@微波小吃. 为什么是 “ 事件 ” ？. Javascript 中的“事件”有哪些特点？. 欢迎体验！. http://go.taobao.com/ plan.htm. 模块多 平台型产品 富交互. 模块多： 如何有效的管理各种模块触发的事件？. 平台型产品： 如何保证简单快速的扩展能力？. 富交互： 如何有效的组织交互逻辑？. Answer …. 关于事件管理. 解耦：不同的模块产生了许多 “ 事件 ”. 资源数据过滤操作. 问题：

torsten-markku
Download Presentation

“ 事件” & 前端代码设计

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. “事件”& 前端代码设计 淘宝旅行计划前端架构及解决方案 杨翰文（地极）@淘宝 微博：@微波小吃

  2. 为什么是“事件”？ Javascript中的“事件”有哪些特点？

  3. 欢迎体验！ http://go.taobao.com/plan.htm

  4. 模块多 平台型产品 富交互

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

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

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

  8. Answer …

  9. 关于事件管理

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

  11. 资源数据过滤操作 问题： 需要了解事件到底是由哪个组件发出的

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

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

  14. 基本工作流程 • 需要冒泡到代理的事件在初始化时要注册到代理层 • 事件名称约束：“模块.事件名称” -》“EP.事件名称” • 使用时只需要监听代理层相应的事件即可，不必了解事件的来源

  15. 关于快速扩展

  16. Aptana FreeMind Eclipse FlexBuilder

  17. 灵活扩展：扩展点机制

  18. 扩展点： 预先定义好的可以扩展的地方 扩展（插件）： 对扩展点的实现

  19. ExtensionPoint

  20. Extension

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

  22. 景点无结果 酒店无结果

  23. 无结果功能目录结构：

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

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

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

  27. 关于富交互逻辑

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

  29. 有限状态机 有限状态机对行为建模，在该模型中，对将来事件的响应取决于先前的事件。有限状态机的实用定义十分简单明了。有限状态机就是包含如下内容的计算机程序： • 事件：程序对事件进行响应。 • 状态：程序在事件间的状态。 • 转移：对应于事件，状态间的转移。 • 动作：转移过程中采取动作。 • 变量：变量保存事件间的动作所需的值。

  30. “事件”驱动状态变化 JavaScript的语言特性 特别适合构造事件驱动的有限状态机

  31. 解决项目中拖拽交互逻辑

  32. 第一步：设计状态转移

  33. 第二步：加入状态转移时的动作 创建拖拽替身 … 创建一个新卡片 获取交通信息 …

  34. 第三步：转换成代码 • 状态对象：管理各状态对事件的响应以及下一步的状态转换 • 动作对象：状态发生变化时的各种动作 • 状态转换逻辑：通过监听事件实现

  35. 状态对象

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

  37. 动作对象

  38. 状态转换逻辑 由事件驱动状态变化，并从返回值中得到下一个状态

  39. 多模块事件管理：全局事件代理机制 • 快速扩展：扩展点机制 • 富交互逻辑设计：引入有限状态机

  40. Q&A 谢谢！

More Related