JavaScript工廠模式詳解

更新時(shí)間：2021年10月12日 16:27:55 作者：房西的啥玩意呀''

這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式,結(jié)合完整實(shí)例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關(guān)操作技巧,需要的朋友可以參考下

簡(jiǎn)單工廠模式（Simple Factory）

在這里插入圖片描述

//籃球基類
var Basketball = function() {
    this.intro = '籃球盛行于美國(guó)';
}
Basketball.prototype = {
    getMember: function() {
        console.log('每個(gè)隊(duì)伍需要五個(gè)隊(duì)員');
    },
    getBallSize: function() {
        console.log('籃球很大');
    }
}
//足球基類
var Football = function() {
    this.intro = '足球在世界范圍內(nèi)都很流行';
}
Football.prototype = {
    getMember: function() {
        console.log('每個(gè)隊(duì)伍需要11名隊(duì)員');
    },
    getBallSize: function() {
        console.log('足球很大');
    }
}
//運(yùn)動(dòng)工廠
var SportsFactory = function(name) {
    switch (name) {
        case 'NBA':
            return new Basketball();
        case 'worldCup':
            return new Football();
    }
}
//當(dāng)你需要為世界杯創(chuàng)建一個(gè)足球的時(shí)候，只需要記住運(yùn)功工廠sportsFactory即可，調(diào)用并創(chuàng)建
var Footnall = SportsFactory('worldCup');
console.log(Footnall);
console.log(Footnall.intro);
Footnall.getMember();

在這里插入圖片描述

//工廠模式
function createBook(name, time, type) {
    var o = new Object(); //創(chuàng)建一個(gè)對(duì)象，并對(duì)對(duì)象拓展屬性和方法
    //這是不相似的部分
    o.name = name; //書(shū)本名稱
    o.time = time; //書(shū)本出版時(shí)間
    o.type = type; //書(shū)本類型
    //下面是相似的部分
    o.getName = function() {
        console.log(this.name);
    };
    //將對(duì)象返回
    return o;
}
//創(chuàng)建兩本書(shū)
var book1 = new createBook('JS book', 2021, 'js');
var book2 = new createBook('CSS book', 2019, 'css');
book1.getName();
book2.getName();

在這里插入圖片描述

工廠方法模式（Factory Method）

在這里插入圖片描述

var Demo = function() {}
Demo.prototype = {
    show: function() {
        console.log('成功獲取');
    }
}
var d = new Demo();//正確創(chuàng)建實(shí)例
d.show(); //成功獲取
var d = Demo();//錯(cuò)誤創(chuàng)建實(shí)例
d.show(); //炸裂

在這里插入圖片描述

var Demo = function() {
    if (!this instanceof Demo) {//判斷this的指向
        return new Demo();
    }
}
Demo.prototype = {
    show: function() {
        console.log('安全模式類真好用');
    }
}
var d = Demo();
d.show();

在這里插入圖片描述

安全的工廠方法

//安全模式創(chuàng)建工廠類
var Factory = function(type, content) {
    if (this instanceof Factory) {
        var s = new this[type](content);
        return s;
    } else {
        return new Factory(type, content);
    }
}
//工廠原型中設(shè)置創(chuàng)建所有類型數(shù)據(jù)對(duì)象的基類
Factory.prototype = {
    java: function(content) {
        //...
    },
    UI: function(content) {
        this.content = content;
        (function() {
            var div = document.createElement('div');
            div.innerHTML = content;
            div.style.border = '1px soild red';
            document.getElementById('container').appendChild(div);
        })(content);
    },
    php: function(content) {
        //...
    },
    javascript: function(content) {
        //..
    }
};
//創(chuàng)建對(duì)象
var data = [
    { type: 'javascript', content: 'js哪家強(qiáng)' },
    { type: 'java', content: 'java哪家強(qiáng)' },
    { type: 'UI', content: 'UI哪家強(qiáng)' }
];
for (let index = 0; index < data.length; index++) {
    console.log(data[index].type);
    Factory(data[index].type, data[index].content);
}

在這里插入圖片描述

抽象工廠模式（Abstract Factory）

在這里插入圖片描述

var Car = function() {}
Car.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能調(diào)用');
    },
    getSpeed: function() {
        return new Error('抽象方法不能調(diào)用');
    }
};

在這里插入圖片描述

//抽象工廠方法
var VehicleFactory = function(subType, superType) {
    //判斷抽象工廠中是否有該抽象類
    if (typeof VehicleFactory[superType] === 'function') {
        //緩存類
        function F() {};
        //繼承父類屬性和方法
        F.prototype = new VehicleFactory[superType]();
        //將子類constructor指向子類
        subType.constructor = subType;
        //子類原型繼承父類
        subType.prototype = new F();
    } else {
        //不存在該抽象類則拋錯(cuò)
        throw new Error('未創(chuàng)建該抽象類');
    }
};
//小汽車抽象類
VehicleFactory.Car = function() {
    this.type = 'car';
}
VehicleFactory.Car.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能調(diào)用');
    },
    getSpeed: function() {
        return new Error('抽象方法不能調(diào)用');
    }
};
//公交車抽象類
VehicleFactory.Bus = function() {
    this.type = 'bus';
}
VehicleFactory.Bus.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能調(diào)用');
    },
    getPassengerNum: function() {
        return new Error('抽象方法不能調(diào)用');
    }
}

在這里插入圖片描述

//抽象與實(shí)現(xiàn)
//寶馬汽車子類
var BMW = function(price, speed) {
    this.price = price;
    this.speed = speed;
};
//抽象工廠實(shí)現(xiàn)對(duì)Car抽象類的繼承
VehicleFactory(BMW, 'Car');
BMW.prototype.getPrice = function() { //重寫方法
    return this.price;
}
BMW.prototype.getSpeed = function() {
    return this.speed;
};
//宇通公交車子類
var YUTONG = function(price, passenger) {
    this.price = price;
    this.passenger = passenger;
};
//抽象工廠實(shí)現(xiàn)對(duì)BUS抽象類的繼承
VehicleFactory(YUTONG, 'Bus');
YUTONG.prototype.getPrice = function() {
    return this.price;
}
YUTONG.prototype.getPassengerNum = function() {
    return this.passenger;
};
//實(shí)例化類
var myBMW = new BMW('100w', '1000km/h');
console.log(myBMW.getPrice(), myBMW.getSpeed(), myBMW.type);

在這里插入圖片描述