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 相关文章推荐
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 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批量上传图片的具体实现方法介绍.
2014/02/26 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
Javascript函数的参数
2015/07/16 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
python中字符串类型json操作的注意事项
2017/05/02 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python实战购物车项目的实现参考
2019/02/20 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Python初学者常见错误详解
2019/07/02 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
保送生自荐信范文
2013/10/06 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
一年级学生期末评语
2014/04/21 职场文书