mixin based component infrastructure

基于 Mixin 的组件设计

承玉(何一鸣)

大纲
 继承

 多继承

 Mixin

 构造与析构

 组件生命周期

 组件编写

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

 最终目的：新对象重用已有对象的能力

基于原型的继承
 Class-less，prototype-oriented，delegation

 var cf=new CF(); cf.__proto__

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

 Worker : Human
 Musican : Human ,Worker
 StreetMusician : Human ,Musician ,Worker

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={
 X : val
 }

Html_parser 取值
 选择器
 相对当前容器的选择器字符串
 StdMod.HTML_PARSER={
o header: “.ks-stdmod-header”
 }

 函数
 以当前容器为参数的函数返回值
 StdMod.HTML_PARSER={
o Header:function(el){return el.one(“.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){} //返回值作为真实设置值
 getter:function(val){} //返回值作为真实返回值
}

主组件与扩展组件区别
 1.主组件初始化定义在 initializer ，扩展组件定义
在构造器

 2.主组件析构定义在 destructor，扩展组件析构定
义在 __destructor

 3.方法中可通过superclass 引用继承的主组件原型，
扩展组件(mixins)之间互相不知道，无法引用

 3.组件周期加 __ , renderUI  __renderUI

例子
 Dialog – Overlay

 构造析构顺序？

mixin based component infrastructure

More Related Content

Similar to mixin based component infrastructure (20)

More from yiming he (20)

mixin based component infrastructure