javascript-组合模式
组合模式笔记
组合模式又称部分-整体模式,将对象组合成树形结构以表示'部分整体'的层次结构
组合模式使得用户对单个对象和组合对象的使用具有一致性
demo实例 :表单模块
要调用到前面学习到的寄生组合继承方法
//原型式继承
function inheritobject(o){
//声明一个过渡函数对象
function F(){
}
//过渡原型对象继承父对象
F.prototype=o;
//返回过渡对象的一个实列,该实例的原型继承了父对象
return new F();
}
/*
*寄生式继承 继承原型
* 传递参数subclass 子类
* 传递参数superclass 父类
* */
function inheritPrototype(subclass,superclass){
//复制一份父类的原型副本保存在变量中
var p=inheritobject(superclass.prototype);
//修正因为重写子类原型导致子类的constructor属性被修改
p.constructor=subclass;
//设置子类原型
subclass.prototype=p;
}
表单 demo
1.表单虚拟父类 Base
//表单虚拟父类 Base
var Base = function(){
this.children = [];
this.element = null;
};
Base.prototype = {
init : function(){
throw new Error("请重写你的方法");
},
add : function(){
throw new Error("请重写你的方法");
},
getElement : function(){
throw new Error("请重写你的方法");
}
};
2.FormItem容器类
//FormItem
var FormItem = function(id,parent){
Base.call(this);
this.id = id;
this.parent = parent;
this.init();
};
inheritPrototype(FormItem,Base);
FormItem.prototype = {
init : function(){
this.element =document.createElement('form');
this.element.id=this.id;
this.element.className='new-form';
},
add : function(child){
this.children.push(child);
this.element.appendChild(child.getElement());
return this;
},
getElement : function(){
return this.element;
},
show : function(){
this.parent.appendChild(this.element);
}
};
3.FieldsetItem类
//FieldsetItem
var FieldsetItem = function(classname,legend){
Base.call(this);
this.classname=classname || '';
this.legend=legend;
this.init();
};
inheritPrototype(FieldsetItem,Base);
FieldsetItem.prototype = {
init : function(){
this.element = document.createElement('fieldset');
var legendname = document.createElement('legend');
legendname.innerHTML = this.legend;
this.element.appendChild(legendname);
this.element.className='new-fieldset';
},
add : function(child){
this.children.push(child);
this.element.appendChild(child.getElement());
return this;
},
getElement : function(){
return this.element;
},
};
4.Group类
var Group = function(){
Base.call(this);
this.init();
};
inheritPrototype(Group,Base);
Group.prototype = {
init : function(){
this.element = document.createElement('div');
this.element.className='group';
},
add : function(child){
this.children.push(child);
this.element.appendChild(child.getElement());
return this;
},
getElement : function(){
return this.element;
}
};
5.InputItem
//InputItem
var InputItem = function(name){
Base.call(this);
this.classname = name;
this.id = name;
this.init();
};
inheritPrototype(InputItem,Base);
InputItem.prototype = {
init : function(){
this.element = document.createElement('input');
this.element.className=this.classname;
this.element.id=this.id;
},
add : function(){ },
getElement : function(){
return this.element;
}
};
6.LabelItem类
//LabelItem
var LabelItem = function(name,nameText){
Base.call(this);
this.text = nameText;
this.name = name;
this.init();
};
inheritPrototype(LabelItem,Base);
LabelItem.prototype = {
init : function(){
this.element = document.createElement('label');
this.element.name=this.name;
this.element.innerHTML=this.text;
},
add : function(){ },
getElement : function(){
return this.element;
}
};
7.SpanItem类
//SpanItem
var SpanItem = function(warntext){
Base.call(this);
this.text = warntext;
this.init();
};
inheritPrototype(SpanItem,Base);
SpanItem.prototype = {
init : function(){
this.element = document.createElement('span');
this.element.innerHTML=this.text;
},
add : function(){ },
getElement : function(){
return this.element;
}
};
测试代码
var form =new FormItem('FormItem',document.body);
form.add(
new FieldsetItem('account','账号').add(
new Group().add(
new LabelItem('uname','用户名:')
).add(
new InputItem('uname')
).add(
new SpanItem('4到6位数字或字母')
)
).add(
new Group().add(
new LabelItem('pwd','密 码:')
).add(
new InputItem('pwd')
).add(
new SpanItem('6到12位数字或字母')
)
)
).add(
new FieldsetItem('info','信息').add(
new Group().add(
new LabelItem('name','昵称:')
).add(new InputItem('name'))
).add(
new Group().add(
new LabelItem('status','状态:')
).add(
new InputItem('status')
)
)
).show();
浏览器显示
生成的html代码
javascript-组合模式的更多相关文章
- 轻松掌握:JavaScript组合模式
组合模式 组合模式:将一组对象组合成树形结构,并统一对待组合对象和叶对象,忽略它们之间的不同(因为叶对象也可以也可以包含叶对象而成为组合对象),组合模式中的对象只能是一对多的关系,不能出现多对一. 基 ...
- JavaScript组合模式---引入
首先:使用一个例子来引入组合模式,需求为(1)有一个学校有2个班(一班,二班)(2)每个班级分2个小组(一班一组,一班二组,二班一组,二班二组)(3)学校计算机教室有限,每一个小组分着来上课 然后:根 ...
- [设计模式] javascript 之 组合模式
组合模式说明 组合模式用于简单化,一致化对单组件和复合组件的使用:其实它就是一棵树: 这棵树有且只有一个根,访问入口,如果它不是一棵空树,那么由一个或几个树枝节点以及子叶节点组成,每个树枝节点还包含自 ...
- javascript设计模式学习之十——组合模式
一.组合模式定义及使用场景 组合模式将对象组合成树形结构,用以表示“部分—整体”的层次结构,除了用来表示树形结构之外,组合模式还可以利用对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性. ...
- javascript设计模式-组合模式
组合模式所要解决的问题: 可以使用简单的对象组合成复杂的对象,而这个复杂对象有可以组合成更大的对象.可以把简单这些对象定义成类,然后定义一些容器类来存储这些简单对象. 客户端代码必须区别对象简单对象和 ...
- JavaScript高级---组合模式设计
一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...
- 读书笔记之 - javascript 设计模式 - 组合模式
组合模式是一种专为创建Web上的动态用户界面而量身定制的模式,使用这种模式,可以用一条命令在对各对象上激发复杂的或递归的行为. 在组合对象的层次体系中有俩种类型对象:叶对象和组合对象.这是一个递归定义 ...
- 再起航,我的学习笔记之JavaScript设计模式15(组合模式)
组合模式 组合模式(Composite): 又称部分-整体模式,将对象组合成树形结构以表示"部分整体"的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性. 如果有一个 ...
- javascript设计模式——组合模式
前面的话 在程序设计中,有一些和“事物是由相似的子事物构成”类似的思想.组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的“孙对象”构成的.本文将详细介绍组合模式 宏命令 宏 ...
- JavaScript设计模式(5)-组合模式
组合模式 1. 适合使用组合模式的条件: 存在一批组织成某种层次体系的对象,如树形结构(具体的结构在开发期间可能无法得知) 希望对这批对象或其中的一部分对象实施一个相同的操作 2. 注意点: 组合对象 ...
随机推荐
- Tomcat 8熵池阻塞变慢详解(putty)
原因 Tomcat 7/8都使用org.apache.catalina.util.SessionIdGeneratorBase.createSecureRandom类产生安全随机类SecureRand ...
- [原创]MYSQL的简单入门
MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...
- Application Request Route实现IIS Server Farms集群负载详解
序言 随着公司业务的发展,后台业务就变的越来越多,然而服务器的故障又像月经一样,时不时的汹涌而至,让我们防不胜防.那么后台的高可用,以及服务器的处理能力就要做一个横向扩展的方案,以使后台业务持续的稳定 ...
- PHP MVC 架构
PHP高级程序设计 学习笔记 2014.06.18 MVC (Model-View-Controller,模型-视图-控制器)是一种可以简化应用程序开发和维护的非常常用的设计模式.它从逻辑上把应用程序 ...
- NodeJs+Request+Cheerio 采集数据
目的:采集网站文章. 两个依赖项: request :https://github.com/request/request cheerio:https://github.com/cheeriojs/c ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(3)-漂亮系统登陆界面
系列目录 前言 本文于2016-10修改 这次的代码是基于上一节的代码集成的,素材都在第二节里头 本次添加登录页面的控制器即可 实现 添加Account的Index视图: @{ Layout = nu ...
- 如何直接在 PC 端获取其它端设备的 UserAgent 信息呢?
如何直接在 PC 端获取其它端设备的 UserAgent 信息呢 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5909615.html 序 希望收 ...
- DM9000驱动移植在mini2440(linux2.6.29)和FS4412(linux3.14.78)上的实现(deep dive)篇一
关于dm9000的驱动移植分为两篇,第一篇在mini2440上实现,基于linux2.6.29,也成功在在6410上移植了一遍,和2440非常类似,第二篇在fs4412(Cortex A9)上实现,基 ...
- Android GPS应用开发
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5715879.html GPS定位系统由三部分组成,即由GPS卫星组成的空间部分,若干地面组成的控制部分和普通 ...