Download as PDF, PPTX
D2-ETao-show
- 1.
- 2. ⼀一淘UX前端两个建设中的项目 For OPOA Since 2011 @GitHub For Components Since 2012 @GitHub
- 3. h;p://zuanshi.taobao.com （任意淘宝用户可访问） h;p://tanx.com 在复杂商业系统中的OPOA会多遇到哪些问题？
- 4.
- 5.
- 6.
- 7. 7 MagixJS页面切换流程 当Hash发生改变,view会自外向内,响应和传递query 变化事件,这是一个捕获型事件,可以被打断. Root View View1 View3 View2 View2_1 View2_2
- 8.
- 9. 9 树状关系里每个节点只 需要管理好自身和自身 的直接子节点 只需在配置项中记录每 个逻辑页面的RootView
- 10.
- 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.
- 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.
- 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.
- 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 参照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.
- 20.
- 21. 引入模板引擎 如果组件完全有字符串拼接出来，“注意XXYYZZ”加 到哪里，哪里就要开一个配置项，积累下来组件配置 会一匹布那么长。 引入模板引擎，组件功能作用在模板上，可以在任意 位置加东西
- 22.
- 23. 预编译时解决问题 开发时： 通过XHR同域获取模板，格式缩进完美，Demo转化 为模板也非常容易。 上线时： 将模板转化为一个一行的长字符串，作为JS变量存储， 通过JSONP跨域获取
- 24.
- 25. h;ps://github.com/limu/magix/tree/master/src 打包编译工具 业务框架实现类，会mix 到抽象类中形成完整类 Kissy版本 Loader适配器 SeaJS+ JQuery+ Backbone 版本 业务框架抽象类，部分方 法需要依赖底层类库实现
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. 关于我 李穆 花名： 李牧 邮箱： limu@taobao.com 博客：http://limu.iteye.com 微博： @lenel 进入阿里系⼀一直在广告线做前端 2007.01 雅虎 广告引擎团队 2007.05 阿里妈妈 广告引擎团队 2008.09 淘宝 广告技术部架构组 2011.06 ⼀一淘 UX北京团队 Velocity北京2010的分享：第三方广告代码稳定性和性能优化
- 32.
- 33.