前端的设计模式有哪些呢

article/2025/10/22 4:52:20

谈谈设计模式~

文章目录

  • 什么是设计模式
  • 设计模式分类
    • 1. 结构型模式
    • 2. 创建型模式
    • 3. 行为型模式
    • 具体使用

什么是设计模式

设计模式,是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式是指一种思想和方法论,先有设计思想,才能写出代码吧。有了设计思想,可以使用不同的编程语言来实现。

设计模式分类

1. 结构型模式

通过识别系统中组件间的简单关系来简化系统的设计

外观模式
代理模式

2. 创建型模式

处理对象的创建,根据实际情况使用合适的方式创建对象。

 工厂模式单例模式

3. 行为型模式

用于识别对象之间常见的交互模式并加以实现

  策略模式迭代器模式观察者模式中介者模式访问者模式

具体使用

先谈谈比较熟悉的模式😁
工厂模式
工厂模式是用来创建对象的一种最常用的设计模式,不暴露创建对象的具体逻辑,而是将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂,工厂模式根据抽象程度的不同可以分为:简单工厂,工厂方法和抽象工厂,接下来,将对简单工厂和工厂方法在JavaScript中的运用举个简单的例子:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
单例模式
定义:是保证一个类只有一个实例,并且提供一个访问它的全局访问点。

需求:一些对象我们往往只需要一个,比如线程池、全局缓存、浏览器中的window对象、登录浮窗等。

实现:用一个变量标识当前是否已经为某个类创建过对象,如果是,则在下一次获取这个类的实例时,直接返回之前创建的对象。


var People = function(name) {this.name = name
}var Singleton = function(Obj) {var instanceSingleton = function() {if (instance) return instancereturn instance = new Obj(arguments)}return Singleton
}var peopleSingleton = Singleton(People)var a = new peopleSingleton('a')
var b = new peopleSingleton('b')
console.log(a===b)

代理模式
代理模式主要是为其他对象提供一种代理以控制对这个对象的访问,主要解决在直接访问对象时带来的问题。

比如说:要访问的对象在远程的机器上,在面向对象系统中,有些对象由于某些原因(比如对象创建开销很大,或者某些操作需要安全控制,或者需要进程外的访问),直接访问会给使用者或者系统结构带来很多麻烦,我们可以在访问此对象时加上一个对此对象的访问层。
观察者模式
如果大家学过一些像vue,react这些框架,相信大家对观察者模式一定很熟悉,现在很多mvvm框架都用到了观察者模式这个思想,观察者模式又叫做发布—订阅模式。

它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知和更新,观察者模式提供了一个订阅模型,其中对象订阅事件并在发生时得到通知,这种模式是事件驱动的编程基石,它有利益于良好的面向对象的设计


http://chatgpt.dhexx.cn/article/q0gw72Wb.shtml

相关文章

【面试】最新web前端经典面试题试题及答案(持续更新)-html/css、js、vue、http、web安全、前端性能、浏览器、js算法

author: aSuncat JavaScript知识点大全:https://www.yuque.com/webfront/js 所有最新最全面试题,持续更新在语雀。见 语雀-前端面试题,欢迎点击关注~ 阅读目录 html/ css:https://blog.csdn.net/aSuncat/article/details/88789368…

为什么说前端一定要学好设计模式?

设计模式(Design Pattern)大家一定不陌生。通俗地讲,它是前辈们对代码开发经验的总结,让你写出可扩展、可读、可维护的高质量代码,还能让你在遇到相似的问题、场景时,快速找到更优的解决方案。 也许你会说&…

前端JS设计模式

什么是设计模式 软件设计模式(Design pattern),又称设计模式,是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。 比…

前端开发中常用的几种设计模式有哪些

设计模式概览 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题&#…

前端需要了解的9种设计模式

前端需要了解的9种设计模式 什么是设计模式? 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是…

前端设计模式

作为一个前端新人,学习了设计模式以后,希望能从源头上,用浅显易懂的语言来解释它。当然不一定是正确的,只是我个人对设计模式的一点浅显理解。 创建型设计模式 创建型设计模式:故名思意,这些模式都是用来创…

web前端设计模式

文章目录 浅谈设计模式1.设计模式是什么2.为什么要学设计模式3.SOLID设计原则4.设计模式的核心思想—封装变化5.23种常见设计模式 创建型一、工厂模式(Factory Pattern)简单工厂1.解决的问题:2.构造器3.使用步骤4.举例 抽象工厂 (…

前端常用的8种设计模式

文章目录 1.引入2.单例模式3.装饰器模式3.适配器模式4.观察者模式(发布订阅模式)5.策略模式6.模板模式7.代理模式8.外观模式9.面试点 1.引入 简介: 设计模式代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计…

前端JavaScript中常见设计模式

1、为啥会有这一篇 ? 前两天有个同学问我,然后组内同学也即将分享相关实践内容,此处 在他之前发出(早一天发布的发布会),good! 2、是何物? 组件化是前端非常重要的一块内容,现在流…

你必须要会的4种Web前端设计模式

在软件工程领域,设计模式是为了解决特定问题而产生的一些可复用的方法、模板。每一种设计模式都针对性解决某一类场景的问题。设计模式被认为是开发者解决通用问题的最佳实践。 通常我们学习的设计模式,大多数与面向对象的语言相关,比如Java。…

前端开发中常用的几种设计模式

设计模式概览 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题&#…

图像金字塔原理

一、图像缩小 先高斯模糊,再降采样,需要一次次重复,不能一次到底 二、图像扩大 先扩大,再卷积或者使用拉普拉斯金字塔 三、金字塔类型 1、高斯金字塔 用于下采样。 高斯金字塔是最基本的图像塔。 原理:首先将原图…

【编程】金字塔图案

1.问题描述 打印出金字塔图案,如图1.1所示。 图1-1 2.问题分析 这个问题是一个很经典的循环应用的题目。我们都知道,打印输出的时候,都是从最左端输出,而这里,第一个星号是在中间。这实际是…

计算机视觉-OpenCV图像金字塔

😊😊😊欢迎来到本博客😊😊😊 本次博客内容将继续讲解关于OpenCV的相关知识 🎉作者简介:⭐️⭐️⭐️目前计算机研究生在读。主要研究方向是人工智能和群智能算法方向。目前熟悉pytho…

图像金字塔(image pyramid) 分为两种:高斯金字塔  和  拉普拉斯金字塔。

高斯金字塔 高斯金字塔模仿的是图像的不同的尺度,尺度应该怎样理解?对于一副图像,你近距离观察图像,与你在一米之外观察,看到的图像效果是不同的,前者比较清晰,后者比较模糊,前者比…

数字图像处理:图像金字塔

转载请标明出处:数字图像处理:图像金字塔_数字图像处理opencv_新浪博客 (一)概念 以多个分辨率来表示图像的一种有效且概念简单的结构是图像金字塔。图像金字塔最初用于机器视觉和图像压缩,一个图像金字塔是一系列以金…

图像处理-图像金字塔

图像金字塔(image pyramid),一般有两种:高斯金字塔、拉普拉斯金字塔 ——————————————————————————————— 先介绍下里面的一些操作: 下采样:相当于对图像进行一个像素的抽取&a…

10.图像金字塔

图像金字塔:主要是指一种算法思想 一般情况下,我们要处理是一副具有固定分辨率的图像。但是有些情况下,我们雪要对同一图像的不同分辨率的子图像进行处理。比如,我们要在一幅图像中查找某个目标,比如险,我们…

图像金字塔:概念及实现

文章目录 图像金字塔:概念和实现1. 图像金字塔的概念2. 图像金字塔的实现方式3. 基于OpenCV的图像金字塔实现参考资料 图像金字塔:概念和实现 首先补充一下分辨率的概念:图像分辨率指图像中存储的信息量,是每英寸图像内有多少个像…

图像金字塔的简单理解

图像金字塔模型: Level层定义的是图片的分辨率,图像金字塔的塔底到塔顶表示的是图片的缩小过程。也就是说从第Level0层开始是原图,越往上越压缩,丢失的信息越多。 图像金字塔的测试: 图片: halcon代码&am…