《JavaScript設計模式》閱讀筆記_part2

Bonny發表於2019-02-16
JavaScript設計模式筆記

JavaScript設計模式閱讀

更多文章檢視本專欄

設計模式第一篇：建立型設計模式

1、簡單工廠模式

簡單工廠模式：又叫靜態工廠方法，有一個工廠物件決定建立某一種產品物件類的例項。主要用於建立同一類物件。

根據現有的需求選擇不同的東西。

// 簡單的工廠模式
var redBall = function () {
    console.log(`redBall`)
};
var greenBall = function () {
    console.log(`greenBall`)
};
var blackBall = function () {
    console.log(`blackBall`)
};
var blueBall = function () {
    console.log(`blueBall`)
};

//工廠函式
var ballFactory = function (type) {
    switch (type) {
        case `red`:
            return new redBall();
            break;
        case `green`:
            return new greenBall();
            break;
        case `black`:
            return new blackBall();
            break;
        case `blue`:
            return new blueBall();
            break;

    }
}

通過一個工廠產生多個同類的，或者有相同屬性但是也存在差異的產品。

function createBook(name,time,type) {
    var t = new Object();
    t.name = name;
    t.time = time;
    t.type = type;
    return t;
}

function createBall(type,text) {
    var t = new Object();
    t.content = text;
    t.show = function () {
        // do something
    }
    switch (type) {
        case `red`:
            // different Part
            break;
        case `green`:
            // different Part
            break;
        case `black`:
            // different Part
            break;
        case `blue`:
            // different Part
            break;
    }
}

和類的區別：類是將初始的東西給你，然後你自己去對相應的需求進行新增例項方法。而工廠是根據你需要的方法直接生成好給你。好處，如果有大量相同的含有特殊功能的例項存在，可以通過簡單工廠增加複用性。

核心：根據情況的不同選擇不同的情況進行處理，像是一個封裝型的`if else`。

2、工廠方法模式

工廠方法模式：又稱為工廠模式，也叫虛擬構造器模式或者多型工廠模式。

它屬於類建立型模式。通過對產品類的抽象使其建立業務，只要負責用於建立多類的例項。
將實際建立物件的工作推遲到了子類當中。

//  類的安全模式
var Factory = function (type, content) {
    if(this instanceof  Factory){
        return new this[type](content);
    }else{
        return new Factory(type, content);
    }
};
//  建立不同型別基類的實現
Factory.prototype={
    Java:function (content) {
        this.content = content;
    },
    PHP:function (content) {
        this.content = content;
    },
    Python:function (content) {
        this.content = content;
    },
    JavaScript:function (content) {
        this.content = content;
    },
}

3、抽象工廠模式

通過對類的工廠抽象使其業務用於對產品類簇的建立，而不負責建立某一類產品的例項。

用於產生類簇。

建立一個類，類裡面擁有許多抽象的類，抽象的類定義了同類的類的結構。在使用的時候將抽象的類進行繼承。

/**
 * 實現subType類對工廠類中的superType型別的抽象類的繼承
 * @param subType 要繼承的類
 * @param superType 工廠類中的抽象類type
 */
const VehicleFactory = function(subType, superType) {
    if (typeof VehicleFactory[superType] === `function`) {
        function F() {
            this.type = `車輛`
        }
        F.prototype = new VehicleFactory[superType]()
        subType.constructor = subType
        subType.prototype = new F()                // 因為子類subType不僅需要繼承superType對應的類的原型方法，還要繼承其物件屬性
    } else throw new Error(`不存在該抽象類`)
}

VehicleFactory.Car = function() {
    this.type = `car`
}
VehicleFactory.Car.prototype = {
    getPrice: function() {
        return new Error(`抽象方法不可使用`)
    },
    getSpeed: function() {
        return new Error(`抽象方法不可使用`)
    }
}

const BMW = function(price, speed) {
    this.price = price
    this.speed = speed
}
VehicleFactory(BMW, `Car`)        // 繼承Car抽象類
BMW.prototype.getPrice = function() {        // 覆寫getPrice方法
    console.log(`BWM price is ${this.price}`)
}
BMW.prototype.getSpeed = function() {
    console.log(`BWM speed is ${this.speed}`)
}

const baomai5 = new BMW(30, 99)
// baomai5.getPrice()                          // BWM price is 30
// baomai5 instanceof VehicleFactory.Car       // true

4、建造者模式

將一個複雜物件的構建層與其表示層相互分離，同樣的構造過程可採用不同的表示。

關注產生過程，將物件的建立分為模組化建立，自定義度變高。

建造一個電腦：

//  構建基本主體
const basicComputer = function () {

}
basicComputer.prototype = {
    //  自定義的一些原型方法
}
//  構建CPU模組
const cpu = function (type) {
    this.type = type;
}
cpu.prototype = {
    //  自定義的一些原型方法
}
//  構建顯示卡模組
const graphicsCard  = function (type) {
    this.type = type;
}
graphicsCard.prototype = {
    //  自定義的一些原型方法
}
//  構建螢幕模組
const screen = function (type) {
    this.type = type;
}
screen.prototype = {
    //  自定義的一些原型方法
}

const computer = function () {
    const t = new basicComputer();
    t.cpu = new cpu();
    t.graphicsCard = new graphicsCard();
    t.screen = new screen();
    return t;
}

5、原型模式

用原型例項指向建立物件的類，使用與建立新的物件的類共享原型物件的型別以及方法。

基於繼承，將複雜的放置在函式中，簡單的共同的放置到一個建構函式中。

在使用的時候可以對原型進行擴充。

程式碼與繼承類似，但是核心就是將簡單的共有的放置到建構函式中，與類的思想類似。

6、單例模式

只允許例項化一次的類。在使用的時候可以用於建立程式碼庫，建立名稱空間。

單例模式實現程式碼庫，產生名稱空間，一次只能例項化一個。

//  一個名稱空間
const A = {
    fun_1: {
        fun_1_1:function () {
            //  do something
        },
    },
    fun_2: {
        //  do something

    },
    fun_3:function () {
        //  do something

    }
}
//  空間類可為一個程式碼塊，也可以為更多一層次的程式碼庫（名稱空間）

相關文章