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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
javascript 面向对象继承
2009/11/26 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
python音频处理的示例详解
2020/12/23 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
完美的中文自荐信
2014/05/24 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
升职自荐信怎么写
2015/03/05 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
2015年教师国培感言
2015/08/01 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
python垃圾回收机制原理分析
2022/04/13 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL