2021-11-16 - 學習記錄

1. 設計模式學習：創建型：工廠（工廠方法，抽象工廠），建造者，單例，原型

設計模式：工廠模式

簡單工廠

/*
 * @Author: zzh
 * @Date: 2021-10-20 17:07:13
 * @LastEditors: zzh
 * @LastEditTime: 2021-11-16 13:42:10
 * @FilePath: \origin\設計模式\simpleFactory.js
 * @Description: 簡單工廠方法
 */

/**
 * 簡單工廠方法：
 * 簡單工廠模式：又叫靜態工廠方法，由一個工廠對象決定創建某一種產品對象類的實例。主要用來創建同一類對象。
 * 工廠方法的核心，也是最簡單的工廠方法
 * 創建一個工廠，然後利用參數告知這個工廠，讓其創建指定的對象
 * 優點：解耦，把不同且功能相似的對象進行隔離，利用工廠統一管理
 * 缺點：如果新增或者刪除，影響到了工廠獲取產品的方法，違背了開閉原則 -> 工廠方法模式
 */

class Car {
     go() {
         console.log('開車出門咯...');
     }
}

class Bike {
    go() {
        console.log('騎自行車出門咯...');
    }
}

class SimpleFactory {
    getVehicle (vehicle) {
        switch (vehicle) {
            case 'car': return new Car();
            case 'bike': return new Bike();
            // ..., 可能還有很多其他交通工具
        }
    }

}

// 測試
const factory = new SimpleFactory(); // 先獲取工廠示例，這裏使用靜態方法，直接獲取交通工具
const myVehicle = factory.getVehicle('bike'); // 獲取想要的出行工具
myVehicle.go(); // 出發

工廠方法

/**
 * 繼簡單工廠之後，我們知道，簡單工廠模式在新增、修改、刪除時會對工廠產生一定的影響，違背了開閉原則，那麼工廠方法便解決了這一問題
 * 工廠方法模式的本意就是將實際創建對象的工作推遲到子類中，所以我們可以將工廠方法看作是一個實例化對象的工廠類。
 * 角色：抽象工廠，具體工廠，抽象產品，具體產品
 * 
 */
// 因爲js沒有接口的概念，所以不需要創建抽象工廠

class Car {
    go() {
        console.log('開車出門咯...');
    }
}

class Bike {
    go() {
        console.log('騎自行車出門咯...');
    }
}

// 新增：class XXXX {}
// ....

class Factory {
    getVehicle(type) {
        return this[type];
    }
}

Factory.prototype.Car = new Car();
Factory.prototype.Bike = new Bike();
// 新增：Factory.prototype.XXX = new XXX();
// ...

// 測試
const factory = new Factory();
const myVehicle = factory.getVehicle('Bike');
myVehicle.go();

抽象工廠

/**
 * 工廠方法解決的是一個工廠針對一種類型的系列產品，
 * 那麼如果是一個工廠，裏面有多種系列產品呢？例如汽車，自行車；手機，mp3；衣服，帽子等；
 * 當然可以使用多個工廠方法，如果在一個工廠裏面該如何解決呢？
 * 
 */

class Car {
    go() {
        console.log('開車出門咯...');
    }
}

class Bike {
    go() {
        console.log('騎自行車出門咯...');
    }
}
// 新增：class XXXX {}
// ....


class Phone {
    start() {
        console.log('打開手機...');
    }
}

class Mp3 {
    start() {
        console.log('打開MP3...');
    }
}

// 新增：class XXXX {}
// ....

class Factory {
    getVehicle(type, product) {
        return this[type][product];
    }
}

Factory.prototype.vehicle = {};
Factory.prototype.vehicle.Car = new Car();
Factory.prototype.vehicle.Bike = new Bike();
// 新增：Factory.prototype.XXX = new XXX();
// ...

Factory.prototype.electronic = {};
Factory.prototype.electronic.Phone = new Phone();
Factory.prototype.electronic.Mp3 = new Mp3();
// 新增：Factory.prototype.YYYY = new YYYY();
// ...


// 測試
const factory = new Factory();
const myVehicle = factory.getVehicle('vehicle', 'Bike');
myVehicle.go();

const myElectronic = factory.getVehicle('electronic', 'Phone');
myElectronic.start();