1. 基于 Mixin 的组件设计
承玉(何一鸣)

2. 大纲
 继承
 多继承
 Mixin
 构造与析构
 组件生命周期
 组件编写

3. 继承 (inheritance)
 一种划分和重用代码的手段
 Class inheritance：对象由类定义，则继承发生在
类与类之间。编译期确定
 层次注意：yo-yo problem
 最终目的：新对象重用已有对象的能力

4. 基于原型的继承
 Class-less，prototype-oriented，delegation
 var cf=new CF(); cf.__proto__

5. 多继承(multiple inheritance)
 从多个类中复用功能。
 优点：
 功能分解，便于多次复用
 设计简洁，符合逻辑
 缺点：
 名字空间冲突，增加程序复杂度
 Worker : Human
 Musican : Human ,Worker
 StreetMusician : Human ,Musician ,Worker

6. mixin
 代表提供实现方法的接口。搜集功能的一种方式，
多个 mixins 混合起来形成新类。
 可以通过多继承获得 mixins 的功能。
 Mixin 不涉及传统继承构造以及析构链的处理过程，
只设置功能混合。

7. 构造与析构
 多继承机制 = mixins + contructor + destructor
 扩展类概念
 extension = mixin methods + constructor +
destructor
 获得 mixin 的功能同时，还要处理其构造器与析
构器。

8. 组件生命周期
 一般的组件

9. 基于 mixin 分解
 Base ext component
 通过事件实现 AOP

10. 使用 -扩展编写
 1.构造器中进行初始化
 2. 定义属性
 .ATTRS={ xy:{} } ，详见使用属性机制
 3. 定义属性对应的UI处理函数
 _uiSetXy
 4. 定义dom节点获取方式
 .HTML_PARSER={
 X : val
 }

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.  5. 定义析构函数
 Box-ext.js
 __destructor :function(){
 this.get(“el”).remove();
 }

13.  6. 介入组件生命周期
 定义 __ 方法
 __renderUI : 渲染
 __bindUI : 绑定事件
 __syncUI : 更具设置更新UI状态

14. 使用-主组件编写
 var Dialog =
Base.create(Overlay,[S.Ext.StdMod …],
原型属性,静态属性);
 Dialog ：主组件
 Overlay : 继承主组件
 [S.Ext…] ：扩展组件

15. 原型属性
 initializer：
 取代构造器，负责自身初始化
 _uiSetXy
 当前属性与UI的同步
 Destructor：
 销毁自身，忽略其他依赖项

16.  介入组件周期，不加 __
 renderUI
 bindUI
 syncUI

17. 静态属性
 ATTRS:{}
 定义组件自身的属性，以及覆盖父类以及扩展类的同
名属性定义
 ATTRS:{
 value: //值或者以自身为this的函数执行值
 setter:function(val){} //返回值作为真实设置值
 getter:function(val){} //返回值作为真实返回值
}

18. 主组件与扩展组件区别
 1.主组件初始化定义在 initializer ，扩展组件定义
在 构造器
 2.主组件析构定义在 destructor，扩展组件析构定
义在 __destructor
 3.方法中可通过superclass 引用继承的主组件原型，
扩展组件(mixins)之间互相不知道，无法引用
 3.组件周期加 __ , renderUI  __renderUI

19. 例子
 Dialog – Overlay
 构造析构顺序？

20. 结束
 结束!