思路主要来源于 YUI3 component infrastructure
,利用 mixin
机制模拟 c++ 的多继承
机制,多继承争论很多,但是谨慎使用确实会带来设计的简洁明了,避免采用 Extjs 式的单继承所带来的深层结构以及由于功能聚集导致的巨型类,且功能不能在多个组件中共享。
ppt @ slideshare
多继承:
主要依据 c++ 规范,当多继承时,注意构造函数和析构函数的合适触发顺序,举例:
弹窗
用 c++ 多继承来设计弹窗组件,分析弹窗的功能,将弹窗理解为
1.是一个弹出层
2.具备头,体,尾组成部分
3.具备拖拽功能
4.可以被关闭
伪代码:
class StdMod {
private:
header;
body;
footer;
}
class Close {
private:
closable;
}
class Drag {
private:
draggable;
handlers;
}
//待定义
class Overlay{
//...
}
class Dialog : Overlay,StdMod,Close,Drag {
}
弹出层
而弹出层又是一个复杂的东西,是很多功能的聚集体
1.是一个方形可渲染容器
2.可以被定位,隐藏
3.可以具备背景遮罩功能
伪代码:
class Box {
private:
width;
height;
}
class Position {
private:
x;
y;
visible;
}
class Mask {
private:
maskable;
}
class Overlay : Box,Position,Mask{
}
弹层的生成和销毁
生成:
首先初始化基类的成员并执行基类的构造器,多个基类的构造器执行顺序,根据继承时的申明顺序指定,然后执行底层类的构造器体。
即:绑定用户值给对应的属性并执行 Box ,Position ,Mask 的构造器,然后执行 Overlay 的构造器。
销毁:
和构造器的执行顺序完全相反,只不过变成了析构器。
javascript 模拟:
而对于 javascript (有人说和c++同级...
),当然没有这些完善的对象生命周期管理,一切都得靠自己,除此之外还要加上不少的开发约定。我的实现是:这些所有构造与析构的依赖顺序全部扔给最顶层的类 Base 处理,并且由于原型链的存在使得 js 天生只能实现单继承( SI
),那么在多继承的情况下,除了第一个类,其他类只能通过 mixin 的方式混给最终类。
类的产生:
通过 Base.create(cls,[clsExt1,
clsExt2,...
],prototype,staticProperty) 产生一个新构造器,该构造器的继承链上一个构造器是 cls (cls必须继承或本身就是 Base),clsExt 为扩展类数组,通过 mixin 将自己的代码混合在最终类,并将扩展类集合的构造器挂靠在新生成的类上面。
结构:
类的实例化:
当实例化时,统一委托 Base 的构造器就行,主要进行:
1.从顶层类开始,执行挂靠在顶层类上的扩展类构造器方法。
2.然后执行顶层类的 init 原型方法
3.依次沿继承链向下执行 1,2 步
类实例的销毁化:
当调用实例的 destroy 方法时,委托 Base 的原型 destroy 方法进行沿继承链的销毁工作,主要进行:
1.执行当前构造器原型的destructor方法
2.调用挂靠在当前类的扩展类构造器原型的__destructor方法,注意顺序和实例化时相反
3.依次沿继承链向上执行1,2 步。
最终代码:
则Overlay的最终代码为:
var Overlay = Base.create(Base,[S.Ext.Box,
S.Ext.ContentBox,
S.Ext.Position,
S.Ext.Shim,
S.Ext.Mask], {
init:function() {
S.log("Overlay init");
},
destructor:function(){
S.log("Overlay destructor");
}
});
初始化顺序:
box init
contentbox init
position init
shim init
mask init
Overlay init
销毁顺序:
overlay destructor
mask __destructor
shim __destructor
position __destructor
contentbox __destructor
box __destructor
更复杂的 Dialog 可打开 firebug 查看 : 这里
组件的UI周期管理:
上面只是介绍了支持组件最基本的多继承类模拟,而对于UI组件,还要涉及
1.DOM 节点生成或直接从 markup 读取(renderUI)
2.绑定客户端事件(bindUI)
3.UI 变化和组件对应属性同步(syncUI)
这里基本上和 yui3 保持一致,约定主组件各个阶段取名:
renderUI,bindUI,syncUI
而附加组件取名:
__render,__bindUI,__syncUI
//用户扩展多继承的 UIBase 组件
function Position() {}
Position.ATTRS = { x:{}, y:{}, xy:{} }
Position.prototype = {
__renderUI: fn,
__bindUI: fn,
__syncUI: fn,
_uiSetX: fn,
__destructor: fn
}
小结:
世界很复杂,完美的类抽象很难
适度继承+ 选择性mix
约定优于配置
好处:可复用性高,整体维护方便
不足:多继承会造成潜在的命名空间冲突,门槛稍高
- 大小: 11.5 KB
- 大小: 19 KB
分享到:
相关推荐
基础 基于灵活框的轻量级响应式Sass / CSS框架。... 组件的usufule mixin和抽象mixin。 演示(HTML5模板) 完整性: : 改善: : 亲和力: : 开始吧 使用基础项目(入门工具包) $ git clone http
配套该Auth0风格指南进行管理的和它的组成不同的包: 包版描述依存关系 全局样式(变量,mixin,颜色,css重置,版式) CSS组件,例如按钮,表格(基于Bootstrap) React组件库 -- Styleguide网站发展历程节点版本:...
该库仅包含CSS代码 HEx核心组件:设计令牌,mixin和基础 本地JS库,用于模式库的交互式组件 (很快)基于HEx的React组件(私人的) HEx文档网站: 安装查看文档: 用法查看文档: 发展历程要管理此monorep
不是预加载所有 Bootstrap 的 CSS 组件,lesser 包括基本元素:网格、排版和强大的 mixin,其余的都放在一边。 针对响应式排版进行了优化,Lesser 还预装了以下插件: 用法 安装较少 bower install lesser 在此...
nextTick的实战应用、mixin混入技术的应用第三章Vue-cli开发单文件组件:脚手架vue-cli3.0的应用、购物车案例整合、如何封装自己的组件(学会组件设计的原则) 第四章Vue全家桶技术:Vue-router的基本使用、命名路由...
它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能,能够让你快速设计并定制你的网站。利用 Bootstrap 可以构建快速、响应式的网站。
Wave.js 其中W EB基甲托米奇V iewer和E ditor中的J ava小号CRIPT...用于表示的高级类,以及用于相关功能的模块化ES6兼容mixin,即: , 和其他要添加的内容。 包装器组件: ThreeDEditor ,带有控制触发按钮面板 Wa
蚂蚁设计:基于React的组件库。 Bizchats:基于React的图表库。 减:CSS预处理器,提供变量,计算,嵌套,Mixin,函数等。 Webpack:打包前端项目,生成静态文件。 Apollo:基于GraphQL封装,用于构建GraphQL支持和...
:元素,一套为开发者,设计师和产品经理准备的基于Vue 2.0的桌面端组件库。前序准备运行前准备:由于此项目是基于nodejs的前合并项目,您需要进行nodejs的相关准备工作。项目运行之前,请确保系统已经安装以下应用...
在这个设计中,组件与组件之间、类与类之间存在着紧密的耦合关系。SayHello类中的_helloGen字段类型为 EnHelloGenerator,这将导致我们很难给它赋予一个其它的HelloGenerator(例如CnHelloGenerator,用于生成 中文...