1. OPOA那些事儿
⼀一淘UX 李牧
limu@taobao.com
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. 5
VOMTree记录Views逻辑层次关系

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

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

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

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

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

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. 5.众多区块能否独立调试，多处重用？

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. 6.如何做到从任一URL进入系统，加载内容最
小化?

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. 7.如何控制单页应用内存使用?

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. 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. h;ps://github.com/limu/magix/tree/master/src
打包编译工具
业务框架实现类，会mix
到抽象类中形成完整类
Kissy版本
Loader适配器
SeaJS+
JQuery+
Backbone
版本
业务框架抽象类，部分方
法需要依赖底层类库实现

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

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

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

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

30. 等您来回答

31. 关于我
李穆
花名： 李牧
邮箱： limu@taobao.com
博客： http://limu.iteye.com
微博： @lenel
进入阿里系⼀一直在广告线做前端
2007.01 雅虎 广告引擎团队
2007.05 阿里妈妈 广告引擎团队
2008.09 淘宝 广告技术部架构组
2011.06 ⼀一淘 UX北京团队
Velocity北京2010的分享：第三方广告代码稳定性和性能优化

32. Q&A

33. 谢谢大家
Thank You