前端設計模式——工廠模式

前端中的工廠模式是一種創建對象的設計模式，它可以讓我們封裝創建對象的細節，我們使用工廠方法而不是直接調用 new 關鍵字來創建對象，使得代碼更加清晰、簡潔和易於維護。在前端開發中，工廠模式通常用於創建多個相似但稍有不同的對象，比如創建一系列具有相同樣式和行為的按鈕或者表單。

在實現工廠模式時，通常需要創建一個工廠函數（或者叫做工廠類），該函數可以接受一些參數，並根據這些參數來創建對象。例如，我們可以創建一個ButtonFactory函數，它接受一個type參數，用於指定按鈕的類型，然後根據type參數創建不同類型的按鈕對象。示例代碼如下：

function ButtonFactory(type) {
    switch (type) {
        case 'primary':
            return new PrimaryButton();
        case 'secondary':
            return new SecondaryButton();
        case 'link':
            return new LinkButton();
        default:
            throw new Error('Unknown button type: ' + type);
    }
}

function PrimaryButton() {
    this.type = 'primary';
    this.text = 'Click me!';
    this.onClick = function() {
        console.log('Primary button clicked!');
    };
}

function SecondaryButton() {
    this.type = 'secondary';
    this.text = 'Click me too!';
    this.onClick = function() {
        console.log('Secondary button clicked!');
    };
}

function LinkButton() {
    this.type = 'link';
    this.text = 'Click me as well!';
    this.onClick = function() {
        console.log('Link button clicked!');
    };
}            

在上面的示例中，ButtonFactory函數接受一個type參數，根據這個參數來創建不同類型的按鈕對象。例如，如果type為'primary'，則返回一個PrimaryButton對象，該對象具有type、text和onClick屬性，表示一個主要按鈕。其他類型的按鈕也類似。

使用工廠模式可以讓我們將對象創建的過程與具體的業務邏輯分離開來，從而提高代碼的可重用性和可維護性。