笔记

javascript设计模式笔记-9 组合模式

简述

  • 组合模式是将一系列类似的小对象组合成大的对象，由这个大对象提供接口来对里面的小对象进行操作。
  • 组合模式可以理解为树状结构。
  • 因此组合模式适合对大批对象的操作，特别是层次结构分明的。

组合模式例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

function ImagesStore (id) {
    this.children = [];

    this.element = document.createElement('div');
    this.element.id = id;
    this.element.className = 'imgs-store';
}
ImagesStore.prototype = {
    constructor: ImagesStore,

    add: function (child) {
        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.children.splice(i, 1);
                break;
            }
            this.element.removeChild(child.getElement());
        }
    },

    getChild: function (i) {
        return this.children[i];
    },

    getElement: function () {
        return this.element;
    },

    show: function () {
        this.element.style.display = '';
        for(var node, i = 0; node = this.getChild(i); i++) {
            node.show();
        }
    },

    hide: function () {
        for(var node, i = 0; node = this.getChild(i); i++) {
            node.hide();
        }
        this.element.style.display = 'none';
    }
};

function ImageItem (src) {
    this.element = document.createElement('img');
    this.element.src = src;
    this.element.className = 'img-item';
}

ImageItem.prototype = {
    constructor: ImagesStore,

    getElement: function () {
        return this.element;
    }
};

var store = new ImagesStore('imgs');
store.add(new ImageItem('1.jpg'));
store.add(new ImageItem('2.jpg'));

document.body.appendChild(store.element);