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 相关文章推荐
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
js canvas实现擦除动画
Jul 16 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
前端面试题及答案整理(二)
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
xajax写的留言本
2006/11/25 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
学习PHP session的传递方式
2016/06/15 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
学习ExtJS border布局
2009/10/08 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
python中time.ctime()实例用法
2021/02/03 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
党员进社区活动总结
2015/05/07 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python