JS設計模式一：工廠模式

明易發表於2018-12-05
JS設計模式

這裡有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~如果覺得不錯，懇求star哈~


工廠模式簡述

工廠模式，顧名思義，就是為了創造物件。

工廠模式類似於現實的工廠生產線，可以生產出大量類似的商品。

工廠模式可以分為簡單工廠模式跟複雜工廠模式。以下將詳細介紹。

簡單工廠模式

先來看一個例子~~~

        function CarFactory (brand, price) {
            var car = new Object();
            car.brand = brand;
            car.price = price;
            car.getPrice = function () {
                return this.price;
            }
            return car;
        }
        var car1 = CarFactory("牌子A", 10000);
        var car2 = CarFactory("牌子B", 20000);
        console.log(JSON.stringify(car1)); // {"brand":"牌子A","price":10000}
        console.log(JSON.stringify(car2)); // {"brand":"牌子B","price":20000}
        console.log(typeof car1); // object
        console.log(typeof car2); // object
        console.log(car1 instanceof Object); // true
複製程式碼

如上程式碼：函式CarFactory接受兩個引數brand, price，最終返回一個物件。如果多次呼叫這個函式，每次將返回一個新的物件，這就跟工廠的生產線一樣。

簡單工廠模式的優點在於：能解決多個相似的問題，減少大量冗餘程式碼。

當然，簡單工廠模式的缺點也很突出：即無法識別物件型別（typeof car1 === 'object'）

為了解決簡單工廠模式無法識別物件型別的問題，複雜工廠模式便登場了~~~

複雜工廠模式

再看一個例子~~~

        function ComplexCarFactory(brand, price) {
            this.brand = brand;
            this.price = price;
        }
        ComplexCarFactory.prototype = {
            constructor: ComplexCarFactory,
            sellCar: function(){
                var speed = this.getSpeed(this.brand);
                console.log(this.brand + '的車子售價：' + this.price + '元人民幣，限速' + speed + '公里每小時');
            },
            getSpeed : function(brand){
                throw new Error("父類是抽象類不能直接呼叫，需要子類重寫該方法");
            }
        };
        var CarChild = function(brand, price) {
            this.brand = brand;
            this.price = price;
            // 繼承建構函式父類中的屬性和方法
            ComplexCarFactory.call(this, brand, price);
        };
        // 子類繼承父類原型方法
        CarChild.prototype = Object.create(ComplexCarFactory.prototype);
        // CarChild 子類重寫父類的方法
        CarChild.prototype.getSpeed = function(brand){
            var speed = null;
            if(brand === '牌子C'){
                return 100;
            }
            return 50;
        }
        var car3 = new CarChild("牌子C", 3000);
        console.log(car3); // CarChild {brand: "牌子C", price: 3000}
        console.log(car3.sellCar()); // 牌子C的車子售價：3000元人民幣，限速50公里每小時
複製程式碼

如上程式碼：

ComplexCarFactory為父類，CarChild為子類，CarChild繼承自ComplexCarFactory。

ComplexCarFactory不在進行物件例項化，只對建立過程中的一般性問題進行處理，ComplexCarFactory就像是Java中的抽象類，必須被子類重寫，否則呼叫ComplexCarFactory的sellCall方法時就會丟擲異常。

CarChild繼承自ComplexCarFactory，同時重寫了父類的方法，CarChild類例項後的物件之間是相互獨立的，具體的業務邏輯會放在子類中進行編寫。

總結

工廠模式最重要的優點是：可以在父類實現一些相同的方法，而具體要實現的業務邏輯可以放在子類中，通過子類重寫父類的方法，去實現自己的業務邏輯。

工廠模式弱化物件間的耦合，父類專注於實現重複性的功能，子類專注於具體的業務邏輯，這樣可以減少冗餘程式碼。

相關文章