设计模式是任何优秀软件的基础，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 cartruck.say(); // I am a truckbike.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 设计模式
复制代码
总结
以上只是一些设计模式的简单实例，对其有个初步的理解，在开发过程中可以尝试使用上面实例的方式编写代码，对提高编码质量是有一定帮助的。
评论