ETao UX Magix and Brix

Transcript

1. OPOA那些事儿 ⼀一淘UX 李牧 [email protected] 2012-7-7

2. ⼀一淘UX前端两个建设中的项目 For  OPOA   Since  2011   @GitHub    

   For  Components   Since  2012   @GitHub  

3. h;p://zuanshi.taobao.com  （任意淘宝用户可访问）         h;p://tanx.com     在复杂商业系统中的OPOA会多遇到哪些问题？

      

4. 1.系统由非常多区块组成，如何管理这些区块？     h;p://zuanshi.taobao.com/index.html#!/plan/ planmanage/    

5. VOMTree记录Views逻辑层次关系 5  

6. 2.Hash变动如何通知到各个区块    

7. MagixJS页面切换流程 当Hash发生改变,view会自外向内,响应和传递query 变化事件,这是一个捕获型事件,可以被打断. 7   Root  View      

                 View2           View1           View2_1   View3           View2_2  

8. 3.大量区块深层次嵌套，配置是否特别繁琐？    

9. 树状关系里每个节点只 需要管理好自身和自身 的直接子节点     只需在配置项中记录每 个逻辑页面的RootView 9  

10. 4.同一区域位置不变内容更迭频繁  

11. View的容器 -­‐-­‐  VFrame 11   我们需要有View的容器,在页面中划出⼀一个逻辑区块, View可以装载到容器中,也可以卸载掉. 这就像页面中的iframe,通过切换src改变iframe内容. <iframe src="pagelocation?querystring"></iframe>

    <vframe id='vc-nav' view_name="app/views/nav"/> 以整个页面的hash值作为每个mxvc的querystring

12. 5.众多区块能否独立调试，多处重用？  

13. VFrame和IFrame一样可以独立开发 13   以新增创意功能为例   独立使用此功能：   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. 6.如何做到从任一URL进入系统，加载内容最 小化?      

15. 按需加载和预加载任务交给Loader 15   •  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. 7.如何控制单页应用内存使用?      

17. 拒绝Dom节点和JS对象循环引用 17   全局DataProxy对象 1 proxyObj1 2 proxyObj2 ... 3

    proxyObj3 ... ... ... <div proxyindex="3"/> key1 jsObj1 key2 jsObj2 <div id="dv1"/> 参照jQuery.data的做法: $("#dv1").data(key1,jsObj1).data(key2,jsObj2); proxyindex="1" 通过为节点添加到expando字符串索引 指向全局DataProxy中的相应JS对象

18. <div proxyindex="1"/> 参照jQuery.data的另类事件代理 18   <div 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. 8.页面改动频繁，组件如何自处？      

20. h;p://zuanshi.taobao.com/index.html#!/reports/plan_realXme/     将“注意XXYYZZ”信息加入到组件某个位置   一个最小的需求

21. 引入模板引擎 如果组件完全有字符串拼接出来，“注意XXYYZZ”加 到哪里，哪里就要开一个配置项，积累下来组件配置 会一匹布那么长。       引入模板引擎，组件功能作用在模板上，可以在任意 位置加东西  

22. 9.模板类似HTML的静态文件，大系统一次性 写入<script  type=‘tmpl’>不现实，如何即能方 便开发，又放在CDN上缓存？    

23. 预编译时解决问题 开发时：   通过XHR同域获取模板，格式缩进完美，Demo转化 为模板也非常容易。     上线时：   将模板转化为一个一行的长字符串，作为JS变量存储，

    通过JSONP跨域获取  

24. 10.应用层框架能否独立与底层类库？  

25. 业务框架抽象类，部分方 法需要依赖底层类库实现   Loader适配器   业务框架实现类，会mix 到抽象类中形成完整类   打包编译工具  

    Kissy版本   SeaJS+   JQuery+   Backbone   版本   h;ps://github.com/limu/magix/tree/master/src  

26. 以上   以下   h$p://www.slideshare.net/leneli/magixjswebapp  

27. 11.当前我们的组件行为是作用在模板上的， 难道任何数据变化都需要全组件重新刷新？  

28. 12.只有NodeJS才能方便的将渲染从前台移动 到后台么？  

29. 13.组件系统如何做到面向未来可拆分？  

30. 等您来回答

31. 关于我 李穆 花名： 李牧 邮箱： [email protected] 博客： http://limu.iteye.com 微博： @lenel

    进入阿里系⼀一直在广告线做前端 2007.01 雅虎 广告引擎团队 2007.05 阿里妈妈 广告引擎团队 2008.09 淘宝 广告技术部架构组 2011.06 ⼀一淘 UX北京团队 Velocity北京2010的分享：第三方广告代码稳定性和性能优化

32. Q&A

33. 谢谢大家 Thank You