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的内存泄漏
Mar 04 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
原生JS实现不断变化的标签
May 22 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python中使用partial改变方法默认参数实例
2015/04/28 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Python中最大递归深度值的探讨
2019/03/05 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
四风对照检查剖析材料
2014/10/07 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
python基础之文件操作
2021/10/24 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python
python开发制作好看的时钟效果
2022/05/02 Python