Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 感谢⼤大家的光临!