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之大字符串的连接的StringBuffer 类
May 08 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
Js基础学习资料
Nov 23 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
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
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
如何离线执行php任务
2017/02/21 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
JS实现简单短信验证码界面
2017/08/07 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
浅谈Python peewee 使用经验
2017/10/20 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
向女朋友道歉的话
2015/01/20 职场文书
销售业务员岗位职责
2015/02/13 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书