JavaScript設計模式- 簡單工廠模式

Loong_T 發(fā)布于2019-08-23 12:08 / 1555人閱讀

摘要：簡單工廠模式又叫靜態(tài)工廠方法模式，由一個工廠對象決定創(chuàng)建某一種產品對象類的實例。主要用來創(chuàng)建同一類對象。場景一比如體育商店賣體育器材，里面有很多體育用品，及相關介紹，當我們想買一個籃球及相關介紹時，只需要溫售貨員，他會幫你找到所有的東西。

簡單工廠模式又叫靜態(tài)工廠方法模式，由一個工廠對象決定創(chuàng)建某一種產品對象類的實例。主要用來創(chuàng)建同一類對象。
場景一：
比如體育商店賣體育器材，里面有很多體育用品，及相關介紹，當我們想買一個籃球及相關介紹時，只需要溫售貨員，他會幫你找到所有的東西。

//籃球基類
var Baseketball = function () {
    this.intro = "籃球盛行于美國"
}
Baseketball.prototype ={
    getMember:function () {
        console.log("每個隊伍需要5名隊員");
    },
    getBallSize:function () {
        console.log("籃球很大");
    }
}
//足球基類
var Football = function () {
    this.intro = "足球在世界范圍內很流行";
}
Football.prototype = {
    getMember:function () {
        console.log("每個隊伍需要11名隊員");
    },
    getBallSize:function () {
        console.log("足球很大")
    }
}
//網球基類
var Tennis = function () {
    this.intro = "每年有很多網球系列賽";
}
Tennis.prototype = {
    getMember:function () {
        console.log("每個隊伍需要1名隊員");
    },
    getBallSize:function () {
        console.log("網球很小");
    }
}
//運動工廠
var SportFactory = function (name) {
    switch (name) {
        case "NBA":return new Baseketball();
        case "wordCup":return new Football();
        case "FrenchOpen":return new Tennis();
    }
}

//為世界杯創(chuàng)造一個足球，只需要記住運動工廠SportsFactory,調用并且創(chuàng)建
var football = SportFactory("wordCup");
console.log(football);
console.log(football.intro);
football.getMember();

場景二：
登錄模塊和注冊模塊的需求中有許多提示框，可以利用簡單工廠模式，將提示框互相借鑒

var PopFactory = function (name) {
    switch (name) {
        case "alert":return new LoginAlert();
        case "confirm":return new LoginConfirm();
        case "promt":return new LoginPrompt();
    }
}

但是LoginAlert、LoginConfirm、LoginPrompt有很多是相同的，這時可以抽取相同的出來，如下：

function createPop(type,text) {
    //創(chuàng)建一個對象，并對對象拓展屬性和方法
    var o =new Object();
    o.content = text;
    o.show = function () {
        //顯示方法
    }
    if(type == "alert"){
        //警示框差異部分
    }
    if(type == "prompt"){
        //提示框差異部分
    }
    if(type == "confirm"){
        //確認框差異部分
    }
    //將對象返回
    return o;
}
//創(chuàng)建警示框
var userNameAlert = createPop("alert","用戶名只能是26個字母和數(shù)字");

這兩種方式創(chuàng)建簡單工廠模式有區(qū)別，第一種是通過類實例化對象創(chuàng)建的，第二種是創(chuàng)建一個新對象然后包裝增強其屬性和功能來實現(xiàn)的。

云服務器 GPU云服務器代碼設計模式工廠模式工廠模式工廠方法模式抽象工廠模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/97973.html

javascript實現(xiàn)簡單工廠模式

摘要：從設計模式的分類來看簡單工廠模式是創(chuàng)建型模式。使用簡單工廠模式將會增加系統(tǒng)中類的個數(shù)，在一定程序上增加了系統(tǒng)的復雜度和理解難度。簡單工廠模式由于使用了靜態(tài)工廠方法，造成工廠角色無法形成基于繼承的等級結構。簡單工廠模式提供了一個接口可以根據(jù)傳遞的參數(shù)的不同創(chuàng)建不同的對象，從而將對象自身的邏輯與對象的創(chuàng)建分離開。從設計模式的分類來看簡單工廠模式是創(chuàng)建型模式。事實上與簡單工廠模式類似的還...

Code4App 2019-08-19 17:18 評論0 收藏0
Javascript設計模式-工廠模式

摘要：設計模式工廠模式最近閱讀了幾本設計模式方面的書籍學習之余整理下來方便以后的歸納和梳理設計模式工廠模式創(chuàng)造工廠模式是一種創(chuàng)建性模式也就是一種創(chuàng)建對象的最佳實踐首先我們需要理解為什么我們需要工廠模式想象一個場景如果你要求去買一些東西板燒雞腿 Javascript設計模式-工廠模式最近閱讀了幾本設計模式方面的書籍,學習之余整理下來,方便以后的歸納和梳理設計模式-工廠模式創(chuàng)造工廠模式是一...

feng409 2019-08-22 10:50 評論0 收藏0
JavaScript設計模式系列一：工廠模式

摘要：設計模式共有種，我今天先來了解一下工廠模式，其他的模式將會在后續(xù)的博客中陸續(xù)為大家講解。工廠模式主要分為簡單工廠模式和抽象工廠模式。抽象工廠模式抽象工廠模式與簡單工廠函數(shù)不同的是，抽象工廠函數(shù)會先設計好接口，具體的實現(xiàn)在子類中進行。設計模式設計模式（design pattern）概念：是一套反復使用、思想成熟、經過分類和無數(shù)實戰(zhàn)設計經驗的總結。是為了代碼可重用、可擴展、可解耦、更容...

OldPanda 2019-08-21 18:18 評論0 收藏0
JavaScript工廠模式

摘要：基于工廠角色和產品角色的多態(tài)性設計是工廠方法模式的關鍵。工廠方法模式之所以又被稱為多態(tài)工廠模式，是因為所有的具體工廠類都具有同一抽象父類。工廠方法模式總結工廠方法模式是簡單工廠模式的進一步抽象和推廣。 JavaScript工廠模式首先需要說一下工廠模式。工廠模式根據(jù)抽象程度的不同分為三種簡單工廠模式工廠方法模式抽象工廠模式 1.簡單工廠模式簡單工廠模式:又稱為靜態(tài)工廠方法...

oujie 2019-08-21 18:33 評論0 收藏0
JavaScript設計模式-工廠方法模式

摘要：工廠方法模式，通過對產品類的抽象使其創(chuàng)建業(yè)務，主要負責創(chuàng)建多類產品的實例。安全模式類安全模式類可以屏蔽使用類的錯誤造成的錯誤。可以將工廠方法看作是一個實例化對象的工廠類，安全起見，采用安全模式類，將創(chuàng)建對象的基類放在工廠方法類的原型中即可。工廠方法模式，通過對產品類的抽象使其創(chuàng)建業(yè)務，主要負責創(chuàng)建多類產品的實例。前面記錄了簡單工廠模式，但是需求時不斷變化的，當需求簡單時，直接創(chuàng)建對象...

shixinzhang 2019-08-23 12:09 評論0 收藏0
JavaScript設計模式一：工廠模式和構造器模式

摘要：集中實例化的函數(shù)第一個實例第二個實例工廠模式的分類工廠模式分為簡單工廠抽象工廠和智能工廠，工廠模式不顯示地要求使用一個構造函數(shù)。工廠模式之弊大多數(shù)類最好使用關鍵字和構造函數(shù)，可以讓代碼更加簡單易讀。帶原型的構造器中有一個名為的屬性。什么是模式前陣子準備期末考試，挺累也挺忙的，實在閑不得空來更新文章，今天和大家說說javascript中的設計模式。首先呢，我們需要知道的是：模式是一...

MkkHou 2019-08-21 10:26 評論0 收藏0