Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

D2-ETao-show

  1. 1. OPOA那些事儿 ⼀一淘UX 李牧 limu@taobao.com 2012-7-7
  2. 2. ⼀一淘UX前端两个建设中的项目 For  OPOA   Since  2011   @GitHub     For  Components   Since  2012   @GitHub  
  3. 3. h;p://zuanshi.taobao.com  (任意淘宝用户可访问)         h;p://tanx.com     在复杂商业系统中的OPOA会多遇到哪些问题?    
  4. 4. 1.系统由非常多区块组成,如何管理这些区块?     h;p://zuanshi.taobao.com/index.html#!/plan/ planmanage/    
  5. 5. 5   VOMTree记录Views逻辑层次关系
  6. 6. 2.Hash变动如何通知到各个区块    
  7. 7. 7   MagixJS页面切换流程 当Hash发生改变,view会自外向内,响应和传递query 变化事件,这是一个捕获型事件,可以被打断. Root  View         View1   View3   View2                   View2_1     View2_2            
  8. 8. 3.大量区块深层次嵌套,配置是否特别繁琐?    
  9. 9. 9   树状关系里每个节点只 需要管理好自身和自身 的直接子节点     只需在配置项中记录每 个逻辑页面的RootView
  10. 10. 4.同一区域位置不变内容更迭频繁  
  11. 11. 11   View的容器 -­‐-­‐  VFrame 我们需要有View的容器,在页面中划出⼀一个逻辑区块, View可以装载到容器中,也可以卸载掉. 这就像页面中的iframe,通过切换src改变iframe内容. <iframe src="pagelocation?querystring"></iframe> <vframe id='vc-nav' view_name="app/views/nav"/> 以整个页面的hash值作为每个mxvc的querystring
  12. 12. 5.众多区块能否独立调试,多处重用?  
  13. 13. 13   VFrame和IFrame一样可以独立开发 以新增创意功能为例   独立使用此功能:   h;p://zuanshi.taobao.com/index.html#!/board/boardhandle/ acXon=create   嵌入到计划创建流程中:   h;p://zuanshi.taobao.com/index.html#!/plan/planhandle/   完全独立开发调试:   h;p://zuanshi.taobao.com/index.html#!/plan/planhandle/ __view__=app-­‐views-­‐board-­‐boardhandle     我们只要强制指定RootView为VOMTree的某个View节点,就 可以只渲染这个节点为根的VOMTree的一颗子Tree    
  14. 14. 6.如何做到从任一URL进入系统,加载内容最 小化?      
  15. 15. 15   按需加载和预加载任务交给Loader •  h;p://zuanshi.taobao.com/index.html#!/board/boardhandle/ acXon=create   •  h;p://zuanshi.taobao.com/index.html#!/plan/planhandle/   •  h;p://zuanshi.taobao.com/index.html#!/plan/planhandle/ __view__=app-­‐views-­‐board-­‐boardhandle   每个View的相关JS,模板全部形成模块,有Loader根据URL按 需加载  
  16. 16. 7.如何控制单页应用内存使用?      
  17. 17. 17   拒绝Dom节点和JS对象循环引用 参照jQuery.data的做法: $("#dv1").data(key1,jsObj1).data(key2,jsObj2); <div proxyindex="1" id="dv1"/> 全局DataProxy对象 1 proxyObj1 key1 jsObj1 key2 jsObj2 <div proxyindex="3"/> 2 proxyObj2 ... 3 proxyObj3 ... 通过为节点添加到expando字符串索引 ... ... 指向全局DataProxy中的相应JS对象
  18. 18. 18   参照jQuery.data的另类事件代理 <div proxyindex="1"/> mxclick="listener1:arg1:...:argN:doDef:doBubble|listener2"/> <view onclick="..."> <ul> <li mxclick="showAreaCode:010|isLocal">北京</li> <li mxclick="showAreaCode:021">上海</li> </ul> </view> 附加好处:节点上的事件⼀一目了然   myView.events = { click:{ showAreaCode : function(view,targetId,argsArr){...}, isLocal:function(view,targetId,argsArr){...} } } //内部保证listener接收到的参数view,targetId,argsArr为纯JS对象.
  19. 19. 8.页面改动频繁,组件如何自处?      
  20. 20. 一个最小的需求 h;p://zuanshi.taobao.com/index.html#!/reports/plan_realXme/     将“注意XXYYZZ”信息加入到组件某个位置  
  21. 21. 引入模板引擎 如果组件完全有字符串拼接出来,“注意XXYYZZ”加 到哪里,哪里就要开一个配置项,积累下来组件配置 会一匹布那么长。       引入模板引擎,组件功能作用在模板上,可以在任意 位置加东西  
  22. 22. 9.模板类似HTML的静态文件,大系统一次性 写入<script  type=‘tmpl’>不现实,如何即能方 便开发,又放在CDN上缓存?    
  23. 23. 预编译时解决问题 开发时:   通过XHR同域获取模板,格式缩进完美,Demo转化 为模板也非常容易。     上线时:   将模板转化为一个一行的长字符串,作为JS变量存储, 通过JSONP跨域获取  
  24. 24. 10.应用层框架能否独立与底层类库?  
  25. 25. h;ps://github.com/limu/magix/tree/master/src   打包编译工具   业务框架实现类,会mix 到抽象类中形成完整类   Kissy版本   Loader适配器   SeaJS+   JQuery+   Backbone   版本   业务框架抽象类,部分方 法需要依赖底层类库实现  
  26. 26. 以上   h$p://www.slideshare.net/leneli/magixjswebapp   以下  
  27. 27. 11.当前我们的组件行为是作用在模板上的, 难道任何数据变化都需要全组件重新刷新?  
  28. 28. 12.只有NodeJS才能方便的将渲染从前台移动 到后台么?  
  29. 29. 13.组件系统如何做到面向未来可拆分?  
  30. 30. 等您来回答
  31. 31. 关于我 李穆 花名: 李牧 邮箱: limu@taobao.com 博客: http://limu.iteye.com 微博: @lenel 进入阿里系⼀一直在广告线做前端 2007.01 雅虎 广告引擎团队 2007.05 阿里妈妈 广告引擎团队 2008.09 淘宝 广告技术部架构组 2011.06 ⼀一淘 UX北京团队 Velocity北京2010的分享:第三方广告代码稳定性和性能优化
  32. 32. Q&A
  33. 33. 谢谢大家 Thank You

×