Slide 1

Slide 1 text

Web富应⽤用的设计与开发 Shared By 潘征(此⽅方)!

Slide 2

Slide 2 text

Web富应⽤用的概念 常⻅见的Web富应⽤用

Slide 3

Slide 3 text

!3 “富”的概念包含两⽅方⾯面,分别是 ! 数据模型的丰富 和 ⽤用户界⾯面的丰富。

Slide 4

Slide 4 text

Web富应⽤用⽰示例 naotu.baidu.com http://localhost/kityminder/kity/demo/ http://localhost/kityminder/kity/example/

Slide 5

Slide 5 text

Web富应⽤用的架构 构建Web富应⽤用的思路

Slide 6

Slide 6 text

!6 多⼈人协作 代码复⽤用 业务分离 便于维护

Slide 7

Slide 7 text

⼀一个典型的层次架构 底层库(⼀一些最基本的通⽤用功能) 核⼼心(核⼼心机制,包括模块的装载和调度) 模块(具 体功能) 模块 模块 … … … UI

Slide 8

Slide 8 text

构建(或选择)⼀一个底层库 万丈⾼高楼平地起

Slide 9

Slide 9 text

底层库的技术选型 以kityminder为例

Slide 10

Slide 10 text

底层库的技术选型 以kityminder为例 可选的技术 优劣 Flash 优点:丰富的图形接⼝口和众多现成的解决⽅方 案 缺点:需要插件才能运⾏行,在某些设备上不 兼容 vml 优点:基于XML标准,⾼高精度⽮矢量图形 缺点:只兼容IE Canvas 优点:绘图性能好,接⼝口⻬齐全 缺点:需要⾃自⾏行处理缩放和点击边界等 问题 SVG 优点:有独⽴立的dom结构,⽮矢量图形, 直接⽀支持缩放。 缺点:绘图性能略⽋欠佳

Slide 11

Slide 11 text

以画⼀一个圆为例 原⽣生代码 使⽤用kitygraph底层 库

Slide 12

Slide 12 text

核⼼心部分 架⼦子的实现

Slide 13

Slide 13 text

!13 事件机制 命令模式 模块加载 状态机制

Slide 14

Slide 14 text

事件机制 on off fire

Slide 15

Slide 15 text

事件机制 click mousemove 弹窗 输出 ?? … … Minder.on(‘click’, ) 回调5 回调4 Minder.fire(‘click’)

Slide 16

Slide 16 text

事件接管 target.addEventlistener(event,function(e){ target.fire(event); },false); 在默认事件触发的时候调⽤用fire函数来实现事件 的接管

Slide 17

Slide 17 text

命令模式 ⺫⽬目的:给⼀一个节点上的⽂文本执⾏行加粗操作 minder持有⼀一个叫“bold”的函数 minder.bold(node) minder.execCommand(‘bold’,node);

Slide 18

Slide 18 text

命令模式 命令池⼦子 UI “bold” “removeNode” Keyboard “appendChildNode” … … Mouse … … Minder.execCommand(“removeNode”);

Slide 19

Slide 19 text

模块加载 defaultOpitons init commands events 单 个 模 块 的 基 本 结 构 Core Load

Slide 20

Slide 20 text

命令池⼦子 模块加载 commands events Cmd1 Cmd2 Cmd3 … … Cmd1 Cmd2 Cmd3

Slide 21

Slide 21 text

事件池⼦子 click change mousemove 模块加载 events “click change”: “mousemove”: 回调1 回调2 回调2 回调1 回调1

Slide 22

Slide 22 text

状态转换机制 state:'drag' state:'normal'

Slide 23

Slide 23 text

状态转换机制 drag.click normal.click 开始拖动 进⼊入编辑状态

Slide 24

Slide 24 text

模块部分 ⼀一些具体功能的实现

Slide 25

Slide 25 text

模块间通信 Data 临时数据 持久数据 ⽂文本 编辑 图标 添加 Layout … … 历史 记录

Slide 26

Slide 26 text

UNDO/REDO 保存场景和恢复场景 command (⼀一步操作) ⽐比对当前数据场 景和上次保存的数据 场景 不存在差异 存在差异 ⽣生成当前场景的副本 存⼊入历史队列

Slide 27

Slide 27 text

UNDO/REDO 保存场景和恢复场景 Minder实例 当前数据 数据副本1 数据副本2 数据副本3 数据副本n … … Undo 数据副本2 initLayout

Slide 28

Slide 28 text

模块间通信 模块1 模块2 {“renderStart”:doSomething} Minder.fire(“renderStart”); 利⽤用事件进⾏行通信 流程1 等待模块2处 理 流程1

Slide 29

Slide 29 text

节点布局策略 布局策略的组成 highlightNode(节点⾼高亮) updateLayout(更新布局) initStyle(初始化布局) appendChildNode(添加⼦子节点) appendSiblingNode(添加同级节点) removeNode(移除节点) expandNode(展开节点) 命令 ! appendchildnode ! appendsiblingnode ! removenode ! switchlayout

Slide 30

Slide 30 text

节点布局策略 树状结构的布局策略 branchHeight

Slide 31

Slide 31 text

节点布局策略 树状结构的布局策略 新增/删除⼀一个节点 时,branchHeight值 受到影响的节点

Slide 32

Slide 32 text

内容共享 百度云 Frontia 百度账号 登录 使⽤用⺴⽹网盘 资源 应⽤用数据 存储

Slide 33

Slide 33 text

编辑内容共享 应⽤用数据池 ! id<->⽂文件 个⼈人⺴⽹网盘 个⼈人⺴⽹网盘 kityMinder kityMinder 本地⽣生成 独⽴立id 本地⽣生成 独⽴立id

Slide 34

Slide 34 text

第三⽅方数据格式的⽀支持 xmind .zip freemind .xml mindmamager .zip

Slide 35

Slide 35 text

第三⽅方数据格式的⽀支持 xml json km

Slide 36

Slide 36 text

Thanks • FEX官⺴⽹网 http://fex.baidu.com 感谢⼤大家的光临!