JavaScript中設計模式是什么

這篇文章主要介紹了JavaScript中設計模式是什么，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

設計模式是任何優秀軟件的基礎，JavaScript 也不例外，學習設計模式，對代碼組織多一些思路，通過代碼片段來學習編碼思路對于開發者來說是比較容易理解的，本文繼續通過代碼片段簡單展示常見的設計模式，但不深入設計模式本身。

構造函數模式

構造函數（Constructor Pattern）作為初始化具有特定屬性和方法的對象的函數。構造器模式類似于該定義。我們使用這種模式來創建同一對象的多個實例。

function Article(title, author) {
    this.title = title;
    this.author = author;
    this.showTitle = () => console.log(this.title);
}
const article = new Article("JavaScript 設計模式", "devpoint");
article.showTitle();

原型模式

原型模式（Prototype Pattern）：使用原型實例指定創建對象的種類，并且通過拷貝這些原型創建新的對象，原型模式是一種對象創建型模式，通過從原型克隆對象來創建對象的新實例。

如果發現直接構造一個新對象很復雜且效率低下，那么原型模式非常適合這種情況。

function Article(title, author) {
    this.title = title;
    this.author = author;
    this.showTitle = () => console.log(this.title);
}
Article.prototype.showAuthor = function () {
    console.log(this.author);
};
const article = new Article("JavaScript 設計模式", "devpoint");
article.showAuthor();

工廠模式

工廠模式（Factory Pattern）的主要思想是將對象的創建與對象的實現分離，開發過程中可能在不知道它的情況下就使用了它的模式。在 JavaScript 中，它將對象創建與代碼的其余部分分開，封裝創建代碼，公開 API 以生成不同的對象。

const Vehicle = function () {};
const Car = function () {
    this.say = function () {
        console.log("I am a car");
    };
};
const Truck = function () {
    this.say = function () {
        console.log("I am a truck");
    };
};
const Bike = function () {
    this.say = function () {
        console.log("I am a bike");
    };
};
const VehicleFactory = function () {
    this.createVehicle = (vehicleType) => {
        let vehicle;
        switch (vehicleType) {
            case "car":
                vehicle = new Car();
                break;
            case "truck":
                vehicle = new Truck();
                break;
            case "bike":
                vehicle = new Bike();
                break;
            default:
                vehicle = new Vehicle();
        }
 
        return vehicle;
    };
};
const vehicleFactory = new VehicleFactory();
const car = vehicleFactory.createVehicle("car");
const truck = vehicleFactory.createVehicle("truck");
const bike = vehicleFactory.createVehicle("bike");
car.say(); // I am a car
truck.say(); // I am a truck
bike.say(); // I am a bike

命令模式

命令模式（Command Pattern）的主要目的是將動作或操作封裝為對象。

假設需要為電子商務構建支付系統，根據所選的付款方式，將需要處理特定的流程。

if (selectedPayment == "creditcard") {
    // 處理信用卡支付
}

一些付款方式只需要處理一個步驟，但其他方式可能不止一個步驟。通過使用上面的示例代碼，提供的是實現，而不是接口，這會導致緊密耦合。

命令模式是提供松散耦合的一個很好的解決方案。系統不應了解有關每種特定付款方式處理的太多信息。為了實現這一點，該模式將請求操作的代碼與執行實際實現的代碼分開。

function Command(operation) {
    this.operation = operation;
}
Command.prototype.execute = function () {
    this.operation.execute();
};
function CreditCardPayment() {
    return {
        execute: function () {
            console.log("信用卡");
        },
    };
}
function WechatPayment() {
    return {
        execute: function () {
            console.log("微信支付");
        },
    };
}
function AliPayment() {
    return {
        execute: function () {
            console.log("支付寶");
        },
    };
}
function CreditCardCommand() {
    return new Command(new CreditCardPayment());
}
function WechatPalCommand() {
    return new Command(new WechatPayment());
}
function AliPayCommand() {
    return new Command(new AliPayment());
}
function PaymentHelper() {
    let paymentCommand;
 
    return {
        setPaymentCommand: function (command) {
            paymentCommand = command;
        },
        executeCommand: function () {
            paymentCommand.execute();
        },
    };
}
function run() {
    const paymentHelper = new PaymentHelper();
    paymentHelper.setPaymentCommand(new CreditCardCommand());
    paymentHelper.executeCommand();
    paymentHelper.setPaymentCommand(new WechatPalCommand());
    paymentHelper.executeCommand();
    paymentHelper.setPaymentCommand(new AliPayCommand());
    paymentHelper.executeCommand();
}
run();

觀察者模式

觀察者模式（Observer Pattern）又叫發布訂閱模式（Publish/Subscribe），它定義了一種一對多的關系，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生變化時就會通知所有的觀察者對象，使得它們能夠自動更新自己。

function Newsletter() {
    this.observers = [];
}
Newsletter.prototype = {
    subscribe: function (observer) {
        this.observers.push(observer);
    },
    unsubscribe: function (observer) {
        this.observers = this.observers.filter((ob) => ob !== observer);
    },
    notify: function () {
        this.observers.forEach((observer) =>
            console.log("你好！" + observer.toString())
        );
    },
};
const subscriber1 = "訂閱者 1";
const subscriber2 = "訂閱者 2";
const newsletter = new Newsletter();
newsletter.subscribe(subscriber1);
newsletter.subscribe(subscriber2);
newsletter.notify(); // 輸出：你好！訂閱者 1 ； 你好！訂閱者 2
 
newsletter.unsubscribe(subscriber2);
newsletter.notify(); // 你好！訂閱者 1

單體模式

單體模式（Singleton Pattern）是 JavaScript 中最基本但又最實用的模式之一，比其他任何模式都更常用。這種模式提供了一種將代碼組織為一個邏輯單元的方法，可用于減少全局變量的數量。

const utils = (function () {
    let instance;
 
    function initialize() {
        return {
            sum: function (a, b) {
                return a + b;
            },
        };
    }
    return {
        getInstance: function () {
            if (!instance) {
                instance = initialize();
            }
            return instance;
        },
    };
})();
const sum = utils.getInstance().sum(1, 2);
console.log(sum); // 3

單體模式主要的好處在于它對代碼組織作用，把相關的方法和屬性組織在一個不會被多次實例化的單體中，使代碼的調試和維護變得輕松，但會導致模塊間的強耦合。

模塊模式

模塊模式（Module Pattern）也可以說是單體模式的一種，該模式是用于實現軟件模塊概念的設計模式，可以將模塊內的函數、變量和屬性設為公共或私有成員。

const articleModule = (function () {
    // 私有
    const title = "JavaScript 設計模式";
    // 公共
    return {
        printTitle: function () {
            console.log(title);
        },
    };
})();
articleModule.printTitle(); // JavaScript 設計模式

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript中設計模式是什么”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!