1. 程式人生 > >JavaScript設計模式之-----工廠模式

JavaScript設計模式之-----工廠模式

// 簡單工廠模式 由一個工廠物件決定建立某一種產品物件的例項。主要用來建立同一類物件
// 簡單工廠模式的理念 就是建立物件 或建立 相似物件
// 籃球類的基類
var Baseketball = function () {
    this.intro = '籃球盛行於美國';
};
Baseketball.prototype = {
    getMenber: function () {
        console.log('每個隊伍需要5名隊員')
    },
    getBallSize: function () {
        console.log('籃球很大')
    }
};
// 足球類的基類
var Football = function () {
    this.intro = '足球在世界各地都很流行';
};
Football.prototype = {
    getMenber: function () {
        console.log('每個隊伍需要11名隊員')
    },
    getBallSize: function () {
        console.log('足球很大')
    }
};
// 網球類的基類
var Tennis = function () {
    this.intro = '每年有很多網球比賽';
};
Tennis.prototype = {
    getMenber: function () {
        console.log('每個隊伍需要2名隊員')
    },
    getBallSize: function () {
        console.log('網球很小')
    }
};

// 運動工廠
var SportsFactory = function (name) {
    switch (name) {
        case 'NBA':
            return new Baseketball();
        case 'wordCup':
            return new Football();
        case 'FrenchOpen':
            return new Tennis();
    }
};
var footnall = SportsFactory('NBA');
console.log(footnall.intro);




function createBook(name, time, type) {
    var o = new Object();
    o.name = name;
    o.time = time;
    o.type = type;
    o.getName = function () {
        console.log(this.name)
    };
    return o;
}
var book1 = createBook('js book', 2014, 'js');
var book2 = createBook('css book', 2014, 'css');
book1.getName();
book2.getName();




// 廣告展示demo
var Java = function (content) {
    // 將內容儲存在content裡面以備日後使用
    this.content = content;
    // 建立物件時,通過閉包,直接執行,將內容按照需求的樣式直接插入到頁面
    (function (content) {
        var div = document.createElement('div');
        div.innerHTML = content;
        div.style.color = 'green';
        document.getElementById('container').appendChild(div);
    })(content);
};

// 建立php 學科類
var Php = function (content) {
    // 將內容儲存在content裡面以備日後使用
    this.content = content;
    // 建立物件時,通過閉包,直接執行,將內容按照需求的樣式直接插入到頁面
    (function (content) {
        var div = document.createElement('div');
        div.innerHTML = content;
        div.style.color = 'yellow';
        document.getElementById('container').appendChild(div);
    })(content);
};

// 學科工廠類
function JobFactory(type, content) {
    switch (type) {
        case 'java':
            return new Java(content);
        case 'php':
            return new Php(content);
    }
}

JobFactory('java', 'java學習哪裡好');


/*
 * 安全模式類
 * 防止類例項化的時候 沒有使用new 造成的錯誤
 * */
var Demo = function () {
    if (!(this instanceof Demo)) {
        return new Demo();
    }
};

Demo.prototype = {
    show: function () {
        console.log('show')
    }
};

var d = new Demo();
var d = Demo();
d.show();


/*
 *  ★★★★★ 安全的工廠方法 ★★★★★  簡單工廠模式應用太侷限
 *  通過工廠方法模式 我們可以輕鬆建立多個類的例項物件,這樣工廠方法物件在建立物件的方式也避免使用者與物件類之間的耦合,使用者不必關係建立物件的具體類,只需要呼叫工廠方法即可
 * */

// 安全模式建立的工廠類
var Factory = function (type, content) {
    if (this instanceof Factory) {
        return new this[type](content);
    } else {
        return new Factory(type, content);
    }
};

// 工廠模型中設定建立所有型別資料物件的基類
Factory.prototype = {
    Java: function (content) {
        console.log(content)
    },
    JavaScript: function (content) {
        console.log(content)
    },
    Php: function (content) {
        console.log(content)
    }
};
var data = [
    {type: 'Java', content: 'Java哪家強'},
    {type: 'JavaScript', content: 'JavaScript哪家強'},
    {type: 'Php', content: 'Php哪家強'}
];
for (var i = 0, len = data.length; i < len; i++) {
    Factory(data[i].type, data[i].content)
}