前端設計模式（1）--工廠模式

設計模式清單

沒有連結的是還沒有寫的，計劃要寫的，歡迎閱讀交流~
前端設計模式（0）物件導向&&設計原則
前端設計模式（1）--工廠模式
前端設計模式（2）--單例模式
前端設計模式（3）--介面卡模式
前端設計模式（4）--裝飾器模式
前端設計模式（5）--代理模式
前端設計模式（6）--外觀模式&&觀察者模式
前端設計模式（7）--狀態和策略模式
前端設計模式（8）--原型模式
...

寫在前面

設計模式有23種，按大類歸類的話可以分為三大類：建立型（如：工廠模式、單例模式、原型模式等），結構型模式（如裝飾器模式、代理模式等），行為型（如：觀察者模式、迭代器模式等）；今天我們講的是工廠模式，其分為工廠方法模式、抽象工廠模式、簡單工廠模式，好的，我們一步一步來分析。

簡單工廠模式

來來來，我們從簡單的開始。 簡單工廠模式是由一個工廠物件決定建立出哪一種產品類的例項 類圖： 蘋果和梨都是繼承植物

程式碼：

class Plant {
    constructor (name) {
        this.name = name
    }
    grow () {
        console.log('我有生長的功能哦~~')
    }
}
class Apple extends Plant {
    constructor (name, color) {
        super(name)
        this.color = color
        console.log(this.color)
    }
}
class Pear extends Plant {
    constructor (name, color) {
        super(name)
        this.color = color
        console.log(this.color)
    }
}
new Apple('蘋果', '紅色')
new Pear('梨子', '黃色')



// 經典案例-那些年一起用過的jquery
class jQuery{
    constructor(selector){
        let elements = Array.from(document.querySelectorAll(selector));
        let length = elements?elements.length:0;
        for(let i=0;i<length;i++){
            this[i]=elements[i];
        }
        this.length = length;
    }
    html(){

    }
}
window.$ = function(selector){
   return new jQuery(selector);
}
複製程式碼

簡單工廠的好處在於，我們可以在不動之前原邏輯的基礎上，繼承和擴充新的功能，這樣我們就可以提高效率，之前大神寫好的功能可以複用，而且可以站在巨人的肩膀上，不斷擴充。當然，其實這些你們平時應該都有寫過或者用過，只是現在由一個名詞規範起來，是不是覺得突然高大尚了。 上面程式碼直接new 的缺點是，耦合和依賴於具體的實現。

工廠方法模式

同先上個類圖，需求變了需要新增個橘子：

上程式碼：

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~');    
    }
}
class Apple extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class Orange extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class AppleFactory{
    create() {
        return new Apple('蘋果'，'紅色');
    }
}
class OrangeFactory{
    create() {
        return new Orange('桔子', '橙色');
    }
}
const settings={
    'apple': AppleFactory,
    'orange':OrangeFactory
}
let apple=new settings['apple']().create();
console.log(apple);
let orange=new settings['orange']().create();
console.log(orange);
複製程式碼

這樣寫的好處是我們可以隨意新增不同的水果，我們不用關心如何實現，新增同一個水果類，拿來就用，還有一個好處就是，假如AppleFactory有改動新增新的功能，但是引用的地方很多，我們只需要新增一個AppleFactory，修改不影響老程式碼。 上面的程式碼修改一下，引入類似於java介面概念

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~');    
    }
}
// 新增Factory
class Factory {
    create() { }
}
class Apple extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class Orange extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
// 子類繼承父類 並實現create 方法
class AppleFactory extends Factory{
    static create() {
     return new Apple('蘋果'，'紅色');
    }
}
class OrangeFactory extends Factory{
    static create() {
        return new Orange('桔子', '橙色');
    }
}
// 通過配置檔案來解耦合
const settings={
    'apple': AppleFactory,
    'orange':OrangeFactory
}
let apple=new settings['apple']().create();
console.log(apple);
let orange=new settings['orange']().create();
console.log(orange);
複製程式碼

說明一下類Factory

• 工廠一般是介面，規定子類必須實現的方法
• 依賴抽象，而不依賴實現
• 介面只有方法定義，沒有具體實現,如果一個類要實現該介面，就必須實現該介面中的所有方法

抽象工廠模式

抽象工廠模式是指當有多個抽象角色時，使用的一種工廠模式 抽象工廠模式可以向客戶端提供一個介面，使客戶端在不必指定產品的具體的情況下，建立多個產品族中的產品物件.

為了好展示我們來舉個例子：比如現在用java來寫個軟體要執行在不同系統window、mac等，但是他們的icon和button是不同的

類圖

程式碼

class Factory {
    // 公共的方法是有一定的關聯
    createButton() {//建立按鈕
    }
    createIcon() {// 建立圖示
    }
}
class Icon { }
class AppleIcon {
    render() {
        console.log(`繪製蘋果圖示`)
    }
}
class WindowsIcon {
    render() {
        console.log(`繪製window圖示`)
    }
}
class Button { }
class AppleButton {
    render() {
        console.log(`繪製蘋果按鈕`)
    }
}
class WindowsButton {
    render() {
        console.log(`繪製windows按鈕`)
    }
}
class AppleFactory extends Factory {
    createButton() {//建立按鈕
        return new AppleButton();
    }
    createIcon() {// 建立圖示
        return new AppleIcon();
    }
}
class WindowsFactory extends Factory {
    createButton() {//建立按鈕
        return new WindowsButton();
    }
    createIcon() {// 建立圖示
        return new WindowsIcon();
    }
}
/**
 * Java是跨平臺的
 * 1.畫一個圖示
 * 2.畫一個按鈕
 */
let windowsFactory = new WindowsFactory();
windowsFactory.createIcon().render();
windowsFactory.createButton().render();
//=========================================
let appleFactory = new AppleFactory();
appleFactory.createIcon().render();
appleFactory.createButton().render();
複製程式碼

小結

1. 簡單工廠 一般就是一個函式返回產品的例項 （最常用，使用最多）
2. 工廠方法 多了工廠類，要想建立產品，需要先建立此工廠的例項，再通過此工廠來建立產品。（少用）
3. 在抽象工廠中，一個工廠可以建立多種產品 （基本不用） 看到這裡了，你們的點贊是我動力~~

補充知識點-類圖

• 用於描述系統中的物件類本身的組成和物件類之間的各種靜態關係
• 類之間的關係：依賴、泛化(繼承)、 實現、關聯、聚合和組合 這裡主要講類圖的依賴、泛化(繼承)、

依賴關係(Dependence)

只要在類中用到了對方，那麼它們之間就存在依賴關係，如果沒有對方，連編譯都通過不了， 通俗的說就是 比如 動物 依賴於水和空氣，下面為類圖： 由三部分組成，類的名字、類的屬性、類的方法。 依賴關係由虛線空心箭頭表示

泛化關係(Generalization)

泛化關係實際上就是繼承關係，他就是依賴關係的特例， 泛化關係由實線空心箭頭表示