基于 Mixin 的组件设计    承玉(何一鸣)
大纲 继承 多继承 Mixin 构造与析构 组件生命周期 组件编写
继承 (inheritance) 一种划分和重用代码的手段 Class inheritance:对象由类定义,则继承发生在  类与类之间。编译期确定 层次注意:yo-yo problem 最终目的:新对象重用已有对象的能力
基于原型的继承 Class-less,prototype-oriented,delegation var cf=new CF();     cf.__proto__
多继承(multiple inheritance) 从多个类中复用功能。 优点:  功能分解,便于多次复用  设计简洁,符合逻辑 缺点:  名字空间冲突,增加程序复杂度 Worker : Human Musican : Huma...
mixin 代表提供实现方法的接口。搜集功能的一种方式, 多个 mixins 混合起来形成新类。 可以通过多继承获得 mixins 的功能。 Mixin 不涉及传统继承构造以及析构链的处理过程, 只设置功能混合。
构造与析构 多继承机制 = mixins + contructor + destructor 扩展类概念 extension = mixin methods + constructor + destructor 获得 mixin 的功能...
组件生命周期 一般的组件
基于 mixin 分解 Base ext component 通过事件实现 AOP
使用 -扩展编写 1.构造器中进行初始化 2. 定义属性  .ATTRS={   xy:{} } ,详见使用属性机制 3. 定义属性对应的UI处理函数  _uiSetXy 4. 定义dom节点获取方式  .HTML_PARSER=...
Html_parser 取值  选择器    相对当前容器的选择器字符串      StdMod.HTML_PARSER={       o header: “.ks-stdmod-header”      }  函数    以当前...
 5. 定义析构函数  Box-ext.js    __destructor :function(){        this.get(“el”).remove();    }
 6. 介入组件生命周期  定义 __ 方法  __renderUI : 渲染  __bindUI : 绑定事件  __syncUI : 更具设置更新UI状态
使用-主组件编写 var Dialog = Base.create(Overlay,[S.Ext.StdMod …], 原型属性,静态属性); Dialog :主组件 Overlay : 继承主组件 [S.Ext…] :扩展组件
原型属性 initializer:   取代构造器,负责自身初始化 _uiSetXy   当前属性与UI的同步 Destructor:   销毁自身,忽略其他依赖项
 介入组件周期,不加 __  renderUI  bindUI  syncUI
静态属性 ATTRS:{}   定义组件自身的属性,以及覆盖父类以及扩展类的同    名属性定义   ATTRS:{    value: //值或者以自身为this的函数执行值    setter:function(val){} //...
主组件与扩展组件区别 1.主组件初始化定义在 initializer ,扩展组件定义 在 构造器 2.主组件析构定义在 destructor,扩展组件析构定 义在 __destructor 3.方法中可通过superclass 引用继承的...
例子 Dialog – Overlay 构造析构顺序?
结束 结束!
Upcoming SlideShare
Loading in …5
×

mixin based component infrastructure

1,035 views
965 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,035
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

mixin based component infrastructure

  1. 1. 基于 Mixin 的组件设计 承玉(何一鸣)
  2. 2. 大纲 继承 多继承 Mixin 构造与析构 组件生命周期 组件编写
  3. 3. 继承 (inheritance) 一种划分和重用代码的手段 Class inheritance:对象由类定义,则继承发生在 类与类之间。编译期确定 层次注意:yo-yo problem 最终目的:新对象重用已有对象的能力
  4. 4. 基于原型的继承 Class-less,prototype-oriented,delegation var cf=new CF(); cf.__proto__
  5. 5. 多继承(multiple inheritance) 从多个类中复用功能。 优点:  功能分解,便于多次复用  设计简洁,符合逻辑 缺点:  名字空间冲突,增加程序复杂度 Worker : Human Musican : Human ,Worker StreetMusician : Human ,Musician ,Worker
  6. 6. mixin 代表提供实现方法的接口。搜集功能的一种方式, 多个 mixins 混合起来形成新类。 可以通过多继承获得 mixins 的功能。 Mixin 不涉及传统继承构造以及析构链的处理过程, 只设置功能混合。
  7. 7. 构造与析构 多继承机制 = mixins + contructor + destructor 扩展类概念 extension = mixin methods + constructor + destructor 获得 mixin 的功能同时,还要处理其构造器与析 构器。
  8. 8. 组件生命周期 一般的组件
  9. 9. 基于 mixin 分解 Base ext component 通过事件实现 AOP
  10. 10. 使用 -扩展编写 1.构造器中进行初始化 2. 定义属性  .ATTRS={ xy:{} } ,详见使用属性机制 3. 定义属性对应的UI处理函数  _uiSetXy 4. 定义dom节点获取方式  .HTML_PARSER={  X : val  }
  11. 11. Html_parser 取值  选择器  相对当前容器的选择器字符串  StdMod.HTML_PARSER={ o header: “.ks-stdmod-header”  }  函数  以当前容器为参数的函数返回值  StdMod.HTML_PARSER={ o Header:function(el){return el.one(“.ks- stdmod-header”);}  }
  12. 12.  5. 定义析构函数  Box-ext.js  __destructor :function(){  this.get(“el”).remove();  }
  13. 13.  6. 介入组件生命周期  定义 __ 方法  __renderUI : 渲染  __bindUI : 绑定事件  __syncUI : 更具设置更新UI状态
  14. 14. 使用-主组件编写 var Dialog = Base.create(Overlay,[S.Ext.StdMod …], 原型属性,静态属性); Dialog :主组件 Overlay : 继承主组件 [S.Ext…] :扩展组件
  15. 15. 原型属性 initializer:  取代构造器,负责自身初始化 _uiSetXy  当前属性与UI的同步 Destructor:  销毁自身,忽略其他依赖项
  16. 16.  介入组件周期,不加 __  renderUI  bindUI  syncUI
  17. 17. 静态属性 ATTRS:{}  定义组件自身的属性,以及覆盖父类以及扩展类的同 名属性定义  ATTRS:{  value: //值或者以自身为this的函数执行值  setter:function(val){} //返回值作为真实设置值  getter:function(val){} //返回值作为真实返回值 }
  18. 18. 主组件与扩展组件区别 1.主组件初始化定义在 initializer ,扩展组件定义 在 构造器 2.主组件析构定义在 destructor,扩展组件析构定 义在 __destructor 3.方法中可通过superclass 引用继承的主组件原型, 扩展组件(mixins)之间互相不知道,无法引用 3.组件周期加 __ , renderUI  __renderUI
  19. 19. 例子 Dialog – Overlay 构造析构顺序?
  20. 20. 结束 结束!

×