使用对象属性重写进行优化 承玉 (yiminghe@gmail.com)
属性重写 <ul><li>兼容性处理:属性(方法)重写 </li></ul>
还能做什么? <ul><li>期待你的解读 </li></ul>
一个实例 <ul><li>浮动窗口设计 </li></ul>
如果页面窗体太多
使用判断来延迟 <ul><li>或  if( ! this.el ) </li></ul>
不完美 <ul><li>If  只有第一次真正起作用 </li></ul>
使用重写来延迟 <ul><li>直观的方法重写 </li></ul>
Mess ! <ul><li>We do not want ! </li></ul>
分离逻辑 <ul><li>分离准备动作与真正动作 </li></ul>
串联 <ul><li>为 prepare 和 real 搭建桥梁 </li></ul>
That’s  it <ul><li>整洁了: </li></ul>
进阶的原型方法重写 <ul><li>遮罩层处理 : ? </li></ul>
原型也是对象 <ul><li>重写原型方法 </li></ul>
总结 <ul><li>延迟的实质:减少 startup latency ,提升  perceptive speed  (美女与火炉) . </li></ul><ul><li>宏观: datalazyloader </li></ul><ul><l...
感谢 <ul><li>Goole image search </li></ul><ul><li>PS :  新版很好用! </li></ul>
Upcoming SlideShare
Loading in …5
×

使用对象属性重写进行优化

1,140 views
1,098 views

Published on

架构组懒懒交流会

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • 非常棒的设计思想。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,140
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • 缺点:产成实例后即生成 div 节点,如果用户用不到(永远不弹出),则白白消耗了宝贵的 dom 操作,下面即照着这个思路进行优化
  • 静态语言的思路,增加标志 (this.init) 来控制初始化的次数,只有在第一次显示时才进行创建。(这里也可以判断 this.el 的存在与否,道理相同)
  • 缺点: 1. 不够分离与自动化,每次都得在原函数中进行操作,和原有逻辑混在一起。 2. 增加了内存占用,在实例自身中创建函数,取代了原型链查询,但也同时提升了访问速度。 3. 若用户开始就注册 this.show 到 dom 节点事件,则后面重写无效。
  • 1. 分离初始化动作 (_prepare) 与实际动作 (_real) ,利用 lazyRun 公共机制串联。 2.lazyRun 在实例生成后立即重写 _prepare 。 调用 _prepare 时,先调用自身,再调用实际操作代码 _real, 最后用 _real 重写自己。 3. 不修改对外接口 show , show 中直接调用 _prepare ,可用它做为事件回调函数。
  • 还是弹窗,但是常常伴随着遮罩层( mask ),遮罩层是所有 dialog 实例公用,但是如果一开始就创建遮罩层,就显得有点浪费(实例还没生成呢),所有我们常常这样处理:
  • 这样的话当某个实例第一次执行 show 时会运行 _prepare 而初始化 mask ,随之构造器的原型立即被更改,则以后所有的弹窗实例 show 时都会直接运行构造器原型上被覆盖后的 _prepare 即 _real ,达到了 所有实例共享 mask 的目的。
  • 使用对象属性重写进行优化

    1. 1. 使用对象属性重写进行优化 承玉 (yiminghe@gmail.com)
    2. 2. 属性重写 <ul><li>兼容性处理:属性(方法)重写 </li></ul>
    3. 3. 还能做什么? <ul><li>期待你的解读 </li></ul>
    4. 4. 一个实例 <ul><li>浮动窗口设计 </li></ul>
    5. 5. 如果页面窗体太多
    6. 6. 使用判断来延迟 <ul><li>或 if( ! this.el ) </li></ul>
    7. 7. 不完美 <ul><li>If 只有第一次真正起作用 </li></ul>
    8. 8. 使用重写来延迟 <ul><li>直观的方法重写 </li></ul>
    9. 9. Mess ! <ul><li>We do not want ! </li></ul>
    10. 10. 分离逻辑 <ul><li>分离准备动作与真正动作 </li></ul>
    11. 11. 串联 <ul><li>为 prepare 和 real 搭建桥梁 </li></ul>
    12. 12. That’s it <ul><li>整洁了: </li></ul>
    13. 13. 进阶的原型方法重写 <ul><li>遮罩层处理 : ? </li></ul>
    14. 14. 原型也是对象 <ul><li>重写原型方法 </li></ul>
    15. 15. 总结 <ul><li>延迟的实质:减少 startup latency ,提升 perceptive speed (美女与火炉) . </li></ul><ul><li>宏观: datalazyloader </li></ul><ul><li>微观实现: lazyRun </li></ul><ul><li>重写实例还是原型,则要仔细分析资源的所有权。 </li></ul>
    16. 16. 感谢 <ul><li>Goole image search </li></ul><ul><li>PS : 新版很好用! </li></ul>

    ×