Javascript設計模式 - 原文連結

組合模式 ( Composite ) :

語言 : JavaScript

說明 :

以一個遊戲角色為例 , 人物角色的技能表為 主選單 (skillMenu) , 主選單 包含 冰系技能選單 ( iceSkillMenu ) 和 火系技能選單 ( fireSkillMenu ) , 選單裡面分別還有對應屬性技能 .

適用情況 :

像上面舉例的這種情況 , 技能表 和 屬性技能 , 還有單個技能之間層次關係分明 , 就可以使用組合模式 .

作用 :

使得程式碼結構清晰 , 層次分明 , 便於修改 .

元件模式結構 :

元件類 ( Component ) :

元件類是元件模式的核心部分 , 以技能選單為例 , 技能需要繼承元件類 , 子系技能選單需要繼承元件類 , 主選單也要繼承 , 他們具有共同的方法和屬性 .

var Component = cc.Class.extend({
    children: null,
    name: null,

    ctor: function(name){
        this.name = name;
        this.children = new Object();
    },

    add: function(child){
        this.children[child.getName()] = child;
    },

    remove: function(child){
        delete this.children[child.getName()];
    },

    getName: function(){
        return this.name;
    },

    show: function(){
        for(var index in this.children)
        {
            console.log(this.children[index].getName());
            this.children[index].show();
        }
    }

});

客戶類 ( Client ) :

var iceSkillMenu = new Component("冰系技能");
var iceArrow = new Component("技能 - 寒冰箭");
var iceRain = new Component("技能 - 暴風雨");

iceSkillMenu.add(iceArrow);
iceSkillMenu.add(iceRain);

var fireSkillMenu = new Component("火系技能");
var fireBall = new Component("技能 - 火球術");
var fireWall = new Component("技能 - 火牆");

fireSkillMenu.add(fireBall);
fireSkillMenu.add(fireWall);

var skillMenu = new Component("技能選單");

skillMenu.add(iceSkillMenu);
skillMenu.add(fireSkillMenu);

skillMenu.show();    // 顯示技能選單

結果顯示 :