JavaScript组合模式学习要点


Posted in Javascript onAugust 26, 2016

组合模式:将一组对象组合成树形结构,并统一对待组合对象和叶对象,忽略它们之间的不同(因为叶对象也可以也可以包含叶对象而成为组合对象),组合模式中的对象只能是一对多的关系,不能出现多对一。

基本单元:一个组合对象包含多个叶对象。每个基本单元又可以是别的组合对象的叶对象类似文件夹与它里面的内容的关系网,一个文件夹或文件又可以是其它文件夹的内容,但一个文件夹或文件不能同时属于多个上级文件夹。

在JavaScript中实现组合模式时,要保证组合对象和叶对象拥有相同的接口方法,对同一组叶对象的操作必须具有一致性。

例子:

//定义组合对象
var Folder = function (name) {
this.name = name;
this.parent = null;
this.files = [];
};
Folder.prototype.add = function (file) {
file.parent = this;
if(this.files.indexOf(file) === -1){
this.files.push(file);
}else{
console.log('\''+file.name+'\'已存在,添加失败');
}
};
Folder.prototype.scan = function () {
if(this.parent){
console.log('开始扫描\''+this.parent.name+'\': '+this.name);
}else{
console.log('开始扫描根目录: '+this.name);
}
//关键在这里,调用所有它的叶对象的接口方法scan()
for(var i = 0, file; file = this.files[i++];){
file.scan();
}
};
Folder.prototype.remove = function (file) {
var n = this.files.indexOf(file);
if(n === -1){console.log('无法删除: \''+file.name+'\'不存在:');}
if(n >= 0){
this.files.splice(n,1);
console.log('成功删除:'+file.name);
}
};
//定义叶对象
var File = function (name) {
this.name = name;
this.parent = null;
};
File.prototype.add = function () {
console.log('不能添加在文件下面');
};
File.prototype.scan = function () {
console.log(this.parent.name+': '+this.name);
};
File.prototype.remove = function (file) {
console.log('无法删除: \''+file.name+'\'不存在:');
};
//测试
var folder = new Folder('目录');
var folder1 = new Folder('学习质料');
var folder2 = new Folder('javascript');
var file1 = new File('Node.js');
var file2 = new File('qq.jpg');
folder.add(folder1);
folder.add(folder1);
folder.add(folder2);
folder1.add(file1);
folder2.add(file2);
//'学习质料'添加成功
//'学习质料'已存在,添加失败
//'javascript'添加成功
//'Node.js'添加成功
//'qq.jpg'添加成功
folder.remove(folder1);
folder.remove(folder1);
file1.remove(file1);
//成功删除:学习质料
//无法删除: '学习质料'不存在:
//无法删除: 'Node.js'不存在:
folder.scan(); //这里相当于执行了一个宏命令
//开始扫描根目录: 目录
//开始扫描'目录': javascript
//javascript: qq.jpg

以上所述是小编给大家介绍的JavaScript组合模式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
react 项目中引入图片的几种方式
Jun 02 Javascript
前端面试题及答案整理(二)
Aug 26 #Javascript
js前端面试题及答案整理(一)
Aug 26 #Javascript
JavaScript中ES6字符串扩展方法
Aug 26 #Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 #Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 #Javascript
响应式表格之固定表头的简单实现
Aug 26 #Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 #Javascript
You might like
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
简单了解微信小程序的目录结构
2019/07/01 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python中使用while循环的实例
2019/08/05 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
小学音乐教学反思
2014/02/05 职场文书
美术教师自我鉴定
2014/02/12 职场文书
银行进社区活动总结
2014/07/07 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
数学教师个人工作总结
2015/02/06 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android