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) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模 ...
随机推荐
- service-resources
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- C++指针的指针和指针的引用
https://www.cnblogs.com/li-peng/p/4116349.html
- IntelliJ IDEA 装配FindBugs以及应用
IntelliJ IDEA 安装FindBugs以及应用 众所周知,项目越来越大,开发人员越来越多,我们的代码审查工作会变得越来越复杂,对代码质量控制难度也与日俱增,尽管经验丰富的程序员能审查能检查出 ...
- [CSP-S模拟测试]:可爱的精灵宝贝（搜索）
题目描述 $Branimirko$是一个对可爱精灵宝贝十分痴迷的玩家.最近,他闲得没事组织了一场捉精灵的游戏.游戏在一条街道上举行,街道上一侧有一排房子,从左到右房子标号由$1$到$n$.刚开始玩家在 ...
- 4.HTML 常用标签及属性
1. 链接 标签: <a></a> 属性: href:链接地址 target:打开方式 _blank:新标签页打开 _self:当前页面打开(默认) title:链接提示 2. ...
- SecondModel 实现类
package com.test.mvp.mvpdemo.mvp.v6.model; import com.test.mvp.mvpdemo.mvp.v6.SecondContract;import ...
- Bing Beats Google for the Best Way to X-Ray Search LinkedIn
Bing Beats Google for the Best Way to X-Ray Search LinkedIn 11/13/11 Note: I’ve provided some update ...
- HTML 浅层漫谈
讲到HTML最主要的就是如何给这个网页搭架子给他大致的把这个人物样子先慢慢画出来,然后我们后面去学习这个CSS还有JS的时候给这个雏形慢慢的去加一些东西,让你的网页变得越来越好看 1.标签的使用 a: ...
- 【GIS数据格式】ArcInfo Binary Grid Format
最近在修改项目时发现有些提取的坡度数据在参与了下一步计算后会出错,仔细跟了代码之后发现AE生成的坡度数据和其他一些分析后的栅格都被存储为.adf文件.说起惭愧,并不了解这是什么数据,由于下层算法使用G ...
- 异常-打开文件过多(too many open files)
异常-打开文件过多 异常报错如下 09-Oct-2019 15:37:51.923 严重 [http-nio2-8080-Acceptor-0] org.apache.tomcat.util.net. ...