威尼斯www.9778.com-威尼斯正版官方网站

JavaScript 设计模式之组合模式解析_js面向对象_脚本之家

日期:2020-01-06编辑作者:服务器&运维

威尼斯www.9778.com,定义

怎么说呢?!就像是动物时,它的后代就有了某种功能;也像是一棵树,它有一个根然后是从这个棵树向外冒出的其他枝杆以及从这些枝杆又向外长的叶子。换句话说,就是当祖先已经有了,那么只要从这个祖先衍生出来的其他孩子已经就具备了某种功能,看上去貌似又有些像是继承。“组合模式”在组合对象的层次体系中有两种类型的对象:叶对象和组合对象。组合模式擅长于对大批对象进行操作。 “组合模式”就是在做一个项目的时候,我们要把在这个项目中即将出现的方法都在组合对象中定义,而它们的叶对象将会继承组合对象。当组合对象被实例化后其叶对象的方法也相应地被实例化了。可能我说的有些乱,下面就用一个例子来说明吧。 “组合模式”是一种专为创建Web上的动态用户界面而量身定制的模式。使用这种模式,可以用一条命令在多个对象上激发复杂的或递归的行为。 使用“组合模式”可以为我们带来两大好处: 1、可以用同样的方法处理对象的集合与其中的特定子对象。 2、可以用来把一批子对象组织成树形结构,并且使整棵树都可以被遍历。 只有同时具备以下两个条件进才适合使用组合模式: 1、存在一批组织成某处层次体系的对象。 2、希望对这批对象或其中的一部分对象实话一个操作。 下面看一下示例: 具体要求是做一个图片库且可以有选择地隐藏或显示图片库的特定部分。这可能是单独图片,也可能是图片库。现在就需要两个类来完成这个功能:用作图片库的组合对象类和用于图片本身的叶对象类,代码如下: 在上面的代码中,首先定义的是组合对象类和叶对象类应该实现的接口。除了常规的组合远景一分钱上,这些类要怕硬欺软 操作只包括hide和show。接下来我们定义叶对象。叶对象实现hide和show,代码如下: 复制代码 代码如下: var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); // 检查组合对象Composite应该具备的方法 var GalleryItem = new Interface('GalleryItem', ['hide', 'show']); // 检查组合对象GalleryItem应该具备的方法 // DynamicGallery Class var DynamicGallery = function{// 实现Composite,GalleryItem组合对象类 this.children = []; this.element = document.createElement; this.element.id = id; this.element.className = 'dynamic-gallery'; } DynamicGallery.prototype = { // 实现Composite组合对象接口 add : function{ Interface.ensureImplements(child, Composite, DynamicGallery); this.children.push; this.element.appendChild; }, remove : function{ for(var node, i = 0; node = this.getChild{ if{ this.children.splice; break; } } this.element.removeChild; }, getChild : function{ return this.children[i]; }, // 实现DynamicGallery组合对象接口 hide : function(){ for(var node, i = 0; node = this.getChild; } this.element.style.display = 'none'; }, show : functioln(){ this.element.style.display = 'block'; for(var node, i = 0; node = getChild; } }, // 帮助方法 getElement : function(){ return this.element; } } 以下是设置叶对象的相应方法: 复制代码 代码如下: // GalleryImage class var GalleryImage = function{// 实现Composite和GalleryItem组合对象中所定义的方法 this.element = document.createElement; this.element.className = 'gallery-image'; this.element.src = src; } GalleryImage.prototype = { // 实现Composite接口 // 这些是叶结点,所以我们不用实现这些方法,我们只需要定义即可 add : function(){}, remove : function(){}, getChild : function(){}, // 实现GalleryItem接口 hide : function(){ this.element.style.display = 'none'; }, show : function(){ this.element.style.display = ''; }, // 帮助方法 getElement : function(){ return this.element; } } 这是一个演示组合模式的工作方式的例子。每个类都很简单,但由于有了这样一种层次体系,我们就可以执行一些复杂操作。GalleryImage类的构造函数会创建一个image元素。这个类定义中的其余部分由空的组合对象方法和GalleryItem要求的操作组成。现在我们可以使用这两个类来管理图片: 复制代码 代码如下: var topGallery = new DynamicGallery; topGallery.add(new GalleryImage; topGallery.add(new GalleryImage; topGallery.add(new GalleryImage; var vacationPhotos = new DyamicGallery; for(var i = 0, i < 30; i++){ vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg')); } topGallery.add; topGallery.show(); vacationPhotos.hide(); 组合模式之利,使用组合模式,简单的操作也能产生复杂的结果。不必编写大师手工遍历数组或其他数据结构的粘合代码,只需对最顶层的对象执行操作,主每一个子对象自己传递这个操作即可。这对于那些再三执行的操作尤其有用。在组合模式中,各个对象之间的耦合非常松散。每当对顶层组合对象执行一个操作时,实际上是在对整个结构进行尝试优先的搜索以查找节点。 组合模式之弊,由于对组合模式调用的任何操作都会被颇佳北至 它的所有子对象,如果这个层次体系很大的话,系统的性能将会受到影响。

组合,顾名思义是指用包含多个部件的对象创建单一实体。 这个单一实体将用作所有这些部件的访问点,虽然这大大简化了操作,但也可能具有相当的欺骗性,因为没有哪种隐性方式明确表明该组合包含多少部件。组合模式的目标是解耦客户程序与复杂元素内部架构,使得客户程序对待所有子元素都一视同仁。

每个子节点都可以使复杂的存在,对于父节点来说,不需要知道子节点的复杂性或者实现子节点的复杂性,只需要关注子节点的特定方法,便可以使用子节点。简化了父和子之间的关系。

对于子节点来说也是一样的,过多的接口暴露有时候也是一种滥用,同时也减少了对外部的依赖。

示例我们最好使用例证解说组合。 在下图中,您可以看到两种不同类型的对象: 容器和库是组合,图像是叶片。 组合可承载子项,但一般不会实施更多行为。 叶片包含绝大多数行为,但不能承载子项,至少在传统的组合示例中不可以。

此示例创建图片库,将其作为组合模式示例。 只有三个层次: 专辑、库和图像。 专辑和库将作为组合,图像是叶片,如上面那张图所示。这是一种比组合本身需求更加明确的结构,但对于本示例而言,将这些层次仅限制为组合或叶片很有意义。 标准组合不会限制哪些结构层次可以具有叶片,也不会限制叶片数量。

要开始操作,应首先创建用于专辑和库的 GalleryComposite“类”。 请注意,我正在使用 jQuery 执行 DOM 操作以简化过程。

var GalleryComposite = function  { this.children = []; this.element = $ .append('' + heading + '');}GalleryComposite.prototype = { add: function  { this.children.push; this.element.append; }, remove: function  { for (var node, i = 0; node = this.getChild { if  { this.children.splice; this.element.detach; return true; } if  { return true; } } return false; }, getChild: function  { return this.children[i]; }, hide: function () { for (var node, i = 0; node = this.getChild { node.hide(); } this.element.hide; }, show: function () { for (var node, i = 0; node = this.getChild { node.show(); } this.element.show; }, getElement: function () { return this.element; }}

这个位置有点棘手,能否允许我再更多的解释一下? 我们同时使用 add, remove, 和getChild getChild 方法构建这一组合。 本示例不会实际使用 remove 和 getChild,但它们对于创建动态组合非常有用。 hide, show, 和getElement 方法则用来操纵 DOM。 该组合旨在作为库的 表示在页面上向用户展示。 该组合可通过 hide 和 show控制这些库元素。 如果在专辑上调用 hide,则整个专辑将消失,或者您也可以只在单一图像上调用它,这样只有该图像会消失。

现在,创建一个 GalleryImage类。 请注意,它使用的方法与 GalleryComposite完全相同。 换句话说,它们实现同一接口,不同的是该图像是叶片,因此不会实际对子项相关方法执行任何操作,就像不具有任何子项一样。 必须使用同一接口运行该组合,因为组合元素不知道自身添加的是另一个组合元素还是叶片,因此如果尝试在其子项上调用这些方法,则需要运行完全正常,没有任何错误。

var GalleryImage = function  { this.children = []; this.element = $ .attr .attr;}GalleryImage.prototype = { // Due to this being a leaf, it doesn't use these methods, // but must implement them to count as implementing the // Composite interface add: function () { }, remove: function () { }, getChild: function () { }, hide: function () { this.element.hide; }, show: function () { this.element.show; }, getElement: function () { return this.element; }}

鉴于您已经构建了对象原型,您现已能够进行使用。 从下面您可以看到实际构建图像库的代码。

var container = new GalleryComposite;var gallery1 = new GalleryComposite('Gallery 1', 'gallery1');var gallery2 = new GalleryComposite('Gallery 2', 'gallery2');var image1 = new GalleryImage;var image2 = new GalleryImage;var image3 = new GalleryImage;var image4 = new GalleryImage;gallery1.add;gallery1.add;gallery2.add;gallery2.add;container.add;container.add;// Make sure to add the top container to the body,// otherwise it'll never show up.container.getElement;container.show();

组合模式之利:简单的操作也能产生复杂的结果,只需对最顶层的对象执行操作,让每一个子对象自己传递这个操作即可。这对于那些再三执行的操作尤其有用。

在组合模式中,各个对象之间的耦合非常松散。只要它们实现了同样的接口那么改变它们的位置或互换它们只是举手之劳。着促进了代码的重用,也有利于代码重构。

每当对顶层组合对象执行一个操作时,实际上是在对整个结构进行深度优先的搜索以查找节点,而创建组合对象的程序员对这些细节一无所知。在这个层次体系中添加、删除和查找节点都非常容易。

组合模式之弊:组合对象的易用性可能掩盖了它所支持的每一种操作的代价。由于组合对象调用的任何操作都会被传递到它的所有子对象如果这个层次体系很大的话,系统的性能将会受到影响。组合模式的正常运作需要用到某种形式的接口。

组合对象和节点类被用作HTML元素的包装工具时,组合对象必须遵守HTML的使用规则。例如,表格就很难转化为一个组合对象。

接口检查越严格,组合对象类也就越可靠。

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:JavaScript 设计模式之组合模式解析_js面向对象_脚本之家

关键词:

JQuery解析XML的方法小结,jqueryxml小结

用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例...

详细>>

给十八岁的自己

$.window('refresh','url01.php');$.window;$.window;$.window('refresh','url01.php'); 希望十八岁的你坦坦荡荡与所有的恶人无关 尽管一切...

详细>>

javascript 11个才具

这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题...

详细>>

jquery实现点击展开列表同时隐藏其他列表_jquery_脚本之家

本文实例呈报了jquery达成点击打开列表相同的时候掩盖其余列表。分享给大家供我们参考。具体如下: 原生js实现新...

详细>>