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) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模 ...
随机推荐
- 【LeetCode】数学（共106题）
[2]Add Two Numbers (2018年12月23日,review) 链表的高精度加法. 题解:链表专题:https://www.cnblogs.com/zhangwanying/p/979 ...
- uboot中Kconfig架构的理解
1./u-boot-2019.07/Kconfig 是顶层Kconfig mainmenu "U-Boot $UBOOTVERSION Configuration" #这是总me ...
- LeetCode--049--字母异位词分组(java)
给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", "tan&quo ...
- 【CF1257C】Dominated Subarray【贪心】
题意:给定一个数组,求最小的字数组使得数组里存在至少一对重复元素 题解:每个点求出他的后继在哪,然后每次贪心就这个点到他的后继为一个子数组,求出最小的就是答案 #include<iostream ...
- 打印XX提交的svn版本信息
打印出匹配uliuchao或--结尾的行 svn log | sed -n '/uliuchao/,/--$/p'
- （3.1）狄泰软件学院C++课程学习剖析二
深度剖析C++第二部分 1.通过对象名能够访问public成员变量.每个对象的成员变量都是专属的,成员变量不能够在对象之间共享. 2.需求:统计在程序运行期间某个类的对象数目,保证程序的安全性(不能使 ...
- pl/sql中return和exit区别
经测试: 1.exit只能用于循环中,并且退出循环往下执行: 2.return可用于循环或非循环,并且退出整个程序模块不往下执行. declare i number :=1; j number :=1 ...
- 神坑 Resources.Load 不能实时加载TXT文件
Resources.Load(fileName) as TextAsset; 这句话并不能实时加载文本文件,对文本文件进行修改之后,若是没有刷新的话,加载的还是之前的文件: 要实时读取文本文件还是要以 ...
- HDU6424 Rikka with Time Complexity
HDU6424 Rikka with Time Complexity 数学题~(真的数学题) #include <bits/stdc++.h> #define mp(_,__) make_ ...
- PHP的重载-使用魔术方法实现
摘录PHP官网对PHP重载的解释: PHP所提供的"重载"(overloading)是指动态地"创建"类属性和方法.我们是通过魔术方法(magic method ...