javascript设计模式(张容铭) 第14章 超值午餐-组合模式 学习笔记
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章 超值午餐-组合模式 学习笔记的更多相关文章
- javascript设计模式(张容铭)学习笔记 - 外观模式绑定事件
有一个需求要为document对象绑定click事件来是想隐藏提示框的交互功能,于是小白写了如下代码: document.onclick = function(e) { e.preventDefaul ...
- javascript设计模式(张容铭)学习笔记 - 照猫画虎-模板方法模式
模板方法模式(Template Method):父类中定义一组操作算法骨架,而降一些实现步骤延迟到子类中,使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤. 项目经理体验了各个页面的 ...
- JavaScript高级程序设计第14章表单脚本 (学习笔记)
第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...
- SQL反模式学习笔记14 关于Null值的使用
目标:辨别并使用Null值 反模式:将Null值作为普通的值,反之亦然 1.在表达式中使用Null: Null值与空字符串是不一样的,Null值参与任何的加.减.乘.除等其他运算,结果都是Null: ...
- 《JavaScript设计模式 张》整理
最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...
- CSharp设计模式读书笔记(14):职责链模式(学习难度:★★★☆☆,使用频率:★★☆☆☆)
职责链模式(Chain of Responsibility Pattern):避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象 ...
- [Python设计模式] 第19章 分公司=部门?——组合模式
github地址:https://github.com/cheesezh/python_design_patterns 组合模式 组合模式,将对象组合成树形结构以表示"部分-整体" ...
- Java 螺纹第三版 第一章Thread介绍、 第二章Thread创建和管理学习笔记
第一章 Thread导论 为何要用Thread ? 非堵塞I/O I/O多路技术 轮询(polling) 信号 警告(Alarm)和定时器(Timer) 独立的任务(Ta ...
- 《Lua程序设计》第7章 迭代器与泛型for 学习笔记
本章将介绍如何编写适用于泛型for的迭代其(Iterator).7.1 迭代器与closurehttp://www.cnblogs.com/moonlightpoet/p/5685275.html 7 ...
随机推荐
- django框架知识3
1.Django安装: 1.安装版本Django1.11.11 2.安装方式:命令行安装 pycharm安装 2.创建Django项目 1.创建方式:cd到你要创建的目录下 然后输入 Djang ...
- 黑马Stream流学习 Stream流 函数式接口 Lambda表达式 方法引用
- android 一些常用权限
<!-- 网络访问权限 --> <uses-permission android:name="android.permission.INTERNET" /> ...
- JavaScript引擎基本原理:Shapes和Inline Caches
原文链接: JavaScript engine fundamentals:Shapes and line Cahes 这篇文章描述了一些在js引擎中通用的关键点, 并不只是V8, 这个引擎的作者(Be ...
- 移动端meta的使用
伴随着web app的不断火热,移动端可以说是未来的大趋势了,下面是常用的一下meta <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> ...
- phpdesigner 配置SVN
- 设置Eclipse可以Debug模式调试JDK源码,并显示局部变量的值
最近突然萌发了研究JDK源码的想法,所以就想到了在自己常用的Eclipse上可以调试JDK源码. 整个设置过程也很简单: 首先你要安装好JDK(我的JDK安装路径根目录是D:\Java\jdk-8u9 ...
- jQuery deferred应用之ajax详细源码分析(二)
在上一节中,我只贴出了$.Deferred的源码分析,并没用讲解怎么使用它,现在我们先看看$.ajax是如何使用它,让我们进行异步任务的处理. 如果没看上节的代码,请先稍微了解一下jQuery Def ...
- 【javascript】2017-9-12 腾讯笔试小Q升序算法
刚做完笔试,腾讯笔试系统真的不友好,作为一个前端,我只会用js写编程题,然而,然而腾讯笔试系统连js输入函数都没给,还不准跳出页面,那个调试结果一直显示错误,我一直找不到错误在哪,心累. 只做了一道笔 ...
- # Volley源码解析(二) 没有缓存的情况下直接走网络请求源码分析#
Volley源码解析(二) 没有缓存的情况下直接走网络请求源码分析 Volley源码一共40多个类和接口.除去一些工具类的实现,核心代码只有20多个类.所以相对来说分析起来没有那么吃力.但是要想分析透 ...