团购网站管理系统,李守洪排名大师怎么样,网络营销专业背景,wordpress模板中文版大家好#xff01;在本文中#xff0c;我将解释什么是设计模式以及它们为何有用。 目录 什么是设计模式#xff1f; 创意设计模式 单例模式 工厂方法模式 抽象工厂模式 建造者模式 原型模式 结构设计模式 适配器模式 装饰模式 立面图案 代理模式 行为设计模式 责任链模式 迭…大家好在本文中我将解释什么是设计模式以及它们为何有用。 目录 什么是设计模式 创意设计模式 单例模式 工厂方法模式 抽象工厂模式 建造者模式 原型模式 结构设计模式 适配器模式 装饰模式 立面图案 代理模式 行为设计模式 责任链模式 迭代器模式 观察者模式 什么是设计模式
设计模式因《设计模式可重用面向对象软件的元素》一书而流行起来该书由四位 C 工程师于 1994 年出版。
本书探讨了面向对象编程的功能和陷阱并描述了 23 种有用的模式您可以实现这些模式来解决常见的编程问题。
这些模式不是算法或特定的实现。它们更像是想法、观点和抽象概念在某些情况下可用于解决特定类型的问题。
模式的具体实现可能会根据许多不同的因素而有所不同。但重要的是它们背后的概念以及它们如何帮助我们为我们的问题找到更好的解决方案。
话虽这么说请记住这些模式是在考虑 OOP C 编程的情况下想到的。当涉及更现代的语言如 JavaScript 或其他编程范例时这些模式可能不会同样有用甚至可能会向我们的代码添加不必要的样板文件。
尽管如此我认为了解它们作为一般编程知识还是有好处的。
旁注如果您不熟悉编程范例或OOP我最近写了两篇关于这些主题的文章。
无论如何...现在我们已经完成了介绍设计模式分为三个主要类别创建模式、结构模式和行为模式。让我们简要探讨一下它们。
创意设计模式
创建模式由用于创建对象的不同机制组成。
单例模式
Singleton是一种设计模式可确保一个类只有一个不可变的实例。简单地说单例模式由一个无法复制或修改的对象组成。当我们想要为我们的应用程序提供一些不可变的单点事实时它通常很有用。
举例来说我们希望将应用程序的所有配置都放在一个对象中。我们希望禁止对该对象进行任何复制或修改。
实现此模式的两种方法是使用对象文字和类 const Config {start: () console.log(App has started),update: () console.log(App has updated),}// We freeze the object to prevent new properties being added and existing properties being modified or removedObject.freeze(Config)Config.start() // App has startedConfig.update() // App has updatedConfig.name Robert // We try to add a new keyconsole.log(Config) // And verify it doesnt work: { start: [Function: start], update: [Function: update] }
使用对象字面量 class Config {constructor() {}start(){ console.log(App has started) } update(){ console.log(App has updated) }}const instance new Config()Object.freeze(instance)
使用类 工厂方法模式
工厂方法模式提供了一个用于创建对象的接口这些对象在创建后可以进行修改。最酷的一点是创建对象的逻辑集中在一个地方从而简化并更好地组织我们的代码。
这种模式被大量使用也可以通过两种不同的方式实现通过类或工厂函数返回对象的函数。 class Alien {constructor (name, phrase) {this.name name this.phrase phrase this.species alien}fly () console.log(Zzzzzziiiiiinnnnnggggg!!)sayPhrase () console.log(this.phrase)}const alien1 new Alien(Ali, Im Ali the alien!)console.log(alien1.name) // output: Ali
使用类
function Alien(name, phrase) {this.name name this.phrase phrase this.species alien}Alien.prototype.fly () console.log(Zzzzzziiiiiinnnnnggggg!!)Alien.prototype.sayPhrase () console.log(this.phrase)const alien1 new Alien(Ali, Im Ali the alien!)console.log(alien1.name) // output Aliconsole.log(alien1.phrase) // output Im Ali the alien!alien1.fly() // output Zzzzzziiiiiinnnnnggggg
使用工厂函数 抽象工厂模式
抽象工厂模式允许我们在不指定具体类的情况下生成相关对象系列。当我们需要创建仅共享某些属性和方法的对象时它非常有用。
它的工作方式是通过呈现一个与客户端交互的抽象工厂。该抽象工厂根据相应的逻辑调用相应的具体工厂。该具体工厂就是返回最终对象的工厂。
基本上它只是在工厂方法模式上添加了一个抽象层以便我们可以创建许多不同类型的对象但仍然与单个工厂函数或类交互。
让我们通过一个例子来看看。假设我们正在为一家汽车公司建模一个系统该公司当然生产汽车但也生产摩托车和卡车。
// We have a class or concrete factory for each vehicle typeclass Car {constructor () {this.name Carthis.wheels 4}turnOn () console.log(Chacabúm!!)}class Truck {constructor () {this.name Truckthis.wheels 8}turnOn () console.log(RRRRRRRRUUUUUUUUUMMMMMMMMMM!!)}class Motorcycle {constructor () {this.name Motorcyclethis.wheels 2}turnOn () console.log(sssssssssssssssssssssssssssssshhhhhhhhhhham!!)}// And and abstract factory that works as a single point of interaction for our clients// Given the type parameter it receives, it will call the corresponding concrete factoryconst vehicleFactory {createVehicle: function (type) {switch (type) {case car:return new Car()case truck:return new Truck()case motorcycle:return new Motorcycle()default:return null}}}const car vehicleFactory.createVehicle(car) // Car { turnOn: [Function: turnOn], name: Car, wheels: 4 }const truck vehicleFactory.createVehicle(truck) // Truck { turnOn: [Function: turnOn], name: Truck, wheels: 8 }const motorcycle vehicleFactory.createVehicle(motorcycle) // Motorcycle { turnOn: [Function: turnOn], name: Motorcycle, wheels: 2 }
建造者模式
Builder模式用于按“步骤”创建对象。通常我们会有函数或方法向我们的对象添加某些属性或方法。
这种模式最酷的一点是我们将属性和方法的创建分离到不同的实体中。
如果我们有一个类或工厂函数我们实例化的对象将始终具有该类/工厂中声明的所有属性和方法。但是使用构建器模式我们可以创建一个对象并仅应用我们需要的“步骤”这是一种更灵活的方法。
这与对象组合有关这是我在这里讨论的主题。
// We declare our objectsconst bug1 {name: Buggy McFly,phrase: Your debugger doesnt work with me!}const bug2 {name: Martiniano Buggland,phrase: Cant touch this! Na na na na...}// These functions take an object as parameter and add a method to themconst addFlyingAbility obj {obj.fly () console.log(Now ${obj.name} can fly!)}const addSpeechAbility obj {obj.saySmthg () console.log(${obj.name} walks the walk and talks the talk!)}// Finally we call the builder functions passing the objects as parametersaddFlyingAbility(bug1)bug1.fly() // output: Now Buggy McFly can fly!addSpeechAbility(bug2)bug2.saySmthg() // output: Martiniano Buggland walks the walk and talks the talk!
原型模式
原型模式允许您使用另一个对象作为蓝图来创建一个对象并继承其属性和方法。
如果您使用 JavaScript 一段时间您可能熟悉原型继承以及 JavaScript 的工作原理。
最终结果与我们使用类获得的结果非常相似但具有更多的灵活性因为属性和方法可以在对象之间共享而不依赖于同一个类。
// We declare our prototype object with two methodsconst enemy {attack: () console.log(Pim Pam Pum!),flyAway: () console.log(Flyyyy like an eagle!)}// We declare another object that will inherit from our prototypeconst bug1 {name: Buggy McFly,phrase: Your debugger doesnt work with me!}// With setPrototypeOf we set the prototype of our objectObject.setPrototypeOf(bug1, enemy)// With getPrototypeOf we read the prototype and confirm the previous has workedconsole.log(Object.getPrototypeOf(bug1)) // { attack: [Function: attack], flyAway: [Function: flyAway] }console.log(bug1.phrase) // Your debugger doesnt work with me!console.log(bug1.attack()) // Pim Pam Pum!console.log(bug1.flyAway()) // Flyyyy like an eagle!
结构设计模式
结构模式是指如何将对象和类组装成更大的结构。
适配器模式
适配器允许两个具有不兼容 接口的对象相互交互。
例如假设您的应用程序查询一个返回XML 的API 并将该信息发送到另一个 API 来处理该信息。但处理 API 需要JSON。由于两个接口不兼容因此您无法发送收到的信息。你需要先适应它。
我们可以用一个更简单的例子来形象化相同的概念。假设我们有一系列城市和一个返回这些城市拥有的最大居民数量的函数。我们数组中的居民数量以百万为单位但我们要添加一个新城市其居民没有百万转换
// Our array of citiesconst citiesHabitantsInMillions [{ city: London, habitants: 8.9 },{ city: Rome, habitants: 2.8 },{ city: New york, habitants: 8.8 },{ city: Paris, habitants: 2.1 },] // The new city we want to addconst BuenosAires {city: Buenos Aires,habitants: 3100000}// Our adapter function takes our city and converts the habitants property to the same format all the other cities haveconst toMillionsAdapter city { city.habitants parseFloat((city.habitants/1000000).toFixed(1)) }toMillionsAdapter(BuenosAires)// We add the new city to the arraycitiesHabitantsInMillions.push(BuenosAires)// And this function returns the largest habitants numberconst MostHabitantsInMillions () {return Math.max(...citiesHabitantsInMillions.map(city city.habitants))}console.log(MostHabitantsInMillions()) // 8.9
装饰模式
装饰器模式允许您通过将新行为放置在包含行为的包装对象内来将新行为附加到对象上。如果您对 React 和高阶组件 (HOC) 有一定的了解这种方法可能会让您感到熟悉。
从技术上讲React 中的组件是函数而不是对象。但是如果我们考虑一下 React Context 或Memo的方式我们可以看到我们将一个组件作为子组件传递给这个 HOC并且由于这个子组件能够访问某些功能。
在此示例中我们可以看到 ContextProvider 组件正在接收子项作为 props
import { useState } from reactimport Context from ./Contextconst ContextProvider: React.FC ({children}) {const [darkModeOn, setDarkModeOn] useState(true)const [englishLanguage, setEnglishLanguage] useState(true)return (Context.Provider value{{darkModeOn,setDarkModeOn,englishLanguage,setEnglishLanguage}} {children}/Context.Provider)}export default ContextProvider
然后我们将整个应用程序围绕它
export default function App() {return (ContextProviderRouterErrorBoundarySuspense fallback{/}Header //SuspenseRoutesRoute path/ element{Suspense fallback{/}AboutPage //Suspense}/Route path/projects element{Suspense fallback{/}ProjectsPage //Suspense}/Route path/projects/helpr element{Suspense fallback{/}HelprProject //Suspense}/Route path/projects/myWebsite element{Suspense fallback{/}MyWebsiteProject //Suspense}/Route path/projects/mixr element{Suspense fallback{/}MixrProject //Suspense}/Route path/projects/shortr element{Suspense fallback{/}ShortrProject //Suspense}/Route path/curriculum element{Suspense fallback{/}CurriculumPage //Suspense}/Route path/blog element{Suspense fallback{/}BlogPage //Suspense}/Route path/contact element{Suspense fallback{/}ContactPage //Suspense}//Routes/ErrorBoundary/Router/ContextProvider)}
之后使用该useContext钩子我可以从应用程序中的任何组件访问上下文中定义的状态。
const AboutPage: React.FC () {const { darkModeOn, englishLanguage } useContext(Context)return (...)}export default AboutPage
同样这可能不是本书作者在撰写此模式时所想到的确切实现但我相信想法是相同的。将一个对象放置在另一个对象中以便它可以访问某些功能。;)
立面图案
外观模式为库、框架或任何其他复杂的类集提供了简化的接口。
嗯……我们可能可以为此举出很多例子对吗我的意思是React 本身或任何无数的库几乎用于与软件开发相关的任何内容。特别是当我们考虑声明式编程时一切都是为了提供抽象从而隐藏开发人员眼中的复杂性。
一个简单的例子就是 JavaScript 的map、sort、reduce和filter函数它们的工作原理就像for底层的良好循环一样。
另一个例子可以是当今用于 UI 开发的任何库例如MUI。正如我们在下面的示例中看到的这些库为我们提供了带有内置特性和功能的组件可以帮助我们更快、更轻松地构建代码。
但所有这些在编译后都会变成简单的 HTML 元素这是浏览器唯一能理解的东西。这些组件只是抽象概念旨在让我们的生活更轻松。 import * as React from react;import Table from mui/material/Table;import TableBody from mui/material/TableBody;import TableCell from mui/material/TableCell;import TableContainer from mui/material/TableContainer;import TableHead from mui/material/TableHead;import TableRow from mui/material/TableRow;import Paper from mui/material/Paper;function createData(name: string,calories: number,fat: number,carbs: number,protein: number,) {return { name, calories, fat, carbs, protein };}const rows [createData(Frozen yoghurt, 159, 6.0, 24, 4.0),createData(Ice cream sandwich, 237, 9.0, 37, 4.3),createData(Eclair, 262, 16.0, 24, 6.0),createData(Cupcake, 305, 3.7, 67, 4.3),createData(Gingerbread, 356, 16.0, 49, 3.9),];export default function BasicTable() {return (TableContainer component{Paper}Table sx{{ minWidth: 650 }} aria-labelsimple tableTableHeadTableRowTableCellDessert (100g serving)/TableCellTableCell alignrightCalories/TableCellTableCell alignrightFatnbsp;(g)/TableCellTableCell alignrightCarbsnbsp;(g)/TableCellTableCell alignrightProteinnbsp;(g)/TableCell/TableRow/TableHeadTableBody{rows.map((row) (TableRowkey{row.name}sx{{ :last-child td, :last-child th: { border: 0 } }}TableCell componentth scoperow{row.name}/TableCellTableCell alignright{row.calories}/TableCellTableCell alignright{row.fat}/TableCellTableCell alignright{row.carbs}/TableCellTableCell alignright{row.protein}/TableCell/TableRow))}/TableBody/Table/TableContainer);}
代理模式
代理模式为另一个对象提供替代或占位符。这个想法是控制对原始对象的访问在请求到达实际原始对象之前或之后执行某种操作。
再说一遍如果您熟悉ExpressJS这可能会让您感到熟悉。Express是一个用于开发NodeJS API的框架它的特点之一就是使用中间件。中间件只不过是我们可以在任何请求到达端点之前、中间或之后执行的代码片段。
让我们看一个例子。这里我有一个验证身份验证令牌的函数。不要太关注它是如何做到这一点的。只需知道它接收令牌作为参数一旦完成它就会调用该next()函数。
const jwt require(jsonwebtoken)module.exports function authenticateToken(req, res, next) {const authHeader req.headers[authorization]const token authHeader authHeader.split( )[1]if (token null) return res.status(401).send(JSON.stringify(No access token provided))jwt.verify(token, process.env.TOKEN_SECRET, (err, user) {if (err) return res.status(403).send(JSON.stringify(Wrong token provided))req.user user next()})}
该函数是一个中间件我们可以通过以下方式在 API 的任何端点中使用它。我们只需将中间件放置在端点地址之后和端点函数声明之前
router.get(/:jobRecordId, authenticateToken, async (req, res) {try {const job await JobRecord.findOne({_id: req.params.jobRecordId})res.status(200).send(job)} catch (err) {res.status(500).json(err)}})
这样如果没有提供token或者提供了错误的token中间件将返回相应的错误响应。如果提供了有效的令牌中间件将调用该next()函数接下来将执行端点函数。
我们可以在端点本身中编写相同的代码并验证其中的令牌而不必担心中间件或任何东西。但问题是现在我们有了一个可以在许多不同端点中重用的抽象。
再说一次这可能不是作者想要的确切想法但我相信这是一个有效的例子。我们控制对象的访问以便我们可以在特定时刻执行操作。
行为设计模式
行为模式控制不同对象之间的通信和职责分配。
责任链模式
责任链沿着处理程序链传递请求。每个处理程序决定要么处理请求要么将其传递给链中的下一个处理程序。
对于此模式我们可以使用与之前相同的示例因为 Express 中的中间件在某种程度上是处理请求或将其传递给下一个处理程序的处理程序。
如果您想要另一个示例请考虑您有某些信息需要通过多个步骤进行处理的任何系统。在每个步骤中不同的实体负责执行操作并且只有满足特定条件时信息才会传递给另一个实体。
一个使用 API 的典型前端应用程序可以作为示例 我们有一个负责渲染 UI 组件的函数。 渲染后另一个函数会向 API 端点发出请求。 如果端点响应符合预期则信息将传递到另一个函数该函数以给定方式对数据进行排序并将其存储在变量中。 一旦该变量存储了所需的信息另一个函数就会负责将其呈现在 UI 中。
我们可以看到这里有许多不同的实体如何协作执行某个任务。他们每个人都负责该任务的一个“步骤”这有助于代码模块化和关注点分离。
迭代器模式
迭代器用于遍历集合中的元素。对于当今使用的编程语言来说这听起来可能微不足道但情况并非总是如此。
for不管怎样我们可以用来迭代数据结构 、forEach、for...of、for...in、map、reduce、filter等的任何 JavaScript 内置函数都是迭代器模式的示例。
与我们编写的任何遍历算法一样可以迭代更复杂的数据结构例如树或图。
观察者模式
观察者模式允许您定义订阅机制来通知多个对象有关它们正在观察的对象所发生的任何事件。基本上这就像在给定对象上有一个事件侦听器当该对象执行我们正在侦听的操作时我们会执行某些操作。
React 的 useEffect 钩子可能是一个很好的例子。useEffect 的作用是在我们声明的那一刻执行给定的函数。
该钩子分为两个主要部分可执行函数和依赖项数组。如果数组为空如下例所示则每次渲染组件时都会执行该函数。 useEffect(() { console.log(The component has rendered) }, [])
如果我们在依赖数组中声明任何变量则仅当这些变量发生更改时该函数才会执行。 useEffect(() { console.log(var1 has changed) }, [var1])
即使是普通的旧式 JavaScript 事件监听器也可以被视为观察者。此外响应式编程和像RxJS这样的库用于处理系统中的异步信息和事件也是这种模式的很好的例子。
