JavaScript设计模式-组合模式（表单应用实现）
书读百遍其义自见
《JavaScript设计模式》一书组合模式在表单中应用，我问你答答案。
注：小编自己根据书中的栗子码的答案，如有错误，请留言斧正。
另：如有转载请注明出处，谢谢啦
<!DOCTYPE html>
<html>
<head>
<title>组合模式-表单实现</title>
<meta charset="utf-8">
<style type="text/css">
#FormItem{
width: 400px;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
//原型式继承
function inheritObject(o){
// 声明一个过度对象
function F(){};
// 过度对象的原型继承父对象
F.prototype=o;
// 返回过度对象的一个实例，该实例的原型继承了父对象
return new F();
} function inheritPrototype(subClass,superClass){
// 复制一份父类的原型副本保存在变量中
var p=inheritObject(superClass.prototype);
// 修正因为重写子类导致子类的constructor属性被修改
p.constructor=subClass;
subClass.prototype=p; } /*************** 基类 *****************/
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("请重写你的方法");
}
} /*************** 组合类 *****************/
var FormItem=function(id,parent){
// 构造函数继承父类
Base.call(this);
// 模块id
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='registe-form';
}
FormItem.prototype.add=function(child){
//在子容器中插入子元素
this.children.push(child);
// 插入当前组件元素树中
this.element.appendChild(child.getElement());
return this;//返回当前对象，便于链式使用方法
}
FormItem.prototype.getElement=function(){
return this.element;
}
FormItem.prototype.show=function(){
this.parent.appendChild(this.element);
} var FieldsetItem=function(className,text){
Base.call(this);
this.className=className;
this.init(text);
}
inheritPrototype(FieldsetItem,Base);
FieldsetItem.prototype.init=function(text){
this.element=document.createElement("fieldset");
this.element.className=this.className;
var legendNode = document.createElement("legend");
var textNode = document.createTextNode(text);
legendNode.appendChild(textNode);
this.element.appendChild(legendNode);
}
FieldsetItem.prototype.add=function(child){
//在子容器中插入子元素
this.children.push(child);
// 插入当前组件元素树中
this.element.appendChild(child.getElement());
return this;//返回当前对象，便于链式使用方法
}
FieldsetItem.prototype.getElement=function(){
return this.element;
} var Group=function(){
Base.call(this);
this.init();
}
Group.prototype.init=function(){
this.element=document.createElement("div");
}
Group.prototype.add=function(child){
//在子容器中插入子元素
this.children.push(child);
// 插入当前组件元素树中
this.element.appendChild(child.getElement());
return this;//返回当前对象，便于链式使用方法
}
Group.prototype.getElement=function(){
return this.element;
} /*************** 成员类 *****************/
var InputItem=function(className){
Base.call(this);
this.className=className;
this.init();
}
InputItem.prototype.init=function(){
this.element=document.createElement("input");
this.element.className=this.className;
}
InputItem.prototype.add=function(){}
InputItem.prototype.getElement=function(){
return this.element;
} var LabelItem=function(className,text){
Base.call(this);
this.className=className;
this.init(text);
}
LabelItem.prototype.init=function(text){
this.element=document.createElement("label");
this.element.appendChild(document.createTextNode(text));
this.element.className=this.className;
}
LabelItem.prototype.add=function(){}
LabelItem.prototype.getElement=function(){
return this.element;
} var SpanItem=function(text){
Base.call(this);
this.init(text);
}
SpanItem.prototype.init=function(text){
this.element=document.createElement("span");
this.element.appendChild(document.createTextNode(text));
}
SpanItem.prototype.add=function(){}
SpanItem.prototype.getElement=function(){
return this.element;
} var TextareaItem=function(){
Base.call(this);
this.init();
}
TextareaItem.prototype.init=function(){
this.element=document.createElement("textarea");
}
TextareaItem.prototype.add=function(){}
TextareaItem.prototype.getElement=function(){
return this.element;
} /*************** 调用 *****************/
var form=new FormItem('FormItem',document.body);
form.add(
new FieldsetItem('account','账号').add(
new Group().add(
new LabelItem('user_name','用户名：')
).add(
new InputItem('user_name')
).add(
new SpanItem('4到6位数字或字母')
)
).add(
new Group().add(
new LabelItem('user_pwd','密 码：')
).add(
new InputItem('user_pwd')
).add(
new SpanItem('6到12位数字或字母')
)
)
).add(
new FieldsetItem('info','信息').add(
new Group().add(
new LabelItem('nike_name','昵 称：')
).add(
new InputItem('nike_name')
)
).add(
new Group().add(
new LabelItem('user_status','状 态：')
).add(
new InputItem('user_status')
)
)
).show();
</script>
</html>
JavaScript设计模式-组合模式（表单应用实现）的更多相关文章
- JavaScript设计模式 - 策略模式(表单验证)
表单提交的时候,总是要校验,不同的表单可能校验相同的功能. 为了避免代码重复的复制黏贴,使用策略模式,写出来的代码赏心悦目,且可扩展,还可以作为插件到处使用 <!DOCTYPE html> ...
- 读书笔记之 - javascript 设计模式 - 组合模式
组合模式是一种专为创建Web上的动态用户界面而量身定制的模式,使用这种模式,可以用一条命令在对各对象上激发复杂的或递归的行为. 在组合对象的层次体系中有俩种类型对象:叶对象和组合对象.这是一个递归定义 ...
- javascript设计模式-组合模式
组合模式所要解决的问题: 可以使用简单的对象组合成复杂的对象,而这个复杂对象有可以组合成更大的对象.可以把简单这些对象定义成类,然后定义一些容器类来存储这些简单对象. 客户端代码必须区别对象简单对象和 ...
- javascript设计模式——组合模式
前面的话 在程序设计中,有一些和“事物是由相似的子事物构成”类似的思想.组合模式就是用小的子对象来构建更大的对象,而这些小的子对象本身也许是由更小的“孙对象”构成的.本文将详细介绍组合模式 宏命令 宏 ...
- JavaScript高级---组合模式设计
一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...
- 第一百六十节，封装库--JavaScript，ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
- ajax+FormData+javascript实现无刷新表单信息提交
ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var f ...
- 16. 星际争霸之php设计模式--组合模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- Java设计模式——组合模式
JAVA 设计模式 组合模式 用途 组合模式 (Component) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模 ...
随机推荐
- GDB学习笔记
GDB是UNIX及UNIX-like下的调试工具.GDB这个调试工具相比于VC.z的优点是具有修复网络断点以及恢复链接等功能. 一.功能 一般来说,GDB主要帮助你完成下面四个方面的功能: 1.启动你 ...
- python笔记（1）--基础知识
一.注释 单行注释 #打印“hello world” print("hello.world!") 另外一种单行注释 print("hello,world!") ...
- Docker之安装缺省指令
Docker 中有些指令不存在,需要额外的安装,这里做下安装记录. 更新软件源中的所有软件列表 apt-get update 安装 ifconfig apt install net-tools 安装 ...
- prufer 序列 学习笔记
prufer 序列是一种无根树的序列,对于一个 \(n\) 个点的树,其 prufer 序列的长度为 \(n-2\). prufer 序列和原树之间都可以唯一地相互转化. 构造 构造 prufer 序 ...
- Word文档粘贴到DEDECMS
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...
- div上下左右居中几种方式
1.绝对定位(常用于登录模块)备注:前提条件div需要有宽高 #html <div class="box"></div> #css .box{ positi ...
- undo管理
undo segments的extents 的状态共有四种,free ,active , inacitve, expired SQL> select SEGMENT_NAME,TABLESPA ...
- django中的url控制
1.django中的第一个控件:url控制 (路由分发) urls.py:请求路径与视图函数的之间的关系 步骤: 1.首先是要配置环境, 2.其次就是引路径 3.在视图的文件夹里面写相应的函 ...
- STM32 ADC基础与多通道采样
12位ADC是一种逐次逼近型模拟数字数字转换器.它有多达18个通道,可测量16个外部和2个内部信号源.ADC的输入时钟不得超过14MHZ,它是由PCLK2经分频产生.如果被ADC转换的模拟电压低于低阀 ...
- Jquery浅析
目录 jquery 通过jquery改变标签字体颜色 jquery和js对象之间值转化 Jquery基本选择器 Jquery层级选择器 基本筛选器 操作类属性 模太框 表单筛选器 筛选器方法 设置多个 ...