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隐藏参数post传值实例
Apr 18 Javascript
jQuery简单实现日历的方法
May 04 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
js html实现计算器功能
Nov 13 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
原生js+css实现tab切换功能
Sep 17 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 数组遍历顺序理解
2009/09/09 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
destoon数据库表说明汇总
2014/07/15 PHP
js图片自动切换效果处理代码
2013/05/07 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Django Highcharts制作图表
2016/08/27 Python
spyder常用快捷键(分享)
2017/07/19 Python
django中的setting最佳配置小结
2017/11/21 Python
Python制作exe文件简单流程
2019/01/24 Python
python sort、sort_index方法代码实例
2019/03/28 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
Python魔术方法专题
2020/06/19 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
11月升旗仪式讲话稿
2014/02/15 职场文书
《口技》教学反思
2014/02/21 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
pytorch--之halfTensor的使用详解
2021/05/24 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android