前端设计模式应应用场景

news2024/12/23 18:22:31

前端设计模式应应用场景

  • 创建型模式(Creational Patterns)
    • 工厂模式
    • 单例模式
    • 原型模式
  • 行为型模式(Behavioral Patterns)
    • 策略模式
    • 观察者模式/发布订阅模式
    • 迭代器模式
    • 状态模式
  • 结构型模式(Structural Patterns)
    • 装饰器模式
    • 代理模式

创建型模式(Creational Patterns)

处理对象的创建,根据实际情况使用合适的方式创建对象。常规的对象创建方式可能会导致设计上的问题,或增加设计的复杂度。创建型模式通过以某种方式控制对象的创建来解决问题。
顾名思义,这些模式都是用来创建实例对象的。

工厂模式

工厂模式就是根据不用的输入返回不同的实例

在Vue在路由创建模式中,也多次用到了工厂模式

export default class VueRouter {
    constructor(options) {
        this.mode = mode    // 路由模式
        switch (mode) {   // 简单工厂
            case 'history':  
                this.history = new HTML5History(this, options.base)
                break
            case 'hash':      
                this.history = new HashHistory(this, options.base, this.fallback)
                break
            case 'abstract':   
                this.history = new AbstractHistory(this, options.base)
                break
            default:
        }
    }
}


单例模式

保证一个类只有一个实例,并提供一个访问它的全局访问点。也就是说,第二次使用同一个类创建新对象的时候,应该得到与第一次创建的对象完全相同的对象。

Vuex

原型模式

用一个已经创建的实例作为原型,通过复制该原型对象来创建一个和原型相同或相似的新对象。在这里

行为型模式(Behavioral Patterns)

用于识别对象之间常见的交互模式并加以实现,增加了这些交互的灵活性。

策略模式

其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换

策略模式经常用在表单验证的场景。Element UI 的 Form 表单 具有表单验证功能,用来校验用户输入的表单内容

观察者模式/发布订阅模式

  • 观察者模式(Observer Pattern)定义了一种一对多的关系,让多个订阅者对象同时监听某一个发布者,或者叫主题对象,这个主题对象的状态发生变化时就会通知所有订阅自己的订阅者对象,使得它们能够自动更新自己。

  • 发布订阅模式别名,非常形象地诠释了观察者模式里两个核心的角色要素——发布者和订阅者。
    发布-订阅模式有一个调度中心

在这里插入图片描述

EventBus

迭代器模式

提供一种方法 , 顺序访问 集合对象 中的 各个元素 , 而 不暴露 该对象 的内部表示 ;

状态模式

对有状态的对象,把复杂的“判断逻辑”提取到不同的状态对象中,允许状态对象在其内部状态发生改变时改变其行为。

结构型模式(Structural Patterns)

结构型从功能上来说就是给元素添加行为的,目标是优化结构的实现方式
通过识别系统中组件间的简单关系来简化系统的设计。

装饰器模式

为对象添加新功能,不改变其原有的结构和功能。

代理模式

使用者无权访问目标对象,中间加代理,通过代理做授权和控制。

ES6 Proxy

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1098803.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于FPGA的图像高斯滤波实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a vivado2019.2 3.部分核心程序 timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 202…

尚硅谷Docker核心技术

目录 第1课时 docker_前提知识要求和课程简介第2课时 docker_为什么会出现第3课时 docker_理念第4课时 docker_是什么?第5课时 docker_能干什么第6课时 docker_3要素第7课时 centos6安装Dockercentos7安装Docker第9课时 阿里云镜像加速器配置第10课时 helloworld镜像…

FPGA project : flash_continue_write

本实验学习了通过spi通信协议,驱动flash;完成连续写操作。 连续写: 本质上还是页编程指令,两种连续写的方式: 1,每次只写1byte的数据。 2,每次写满1页数据,计算剩余数据够不够写…

Java实现微信支付、退款(小程序支付JSAPI-V3-整合微信sdk开发)

一、废话不多说,直接上教程: 写代码之前首先要明白微信支付的支付流程。 二、支付流程: 小程序调用后端预支付接口 > 预支付接口调用成功返回给小程序支付凭证id > 小程序拿到支付凭证调用微信后台支付接口 > 小程序支付成功后&am…

JOSEF约瑟 多档切换式漏电(剩余)继电器JHOK-ZBL1 30/100/300/500mA

系列型号: JHOK-ZBL多档切换式漏电(剩余)继电器(导轨) JHOK-ZBL1多档切换式漏电(剩余)继电器 JHOK-ZBL2多档切换式漏电(剩余)继电器 JHOK-ZBM多档切换式漏电&#xf…

自己写spring boot starter问题总结

1. Unable to find main class 创建spring boot项目写自己的starterxi写完之后使用install出现Unable to find main class&#xff0c;这是因为spring boot打包需要一个启动类&#xff0c;按照以下写法就没事 <plugins><plugin><groupId>org.springframewo…

嵌入式系统学习路径:

嵌入式系统学习路径&#xff1a; 00001. 确保扎实的C语言基础&#xff0c;包括高级编程知识和数据结构算法。 00002. 00003. 学习Linux应用层开发&#xff0c;包括并发程序设计、网络编程和数据库开发。 00004. 00005. 探索无线通信领域&#xff0c;如Zigbee、低功…

OpenHarmony创新赛|赋能直播第四期

开放原子开源大赛OpenHarmony创新赛进入了中期评审环节&#xff0c;为了解决开发者痛点&#xff0c;本期以三方库移植、MQTT移植案例、开发工具介绍的3节系列技术课程&#xff0c;帮助开发者提升开发效率&#xff0c;为作品的创新能力奠定坚实基础。 扫描下方长图二维码&#x…

手把手教学mfc140u.dll丢失的解决方法,快速解决mfc140u.dll丢失

不知道大家有没有有没有遇到过mfc140u.dll丢失的情况。今天手把手教学mfc140u.dll丢失的解决方法&#xff0c;快速解决mfc140u.dll丢失&#xff0c;这么详细的步骤&#xff0c;我不信这你还不能解决mfc140u.dll丢失的问题。 一.解决mfc140u.dll丢失的方法 解决办法一&#xff…

centos7.3无法使用ping命令提示connect: Resource temporarily unavailable

centos7.3无法使用ping命令 问题描述linux版本解决方法 问题描述 有一台linux服务器&#xff0c;因网络策略开通所需&#xff0c;要登录服务器进行ping测试。结果登录后使用ping命令提示&#xff1a;connect: Resource temporarily unavailable linux版本 查看版本文件得知…

半导体产业链解析:晶圆厂、无晶圆厂与代工厂的比较与作用

半导体产业一直是全球科技发展的关键驱动力&#xff0c;在半导体产业中&#xff0c;晶圆厂、无晶圆厂公司和代工厂是三个重要的参与者。它们在产业环节、生产方式、经营模式和市场竞争等方面存在一些显著差异。本文将探讨半导体晶圆厂、无晶圆厂公司和代工厂之间的区别&#xf…

从零到一完成Midway.js登录、注册、鉴权功能

您好&#xff0c;如果喜欢我的文章&#xff0c;可以关注我的公众号「量子前端」&#xff0c;将不定期关注推送前端好文~ 前言 本文将从项目搭建到实现从零到一开发一个登录、注册、鉴权的简易版注册登录系统&#xff0c;主要功能和技术选型如下&#xff1a; 服务端框架———…

mac 版本 Lightroom Classic 2024 正式版来了 七个有趣的新功能值得更新

mac 版本 Lightroom Classic 2024 正式版终于来了&#xff01;此次更新有七大功能&#xff1a;新增高动态范围编辑和输出、智能 AI 交互式镜头模糊、全局和局部焦点颜色、预设搜索、支持新型相机和镜头等功能。本文将做详细解读&#xff0c;看看这七个有趣的新功能值得去更新吗…

RK3568驱动指南|第六篇-平台总线-第54章 点亮LED灯实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

流量渠道分析

文章目录 流量渠道分析一、为什么需要流量渠道分析1.了解流量来源&#xff0c;制定营销策略2.发现流量缺失点&#xff0c;提高转化率3.提高用户体验&#xff0c;增加用户留存 二、流量渠道分析方法1.确定分析目标2.选择分析工具3.设置分析参数4.收集数据5.数据分析6.制定优化方…

2024上海国际智慧城市展览会(世亚智博会)智慧城市,数字中国

在数字化、智能化的时代背景下&#xff0c;智慧城市成为了全球瞩目的焦点。而作为智慧城市领域的重要盛会&#xff0c;2024上海国际智慧城市展览会&#xff08;简称&#xff1a;世亚智博会&#xff09;则将再次汇聚全球目光。此次展览将于2024年3月26日至28日在上海跨国采购会展…

解决java.lang.IllegalArgumentException: servlet映射中的<url pattern>[demo1]无效

当我使用tomcat启动使用servlet项目时&#xff0c;出现了报错&#xff1a; java.lang.IllegalArgumentException: servlet映射中的<url pattern>[demo1]无效 显示路径错误&#xff0c;于是去检查Web.xml中的配置&#xff0c;发现是配置文件的路径写错了&#xff0c;少写了…

【Python第三方包】快速获取硬件信息和使用情况(psutil、platform)

文章目录 前言一、psutil包1.1 安装psutil包1.2 psutil 使用方式获取CPU使用率获取内存使用情况将内存的获取的使用情况变成GB和MB获取磁盘使用情况磁盘内存进行转换获取网络信息网络info 二、platform2.1 platform的介绍2.2 platform 使用方式获取操作系统的名称获取架构的名称…

unapp项目发布h5 详细操作流程以及注意事项 (hash模式)

首先需要在manifest.json文件中的web配置中 这里因为公司项目都是hash模式 所以写的./ 接下来看源码视图会发现多了一个配置项&#xff1a; 接下来点击hbx上面的 发行》网站-PC Web或手机H5(仅适用于uni-app)(H) 此时查看控制台会显示打包后的存放路径 接下来就直接给后端同…

Windows下Redis3.0主从模式架构搭建

redis版本&#xff1a;Redis-x64-3.0.504 复制相同文件 修改文件夹下redis.windows.conf 文件配置(注意&#xff1a;主有密码&#xff0c;从必须有密码且跟主相同) 修改端口&#xff1a; 主库&#xff1a;端口号6379 从库1&#xff1a;修改端口号为6380 从库2&#xff1a;修…