Web富应⽤用的设计与开发

在计算机运算能力和网络传输速度都更上一层楼的今天，Web富应用逐渐脱离“小打小闹”的形象，越来越多地成为成为日常办公的常用工具和复杂视觉展示的载体；而Web富应用的设计，也逐渐从传统的“写页面”模式，转为更加精巧、庞大的模块化设计。分享将从画一个圆开始，由浅入深地阐述一个Web富应用的设计和构建过程。

Transcript

1. Web富应⽤用的设计与开发 Shared By 潘征（此⽅方）!
2. Web富应⽤用的概念 常⻅见的Web富应⽤用
3. !3 “富”的概念包含两⽅方⾯面，分别是 ! 数据模型的丰富 和 ⽤用户界⾯面的丰富。
4. Web富应⽤用⽰示例 naotu.baidu.com http://localhost/kityminder/kity/demo/ http://localhost/kityminder/kity/example/
5. Web富应⽤用的架构 构建Web富应⽤用的思路
6. !6 多⼈人协作 代码复⽤用 业务分离 便于维护
7. ⼀一个典型的层次架构 底层库（⼀一些最基本的通⽤用功能） 核⼼心（核⼼心机制，包括模块的装载和调度） 模块（具 体功能） 模块 模块 … … … UI
8. 构建（或选择）⼀一个底层库 万丈⾼高楼平地起
9. 底层库的技术选型 以kityminder为例
10. 底层库的技术选型 以kityminder为例 可选的技术 优劣 Flash 优点：丰富的图形接⼝口和众多现成的解决⽅方 案 缺点：需要插件才能运⾏行，在某些设备上不 兼容 vml 优点：基于XML标准，⾼高精度⽮矢量图形 缺点：只兼容IE Canvas 优点：绘图性能好，接⼝口⻬齐全 缺点：需要⾃自⾏行处理缩放和点击边界等 问题 SVG 优点：有独⽴立的dom结构，⽮矢量图形， 直接⽀支持缩放。 缺点：绘图性能略⽋欠佳
11. 以画⼀一个圆为例 原⽣生代码 使⽤用kitygraph底层 库
12. 核⼼心部分 架⼦子的实现
13. !13 事件机制 命令模式 模块加载 状态机制
14. 事件机制 on off fire
15. 事件机制 click mousemove 弹窗 输出 ？？ … … Minder.on(‘click’, ) 回调5 回调4 Minder.fire(‘click’)
16. 事件接管 target.addEventlistener(event,function(e){ target.fire(event); },false); 在默认事件触发的时候调⽤用fire函数来实现事件 的接管
17. 命令模式 ⺫⽬目的：给⼀一个节点上的⽂文本执⾏行加粗操作 minder持有⼀一个叫“bold”的函数 minder.bold(node) minder.execCommand(‘bold’,node);
18. 命令模式 命令池⼦子 UI “bold” “removeNode” Keyboard “appendChildNode” … … Mouse … … Minder.execCommand(“removeNode”);
19. 模块加载 defaultOpitons init commands events 单 个 模 块 的 基 本 结 构 Core Load
20. 命令池⼦子 模块加载 commands events Cmd1 Cmd2 Cmd3 … … Cmd1 Cmd2 Cmd3
21. 事件池⼦子 click change mousemove 模块加载 events “click change”: “mousemove”: 回调1 回调2 回调2 回调1 回调1
22. 状态转换机制 state:'drag' state:'normal'
23. 状态转换机制 drag.click normal.click 开始拖动 进⼊入编辑状态
24. 模块部分 ⼀一些具体功能的实现
25. 模块间通信 Data 临时数据 持久数据 ⽂文本 编辑 图标 添加 Layout … … 历史 记录
26. UNDO/REDO 保存场景和恢复场景 command (⼀一步操作) ⽐比对当前数据场 景和上次保存的数据 场景 不存在差异 存在差异 ⽣生成当前场景的副本 存⼊入历史队列
27. UNDO/REDO 保存场景和恢复场景 Minder实例 当前数据 数据副本1 数据副本2 数据副本3 数据副本n … … Undo 数据副本2 initLayout
28. 模块间通信 模块1 模块2 {“renderStart”:doSomething} Minder.fire(“renderStart”); 利⽤用事件进⾏行通信 流程1 等待模块2处 理 流程1
29. 节点布局策略 布局策略的组成 highlightNode（节点⾼高亮） updateLayout（更新布局） initStyle（初始化布局） appendChildNode（添加⼦子节点） appendSiblingNode（添加同级节点） removeNode（移除节点） expandNode（展开节点） 命令 ! appendchildnode ! appendsiblingnode ! removenode ! switchlayout
30. 节点布局策略 树状结构的布局策略 branchHeight
31. 节点布局策略 树状结构的布局策略 新增/删除⼀一个节点 时，branchHeight值 受到影响的节点
32. 内容共享 百度云 Frontia 百度账号 登录 使⽤用⺴⽹网盘 资源 应⽤用数据 存储
33. 编辑内容共享 应⽤用数据池 ! id<->⽂文件 个⼈人⺴⽹网盘 个⼈人⺴⽹网盘 kityMinder kityMinder 本地⽣生成 独⽴立id 本地⽣生成 独⽴立id
34. 第三⽅方数据格式的⽀支持 xmind .zip freemind .xml mindmamager .zip
35. 第三⽅方数据格式的⽀支持 xml json km
36. Thanks • FEX官⺴⽹网 http://fex.baidu.com 感谢⼤大家的光临！