思路主要来源于 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 将自己的代码混合在最终类,并将扩展类集合的构造器挂靠在新生成的类上面。
结构:
![](http://dl.iteye.com/upload/attachment/346597/20222364-92de-34ea-8d30-e7fd1980607d.png)
类的实例化:
当实例化时,统一委托 Base 的构造器就行,主要进行:
1.从顶层类开始,执行挂靠在顶层类上的扩展类构造器方法。
2.然后执行顶层类的 init 原型方法
3.依次沿继承链向下执行 1,2 步
类实例的销毁化:
当调用实例的 destroy 方法时,委托 Base 的原型 destroy 方法进行沿继承链的销毁工作,主要进行:
1.执行当前构造器原型的destructor方法
2.调用挂靠在当前类的扩展类构造器原型的__destructor方法,注意顺序和实例化时相反
3.依次沿继承链向上执行1,2 步。
![](http://dl.iteye.com/upload/attachment/429038/eabd98fe-3991-3c41-8d9c-1380577ae741.png)
最终代码:
则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
约定优于配置
好处:可复用性高,整体维护方便
不足:多继承会造成潜在的命名空间冲突,门槛稍高
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0034/6597/20222364-92de-34ea-8d30-e7fd1980607d-thumb.png)
- 大小: 11.5 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0042/9038/eabd98fe-3991-3c41-8d9c-1380577ae741-thumb.png)
- 大小: 19 KB
分享到:
相关推荐
本项目是一个基于Vue语言开发的图鸟UI组件库,包含296个文件,主要文件类型包括Vue组件、JavaScript脚本、SCSS样式表、图片、微信小程序的wxs脚本、JSON配置文件、Markdown文档、HTML页面和PNG图片。系统设计旨在为...
图鸟UI是一款基于uni-app框架构建的UI工具包,它专为快速开发设计,尤其适合构建H5和微信小程序项目。uni-app是一个跨平台的前端框架,允许开发者使用一套代码库来开发iOS、Android、H5、微信小程序、支付宝小程序等...
8. **混合**:混合(mixin)是一种共享组件选项的方法,可以将一组通用功能封装在一个对象中,然后在多个组件中使用。 9. **状态管理**:对于复杂应用,可以使用Vuex进行集中式的状态管理,解决组件间的通信问题,...
标题和描述中提到的"基于vue开发的popup的mixins用于管理弹出框的遮盖层",就是这样一个设计模式,旨在解决如何优雅地处理弹出框及其遮盖层的问题。 首先,我们来理解一下`mixins`在Vue.js中的作用。`mixins`是一种...
【标题解析】:“屏幕外:基于聚合物的Web组件和Sass mixin用于在屏幕外定位元素”这个标题涉及了几个关键概念。首先,“屏幕外”(Offscreen)通常指的是网页设计中的一种技术,用于将某些元素移动到视口之外,但...
Mixin.one 可能是一个基于互联网的平台或者服务,而 Mixin 网络浏览器则可能是该平台的一部分,专门用于浏览或交互。这暗示我们可能会讨论一个特定的、与 Mixin 生态系统相关的网站和其内置的浏览器应用。 【描述...
`react-waypoint`库就是为了解决这类问题而设计的,它提供了一个Mixin,使得React组件能够轻松实现“航点”(waypoint)功能。航点是一种在用户滚动到特定页面区域时触发事件的概念。 ### 1. `react-waypoint` 库...
Bootstrap是一个流行的前端框架,它允许开发者利用一系列预先设计好的CSS和JavaScript组件快速搭建响应式的网站布局。响应式网页设计是指网页可以自动适应不同屏幕尺寸和设备的特性,使得网站在手机、平板电脑以及...
2. **组件设计** ElementUI 的每个组件都是一个 Vue.js 单文件组件(SFC),在 `src/components` 目录下。每个组件都包含模板(template)、脚本(script)和样式(style)三个部分,体现了 Vue.js 的组件化思想。...
compox则可能是一个组件化库,提供了一套基于组件的开发模式,帮助开发者创建可复用的UI元素。 3. **UI组件和库**:tinper-neoui是一个UI库,包含了诸如grid(表格)、tree(树形结构)等组件。ztreetinper-neoui-...
Element UI 的 Table 组件设计简洁,易于理解和使用,但有时可能无法完全满足复杂的业务场景,因此需要进行二次封装。 "table.vue" 文件很可能是封装后的 Table 组件代码。这个文件中可能会包含对原生 Element UI ...
基础 基于灵活框的轻量级响应式Sass / CSS框架。... 组件的usufule mixin和抽象mixin。 演示(HTML5模板) 完整性: : 改善: : 亲和力: : 开始吧 使用基础项目(入门工具包) $ git clone http
`yup-validation-strategy`是专门为`react-validation-mixin`设计的,它实现了将`Yup`验证器集成到mixin中的策略。这意味着你可以利用`Yup`的强大功能,同时享受到`react-validation-mixin`带来的便利。使用这个策略...
2. **可扩展性**:Metal Component 支持通过继承或混入(mixin)来扩展组件功能,使得组件的定制更加灵活。 3. **事件处理**:组件可以监听和触发自定义事件,实现组件间的通信,保持组件的松耦合。 4. **状态管理...
React Gimme是一个专门为React开发的库,其设计目的是在React组件中实现类似90年代视频游戏中常见的“作弊码”功能。这个库利用了React的Mixin机制,允许开发者在React应用中轻松添加一种交互性,即用户可以输入特定...
`react-component-managers` 是一个专为React组件设计的工具库,它提供了一种不同于传统mixin(混合)和Higher-Order Components(高阶组件)的方式来组合组件的功能。本篇文章将深入探讨这个库及其对React开发的...
- **组件混入机制**:通过混入(mixin)共享代码逻辑,减少重复代码,提高开发效率。 - **组件插槽**:增强组件的复用性和灵活性。 - **动态组件与异步组件**:优化加载性能,提高用户体验。 - **组件API化**:...
8. **vue.mixin**:mixin用于抽取公共业务逻辑,当组件初始化时,`mergeOptions`方法会合并mixin和组件配置。如果发生冲突,组件自身配置优先。 9. **组件data为什么是函数**:组件的data必须是函数,以避免不同...
标题提及的"ember-lazy-loader-mixin"就是一个专门针对Ember.js设计的延迟加载工具,它允许我们在灰烬应用程序中按需加载资源,而不是一次性加载整个应用程序。 延迟加载的基本概念是,只有当用户实际需要某个模块...
Element UI 是一个基于 Vue.js 的开源 UI 组件库,它为开发者提供了丰富的界面元素和设计模式,使得构建美观、响应式的 Web 应用变得轻松。这个"element源码dev分支"是一个开发版本的源代码,适合对 Element UI 感...