JS 组合模式更常用于创建表单上,比如注册页面可能有不同的表单提交模块。对于这些需求我们只需要有基本的个体,然后通过一定的组合即可实现,比如下面这个页面样式(如图14-2所示),我们来用组合模式实现。

作者给的提示,首先创建基类 Base, 然后三个组合类 FormItem、FieldsetItem、Group,以及成员类InputItem、LabelItem、SpanItem、TextareaItem,创建完之后像下面这样拼出你的注册页面吧。

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_password', '密 码:')
).add(
new InputItem('user_password')
).add(
new SpanItem('6到12位数字或者密码')
)
)
).add(
new FieldsetItem('info', '信息').add(
new Group().add(
new LabelItem('pet_name', '昵称:')
).add(
new InputItem('user_pet_name')
)
).add(
new Group().add(
new LabelItem('user_status', '状态:')
).add(
new InputItem('user_status')
)
)
)

下面我们来挨个创建个体类。

// 原型式继承
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;
}

首先创建总的虚拟父类 Form

var Form = function() {
// 子组件容器
this.children = [];
// 当前组件元素
this.element = null;
} Form.prototype = {
init: function() {
throw new Error('请重写你的方法');
},
add: function() {
throw new Error('请重写你的方法');
},
getElement: function() {
throw new Error('请重写你的方法');
},
}

FormItem 容器构造函数

var FormItem = function(id, parent) {
// 构造函数继承父类
Form.call(this);
// 模块id
this.id = id;
// 模块的父容器
this.parent = parent;
// 构建方法
this.init();
} // 寄生式继承父类原型方法
inheritPrototype(FormItem, Form); // 构建方法
FormItem.prototype.init = function() {
this.element = document.createElement('form');
this.element.id = this.id;
this.element.className = 'new-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);
}

FieldsetItem 容器构造函数

var FieldsetItem = function(id, fieldName) {
Form.call(this);
this.fieldName = fieldName || '';
this.init();
} inheritPrototype(FieldsetItem, Form); FieldsetItem.prototype.init = function() {
this.element = document.createElement('fieldset');
var legend = document.createElement('legend');
legend.innerHTML = this.fieldName;
this.element.appendChild(legend);
} FieldsetItem.prototype.add = function(child) {
this.children.push(child);
this.element.appendChild(child.getElement());
return this;
} FieldsetItem.prototype.getElement = function() {
return this.element;
}

 Group 容器构造函数

var Group = function() {
Form.call(this);
this.init();
} inheritPrototype(Group, Form); Group.prototype.init = function() {
this.element = document.createElement('div');
} Group.prototype.add = function(child) {
this.children.push(child);
this.element.append(child.getElement());
} Group.prototype.getElement = function() {
return this.element;
}

InputItem 容器构造函数

var InputItem = function(id, name) {
Form.call(this);
this.name = name;
this.init();
} inheritPrototype(InputItem, Form); InputItem.prototype.init = function() {
this.element = document.createElement('input');
this.element.id = this.id;
this.element.type = 'text';
this.element.name = this.name;
} InputItem.prototype.add = function() {} InputItem.prototype.getElement = function() {
return this.element;
}

LabelItem 容器构造函数

var LabelItem = function(labelFor, labelText) {
Form.call(this);
this.labelFor = labelFor;
this.labelText = labelText;
this.init();
} LabelItem.prototype.init = function() {
this.element = document.createElement('label');
this.element.htmlFor = this.labelFor;
this.element.innerText = this.labelText;
} LabelItem.prototype.add = function() {} LabelItem.prototype.getElement = function() {
return this.element;
}

SpanItem 容器构造函数 

var SpanItem = function(spanText) {
Form.call(this);
this.spanText = spanText;
this.init();
} inheritPrototype(SpanItem, Form); SpanItem.prototype.init = function() {
this.element = document.createElement('span');
this.element.innerText = this.spanText;
} SpanItem.prototype.add = function() {} SpanItem.prototype.getElement = function() {
return this.element;

代码已经写完,稍等,我来测试一下。。。。。。

javascript设计模式(张容铭) 第14章 超值午餐-组合模式 学习笔记的更多相关文章

  1. javascript设计模式(张容铭)学习笔记 - 外观模式绑定事件

    有一个需求要为document对象绑定click事件来是想隐藏提示框的交互功能,于是小白写了如下代码: document.onclick = function(e) { e.preventDefaul ...

  2. javascript设计模式(张容铭)学习笔记 - 照猫画虎-模板方法模式

    模板方法模式(Template Method):父类中定义一组操作算法骨架,而降一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤. 项目经理体验了各个页面的 ...

  3. JavaScript高级程序设计第14章表单脚本 (学习笔记)

    第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...

  4. SQL反模式学习笔记14 关于Null值的使用

    目标:辨别并使用Null值 反模式:将Null值作为普通的值,反之亦然 1.在表达式中使用Null: Null值与空字符串是不一样的,Null值参与任何的加.减.乘.除等其他运算,结果都是Null: ...

  5. 《JavaScript设计模式 张》整理

    最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...

  6. CSharp设计模式读书笔记(14):职责链模式(学习难度:★★★☆☆,使用频率:★★☆☆☆)

    职责链模式(Chain of Responsibility  Pattern):避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象 ...

  7. [Python设计模式] 第19章 分公司=部门?——组合模式

    github地址:https://github.com/cheesezh/python_design_patterns 组合模式 组合模式,将对象组合成树形结构以表示"部分-整体" ...

  8. Java 螺纹第三版 第一章Thread介绍、 第二章Thread创建和管理学习笔记

    第一章 Thread导论 为何要用Thread ? 非堵塞I/O      I/O多路技术      轮询(polling)      信号 警告(Alarm)和定时器(Timer) 独立的任务(Ta ...

  9. 《Lua程序设计》第7章 迭代器与泛型for 学习笔记

    本章将介绍如何编写适用于泛型for的迭代其(Iterator).7.1 迭代器与closurehttp://www.cnblogs.com/moonlightpoet/p/5685275.html 7 ...

随机推荐

  1. python 之 函数 基础

    为什么要有函数?什么是函数? 1.组织结构不清晰,可读性差 2.代码冗余 3.管理维护的难度极大,扩展性 具备某一个功能的工具就是程序的中函数 ​ 事先准备工具的过程---->函数的定义 ​ 拿 ...

  2. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:9. 自定义委托事件方法

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  3. C - 不要62

    #include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...

  4. GYM 101673F(树计数)

    树上每个割点计算一下各个size的组合相乘再相加为第一问答案,取最大的:再把本答案中最大的两个size相乘减掉,为第二问答案. const int maxn = 1e4 + 5; int n, siz ...

  5. JavaScript特点、优缺点及常用框架

    参考来源:   http://www.cnblogs.com/SanMaoSpace/archive/2013/06/14/3136774.html

  6. python regex

    re.match: match from the beginning of the string re.search: scan through the whole string to find a ...

  7. 转 Oracle Cluster Health Monitor(CHM)简介

    Cluster Health Monitor(以下简称CHM)是一个Oracle提供的工具,用来自动收集操作系统的资源(CPU.内存.SWAP.进程.I/O以及网络等)的使用情况.CHM会每秒收集一次 ...

  8. Bluefish

    Bluefish标榜其自身是“一款为熟练的Web设计员和程序员而设的编辑器,但它的UI却很直观,任何初学者都能够很快上手,并在不断地积累中发现和掌握它的其它功能.   Bluefish标榜其自身是“一 ...

  9. Aop第一节

    什么是AOP AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP引入 ...

  10. Mvc 多级控制器 路由重写 及 多级Views目录 的寻找视图的规则

    1.那么我们再来看我们需要的访问方式,如下图 如果我们要访问Admin下的TestController里面的Index页面,那么我们输入Test/Index,这个肯定不行的.因为TestControl ...