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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
浅析Vue 中的 render 函数
Feb 28 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
php数组去重的函数代码
2013/02/03 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
js精度溢出解决方案
2012/12/02 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python开发之函数定义实例分析
2015/11/12 Python
详解python之简单主机批量管理工具
2017/01/27 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python算法之图的遍历
2017/11/16 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
个人现实表现材料
2014/02/04 职场文书
演讲稿开场白台词
2014/08/25 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
买房子个人收入证明
2014/10/12 职场文书
安全承诺书
2015/01/19 职场文书
自主招生英文自荐信
2015/03/25 职场文书
交通处罚决定书
2015/06/24 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python