javascript设计模式_第二部分_组合模式

 

组合模式: 将对象以树形结构组织起来,以达成“部分－整体” 的层次结构，使得客户端对单个对象和组合对象的使用具有一致性.<br />
组合对象的结构:分为 叶对象 与 组合对象 

适用条件:

   1.存在组织成层次体系的对象

   2.可以对这批对象的部分实施统一操作

 

 

 

模式之利: 

   1.简单的操作可以产生复杂的结果

   2.各对象间耦合非常松散

   3.层次体系,方便递归循环等操作

 

模式之弊:

   1.层次休系大的话,性能受影响

   2.使用接口,增加复杂性

 

小结:

   把一批子对象组织为树型结构,只要一条命令就可以操作树中的所有对象.提高了代码的模块化程序,便于工作于代码重构和对象的更换.

 

 

 

CODE：

书中的代码:

 

// Interfaces. var Composite = new Interface('Composite', ['add', 'remove', 'getChild']); var GalleryItem = new Interface('GalleryItem', ['hide', 'show']); // DynamicGallery class. var DynamicGallery = function(id) { // implements Composite, GalleryItem this.children = []; this.element = document.createElement('div'); this.element.id = id; this.element.className = 'dynamic-gallery'; } DynamicGallery.prototype = { // Implement the Composite interface. add: function(child) { Interface.ensureImplements(child, Composite, GalleryItem); this.children.push(child); this.element.appendChild(child.getElement()); }, remove: function(child) { for(var node, i = 0; node = this.getChild(i); i++) { if(node == child) { this.formComponents[i].splice(i, 1); break; } } this.element.removeChild(child.getElement()); }, getChild: function(i) { return this.children[i]; }, // Implement the GalleryItem interface. hide: function() { for(var node, i = 0; node = this.getChild(i); i++) { node.hide(); } this.element.style.display = 'none'; }, show: function() { this.element.style.display = 'block'; for(var node, i = 0; node = this.getChild(i); i++) { node.show(); } }, // Helper methods. getElement: function() { return this.element; } }; // GalleryImage class. var GalleryImage = function(src) { // implements Composite, GalleryItem this.element = document.createElement('img'); this.element.className = 'gallery-image'; this.element.src = src; } GalleryImage.prototype = { // Implement the Composite interface. add: function() {}, // This is a leaf node, so we don't remove: function() {}, // implement these methods, we just getChild: function() {}, // define them. // Implement the GalleryItem interface. hide: function() { this.element.style.display = 'none'; }, show: function() { this.element.style.display = ''; // Restore the display attribute to its // previous setting. }, // Helper methods. getElement: function() { return this.element; } }; // Usage. var topGallery = new DynamicGallery('top-gallery'); topGallery.add(new GalleryImage('/img/image-1.jpg')); topGallery.add(new GalleryImage('/img/image-2.jpg')); topGallery.add(new GalleryImage('/img/image-3.jpg')); var vacationPhotos = new DynamicGallery('vacation-photos'); for(var i = 0; i < 30; i++) { vacationPhotos.add(new GalleryImage('/img/vac/image-' + i + '.jpg')); } topGallery.add(vacationPhotos); topGallery.show(); // Show the main gallery, vacationPhotos.hide(); // but hide the vacation gallery.

 

 

注意:这段是自己随意写的,也没使用接口.只是一个形式上的例子~~

 

 <div>

    <div id="maindiv"></div>

    <div id="subdiv"></div>

 </div>

 

 

 addEvent = function(obj, evType, fn){ if (obj.addEventListener) { obj.addEventListener(evType, fn, false); return true; } else if(obj.attachEvent){ obj.attachEvent("on" + evType, fn); } else { obj["on"+type] = fn; } } removeEvent = function(obj, evType, fn){ if (obj.removeEventListener) { obj.removeEventListener(evType, fn, false); return true; } else if(obj.detachEvent){ obj.detachEvent("on" + evType, fn); } else { obj["on"+type] = null; } } function mainCheckbox(name){ this.elem = document.createElement("input"); this.elem.setAttribute("type","checkbox"); this.elem.setAttribute("name",name); var div = document.getElementById("maindiv"); div.appendChild(this.elem); this.subCheckbox = []; } mainCheckbox.prototype = { clicked : function(){ if(this.elem.checked == true){ for(var i=0; i<this.subCheckbox.length; i++){ this.subCheckbox[i]._getChecked(); } } else{ for(var i=0; i<this.subCheckbox.length; i++){ this.subCheckbox[i]._getUnChecked(); } } }, addSub : function(){ for(var i=0; i<arguments.length; i++){ this.subCheckbox.push(arguments[i]); } }, delSub : function(name){ for(var i=0; i<arguments.length; i++){ if(this.subCheckbox[i] == name){ this.subCheckbox.splice(i,1); break; } } } } function subCheckbox(name){ this.elem = document.createElement("input"); this.elem.setAttribute("type","checkbox"); this.elem.setAttribute("name",name); var div = document.getElementById("subdiv"); div.appendChild(this.elem); } subCheckbox.prototype = { _getChecked : function(){ this.elem.checked = true; } , _getUnChecked : function(){ this.elem.checked = false; } } var m = new mainCheckbox("mainCheckbox"); addEvent(m.elem,"click", function(){ m.clicked();} ) var s1 = new subCheckbox("s1"); var s2 = new subCheckbox("s2"); var s3 = new subCheckbox("s3"); var s4 = new subCheckbox("s4"); m.addSub(s1,s2,s3); var m1 = new mainCheckbox("mainCheckbox1"); m1.addSub(s2,s3,s4); addEvent(m1.elem,"click", function(){ m1.clicked();} )