Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ETao UX Magix and Brix
Search
limu
July 31, 2012
Technology
2
270
ETao UX Magix and Brix
Magix for OPOA and Brix for Components
limu
July 31, 2012
Tweet
Share
More Decks by limu
See All by limu
OPOA-in-Action
lenel
13
1.1k
Taobao-AD-JSBeacon-and-Creative-Optimize
lenel
2
290
KsLite-for-3rd-Part-Content-Develop
lenel
1
130
Other Decks in Technology
See All in Technology
君は隠しイベントを見つけれるか?
mujyun
0
290
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
Datachain会社紹介資料(2024年11月) / Company Deck
datachain
3
16k
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
200
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
500
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.5k
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
840
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
Featured
See All Featured
Building an army of robots
kneath
302
42k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Unsuck your backbone
ammeep
668
57k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Designing Experiences People Love
moore
138
23k
A Tale of Four Properties
chriscoyier
156
23k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
The Language of Interfaces
destraynor
154
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Documentation Writing (for coders)
carmenintech
65
4.4k
Transcript
OPOA那些事儿 ⼀一淘UX 李牧
[email protected]
2012-7-7
⼀一淘UX前端两个建设中的项目 For OPOA Since 2011 @GitHub
For Components Since 2012 @GitHub
h;p://zuanshi.taobao.com (任意淘宝用户可访问) h;p://tanx.com 在复杂商业系统中的OPOA会多遇到哪些问题?
1.系统由非常多区块组成,如何管理这些区块? h;p://zuanshi.taobao.com/index.html#!/plan/ planmanage/
VOMTree记录Views逻辑层次关系 5
2.Hash变动如何通知到各个区块
MagixJS页面切换流程 当Hash发生改变,view会自外向内,响应和传递query 变化事件,这是一个捕获型事件,可以被打断. 7 Root View
View2 View1 View2_1 View3 View2_2
3.大量区块深层次嵌套,配置是否特别繁琐?
树状关系里每个节点只 需要管理好自身和自身 的直接子节点 只需在配置项中记录每 个逻辑页面的RootView 9
4.同一区域位置不变内容更迭频繁
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
5.众多区块能否独立调试,多处重用?
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
6.如何做到从任一URL进入系统,加载内容最 小化?
按需加载和预加载任务交给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按 需加载
7.如何控制单页应用内存使用?
拒绝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对象
<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对象. 附加好处:节点上的事件⼀一目了然
8.页面改动频繁,组件如何自处?
h;p://zuanshi.taobao.com/index.html#!/reports/plan_realXme/ 将“注意XXYYZZ”信息加入到组件某个位置 一个最小的需求
引入模板引擎 如果组件完全有字符串拼接出来,“注意XXYYZZ”加 到哪里,哪里就要开一个配置项,积累下来组件配置 会一匹布那么长。 引入模板引擎,组件功能作用在模板上,可以在任意 位置加东西
9.模板类似HTML的静态文件,大系统一次性 写入<script type=‘tmpl’>不现实,如何即能方 便开发,又放在CDN上缓存?
预编译时解决问题 开发时: 通过XHR同域获取模板,格式缩进完美,Demo转化 为模板也非常容易。 上线时: 将模板转化为一个一行的长字符串,作为JS变量存储,
通过JSONP跨域获取
10.应用层框架能否独立与底层类库?
业务框架抽象类,部分方 法需要依赖底层类库实现 Loader适配器 业务框架实现类,会mix 到抽象类中形成完整类 打包编译工具
Kissy版本 SeaJS+ JQuery+ Backbone 版本 h;ps://github.com/limu/magix/tree/master/src
以上 以下 h$p://www.slideshare.net/leneli/magixjswebapp
11.当前我们的组件行为是作用在模板上的, 难道任何数据变化都需要全组件重新刷新?
12.只有NodeJS才能方便的将渲染从前台移动 到后台么?
13.组件系统如何做到面向未来可拆分?
等您来回答
关于我 李穆 花名: 李牧 邮箱:
[email protected]
博客: http://limu.iteye.com 微博: @lenel
进入阿里系⼀一直在广告线做前端 2007.01 雅虎 广告引擎团队 2007.05 阿里妈妈 广告引擎团队 2008.09 淘宝 广告技术部架构组 2011.06 ⼀一淘 UX北京团队 Velocity北京2010的分享:第三方广告代码稳定性和性能优化
Q&A
谢谢大家 Thank You