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 设计模式

总结

以上只是一些设计模式的简单实例,对其有个初步的理解,在开发过程中可以尝试使用上面实例的方式编写代码,对提高编码质量是有一定帮助的。