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 相关文章推荐
jquery插件制作教程 txtHover
Aug 17 Javascript
asm.js使用示例代码
Nov 28 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python中内建函数的简单用法说明
2016/05/05 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
Python selenium的基本使用方法分析
2019/12/21 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python如何快速拼接字符串
2020/10/28 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
上学路上观后感
2015/06/16 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Django框架之路由用法
2022/06/10 Python