More Related Content
Similar to D2-ETao-show (20)
D2-ETao-show
- 2. ⼀一淘UX前端两个建设中的项目
For
OPOA
Since
2011
@GitHub
For
Components
Since
2012
@GitHub
- 7. 7
MagixJS页面切换流程
当Hash发生改变,view会自外向内,响应和传递query
变化事件,这是一个捕获型事件,可以被打断.
Root
View
View1
View3
View2
View2_1
View2_2
- 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
- 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
- 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按
需加载
- 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对象.
- 31. 关于我
李穆
花名: 李牧
邮箱: limu@taobao.com
博客: http://limu.iteye.com
微博: @lenel
进入阿里系⼀一直在广告线做前端
2007.01 雅虎 广告引擎团队
2007.05 阿里妈妈 广告引擎团队
2008.09 淘宝 广告技术部架构组
2011.06 ⼀一淘 UX北京团队
Velocity北京2010的分享:第三方广告代码稳定性和性能优化