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) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模 ...
随机推荐
- 如何判断当前LINUX系统启用了ASLR
内核参数randomize_va_space用于控制系统级ASLR 0 关闭ASLR 1 mmap base.stack.vdso page将随机化.这意味着.so文件将被加载到随机地址.链接时指定了 ...
- unixbench
1.下载 https://github.com/kdlucas/byte-unixbench/archive/v5.1.3.tar.gz 2.修改Makefile 交叉编译 #CC=gccCC = a ...
- alert(1) to win 5
function escape(s) { var text = s.replace(/</g, '<').replace(/"/g, '"'); // URLs tex ...
- 【XSY2472】string
题目 Description 输入文件: string.in 输出文件: string.out 给定一个由且仅由字符 'H' , 'T' 构成的字符串 \(S\) . 给定一个最初为空的字符串 \(T ...
- 026：if标签使用详解
if标签使用详解: if 标签: if 标签相当于 Python 中的 if 语句,有 elif 和 else 相对应,但是所有的标签都需要用标签符号 {% %} 进行包裹. if 标签中可以使 ...
- 关于DNS
一.什么是DNS DNS 是域名系统 (Domain Name System) 的缩写,它是由解析器和域名服务器组成的.域名服务器是指保存有该网络中所有主机的域名和对应IP地址,并具有将域名转换为IP ...
- Python_004(列表和元组)
一.列表 1. 列表: 列表的创建:li = [],列表中可以放置字符串,元组,列表,字典,列表等各种数据类型,32位的Python可以存放2^32个数据 2. 列表的索引和切片 列表的索引:格式ls ...
- PHP操作Excel – PHPExcel 基本用法
利用PHP实现对于Excel的写入和读取,主要借助于PHPExcel插件来完成. 准备工作: 1.下载PHPExcel的SDK,下载地址:https://github.com/PHPOffice/PH ...
- (\w+)\s*, \s*(\w+)
\s表示空格 \w表示任何字符,字母数字下划线 _就表示下划线
- PHP继承及实现
php学习已经有一段时间了,来对之前的知识积累做个记录. php实现单继承和多实现.单继承: 一个类只能有一个extends 抽象类 ,多实现 :一个类可以implements 多个接口 举个简单的栗 ...