Web富应⽤用的设计与开发

 Web富应⽤用的设计与开发

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

09ea2a62798550460527ab1cec5e8123?s=128

Baidu FEX Team

March 29, 2014
Tweet

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 感谢⼤大家的光临!