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中设计模式是什么”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!