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的链式调用之each函数
Dec 03 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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 define函数的使用说明
2008/08/27 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
Js动态创建div
2008/09/25 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
javascript数组去重小结
2016/03/07 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
临床护士自荐信
2014/01/31 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
体育节口号
2014/06/19 职场文书
小学总务工作总结
2015/08/13 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫