Web富应⽤用的设计与开发

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