当前位置: 首页 > news >正文

前端设计模式基础笔记

        前端设计模式是指在前端开发中经常使用的一些解决问题的模式或思想。它们是经过实践证明的最佳实践,可以帮助我们更好地组织和管理我们的代码。

一、单例模式(Singleton Pattern)

        单例模式是一种创建型模式,它保证一个类只有一个实例,并提供一个全局访问点。在前端开发中,单例模式常用于管理全局状态和共享资源。例如,我们可以使用单例模式来实现一个全局的状态管理器,用于存储和管理应用程序的状态信息。

        实现单例模式的关键在于将构造函数设置为私有,禁止外部直接创建实例。同时,我们需要提供一个静态方法来获取单例实例,该方法会判断实例是否已经存在,如果不存在则创建一个新的实例。

        单例模式中Class的实例个数最多为1。当需要一个对象去贯穿整个系统执行某些任务时,单例模式就派上了用场。而除此之外的场景尽量避免单例模式的使用,因为单例模式会引入全局状态,而一个健康的系统应该避免引入过多的全局状态。

作用:确保一个类只有一个实例,并提供全局访问点。

实现方式:使用一个私有变量来存储唯一的实例,通过一个公共的静态方法来获取实例。

示例:在前端开发中,可以使用单例模式来创建一个全局状态管理器,用于管理应用程序的状态。

二、工厂模式(Factory Pattern)

        工厂模式是一种创建型模式,它定义了一个用于创建对象的接口,但是让子类决定实例化哪个类。通过工厂方法来创建对象,避免在代码中直接使用new操作符,从而使代码更加灵活和可维护。在前端开发中,工厂模式常用于创建UI组件和Ajax请求对象等。

        工厂模式可以分为简单工厂模式、工厂方法模式和抽象工厂模式。简单工厂模式是最基础的工厂模式,它由一个工厂类负责创建所有的产品实例。工厂方法模式是在简单工厂模式的基础上,将工厂类抽象成一个接口,让子类实现具体的工厂方法。抽象工厂模式是在工厂方法模式的基础上,将工厂接口抽象成一个抽象工厂接口,让子类实现具体的产品族工厂。

作用:通过工厂类创建对象,隐藏对象的创建逻辑。

实现方式:定义一个工厂类,根据不同的条件创建不同的对象,并返回统一的接口。

示例:在前端开发中,可以使用工厂模式来创建不同类型的组件,根据参数的不同返回相应的组件实例。

三、观察者模式(Observer Pattern)

        观察者模式是一种行为型模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,当一个对象的状态发生改变时,所有依赖于它的对象都会被通知并自动更新。当主题对象发生变化时,它会通知所有的观察者对象,让它们更新自己的状态。

        在前端开发中,观察者模式常用于实现事件系统。例如,我们可以定义一个事件主题对象,让多个事件监听器对象监听该主题对象。当主题对象触发事件时,它会通知所有的监听器对象执行相应的处理函数。

作用:定义一种一对多的依赖关系,当一个对象状态改变时,所有依赖它的对象都会得到通知并自动更新。

实现方式:定义一个主题(Subject)和多个观察者(Observer),主题维护观察者的列表,当主题的状态改变时,通知观察者进行更新。

示例:在前端开发中,可以使用观察者模式来实现事件的监听和响应,当某个事件触发时,通知所有注册的观察者进行相应的处理。

四、原型模式(Prototype Pattern)

        原型模式是一种创建型设计模式,它通过复制现有对象来创建新对象,而无需依赖具体类。原型模式可以帮助我们在运行时动态地创建对象,避免了使用传统的实例化方式,从而提高了对象的创建效率。

作用:通过复制现有对象来创建新对象,避免了创建大量相似对象的开销。

实现方式:通过克隆现有对象,创建一个新的对象实例,避免了使用构造函数创建对象。

示例:在前端开发中,可以使用原型模式来创建复杂的对象或组件,提高性能和可维护性。

五、装饰器模式(Decorator Pattern)

        装饰器模式是一种结构型模式,它允许动态地向一个对象添加额外的功能,而不需要修改对象的结构通过包装一个对象来扩展其功能,而不是通过继承来实现。这种模式可以使代码更加灵活和可扩展。在前端开发中,装饰器模式常用于添加日志、缓存、性能监控等功能。

        装饰器模式可以分为类装饰器和方法装饰器。类装饰器用于装饰类,它可以添加静态和实例方法、属性和元数据。方法装饰器用于装饰方法,它可以添加参数、返回值和元数据等。

作用:动态地给对象添加额外的功能,不改变其原有结构。

实现方式:使用包装器(Wrapper)来包裹原有对象,并在其中添加新的功能。

示例:在前端开发中,可以使用装饰器模式来扩展或修改现有组件的功能,例如给按钮组件添加点击统计功能。

六、适配器模式(Adapter Pattern)

                适配器模式是一种结构型模式,它允许将不兼容的对象包装成兼容的对象,以满足客户端的需求。(将一个类的接口转换成客户端所期望的另一个接口,从而使原本不兼容的类可以一起工作。)在前端开发中,适配器模式常用于兼容不同的API接口和第三方库。

适配器模式可以分为类适配器模式和对象适配器模式。类适配器模式使用继承来实现适配器,它可以将适配器对象和被适配对象的接口进行统一。对象适配器模式使用组合来实现适配器,它可以在适配器对象中保存被适配对象的引用,并将其接口进行转换。

作用:将一个类的接口转换成客户端所期待的另一种接口,使得原本不兼容的类可以一起工作。

实现方式:创建一个适配器类,实现客户端期望的接口,并在内部使用原有类的方法实现适配。

示例:在前端开发中,适配器模式可用于将不同框架或库之间的差异进行适配,以便于更好地整合使用。

七、策略模式(Strategy Pattern)

        策略模式是一种行为型模式,它定义了一系列算法,并将每个算法封装起来,使得它们可以互换,并在运行时根据需要选择相应的策略来解决问题。在前端开发中,策略模式常用于处理表单验证、排序和过滤等问题。

        策略模式由三个部分组成:策略类、上下文类和客户端类。策略类封装了具体的算法,上下文类负责调用策略类的算法,客户端类负责创建上下文类并设置具体的策略类。

作用:定义一系列的算法,将其封装成独立的策略类,使得它们可以相互替换。

实现方式:将每个策略算法封装在独立的类中,并通过一个上下文类来调用不同的策略。

示例:在前端开发中,策略模式可用于根据不同的用户角色选择不同的权限验证策略。

八、MVC模式(Model-View-Controller Pattern)

        MVC模式将应用程序分为三个部分:模型、视图和控制器。模型负责处理数据,视图负责呈现数据,控制器协调模型和视图之间的交互。

作用:将应用程序分为三个组件:模型(Model)、视图(View)和控制器(Controller)。

实现方式:模型负责处理数据和业务逻辑,视图负责展示数据,控制器负责处理用户输入和控制流程。

示例:在前端开发中,MVC模式可用于将界面逻辑和业务逻辑分离,提高代码的可读性和可维护性。

九、MVVM模式(Model-View-ViewModel Pattern)

        MVVM模式是MVC模式的一种变体,将控制器改为视图模型。视图模型负责处理用户界面和业务逻辑之间的交互。

作用:在MVVM模式中,视图(View)负责展示数据和接收用户操作,模型(Model)表示应用程序的数据和业务逻辑,ViewModel则处理视图和模型之间的交互。

实现方式:使用数据绑定技术,将视图和模型进行绑定,使得数据的变化能够自动反映到视图上,同时将用户操作映射到相应的模型操作。

示例:在前端开发中,MVVM模式可用于实现数据驱动的界面开发,简化复杂的DOM操作。

(图片来自网络,肯定不是小白自己做的啦!~)

相关文章:

前端设计模式基础笔记

前端设计模式是指在前端开发中经常使用的一些解决问题的模式或思想。它们是经过实践证明的最佳实践,可以帮助我们更好地组织和管理我们的代码。 一、单例模式(Singleton Pattern) 单例模式是一种创建型模式,它保证一个类只有一个…...

Python项目开发:Flask基于Python的天气数据可视化平台

目录 步骤一:数据获取 步骤二:设置Flask应用程序 步骤三:处理用户输入和数据可视化 步骤四:渲染HTML模板 总结 在这个数字化时代,数据可视化已经成为我们理解和解释信息的重要手段。在这个项目中,我们…...

Dell 服务器常见报错信息汇总

Dell 服务器常见报错汇总 如果有别的报错信息欢迎补充...

算法通关村-----贪心面试大热门之区间问题

判断区间是否重叠 问题描述 给定一个会议时间安排数组intervals,每个会议时间都包括开始时间和结束时间,intervals[i] [starti,endi],请你判断一个人是否能够参加这里面的全部会议。详见leetcode252 问题分析 先将会议安排数组按照开始时间排序&…...

OAK相机:自动或手动设置相机参数

OAK相机:自动或手动设置相机参数 硬件软件 硬件 使用硬件如下: 4✖️ov9782相机OAK-FFC-4P驱动板 硬件接线参考博主的一篇博客:OAK相机:多相机硬件同步拍摄 软件 博主使用的是Ubuntu18.04系统,首先配置所需的pytho…...

百家宴焕新上市,持续深耕100-300元价位段

执笔 | 尼 奥 编辑 | 古利特 4月8日,长江酒道曾在《百家宴谋划“晋级”之路,多措并举切分宴席市场“蛋糕”》一文中提到:“百家宴主力新品即将登场,市场政策灵活焕新。” 如今,百家宴新品及市场新政,正…...

Linux Debian12使用git将本地项目上传到码云(gitee)远程仓库

一、注册码云gitee账号 这个可以参考其他教程,本文不做介绍。 gitee官网:https://gitee.com/ 二、Linux Debian12安装git 如果Linux系统没有安装git,可以使用下面命令安装git sudo apt install git 三、gitee新建仓库 我这只做测试&…...

电子烟行业常用的英文表达

1. 电子烟的各种表达 a) 电子烟 i. Electronic-cigarette, ii. Electronic smoke, iii. electronic cigarettes iv. Electric cigarette, v. E-Cigarettes vi. e-cigarette, vii. e-Cig viii. E cigar,e-cigar 电子烟雪茄 2. 电子烟特指词汇及衍生 a) VAPE i. Vapo…...

【SpringMvc 丨跨域】

Spring MVC 支持跨域处理(CORS)。 CORS 简介处理CORS 过滤器CrossOrigin注解java配置xml配置 主页传送门:📀 传送 简介 跨域是指在浏览器的同源策略下,不能执行其他网站的脚本。它是由浏览器的安全限制造成的&#xf…...

【C语言】【strlen函数的使用与模拟实现】

1.strlen函数的使用和模拟实现 1.1使用&#xff1a; size_t strlen(const char* str)返回类型为无符号整型&#xff0c;参数是字符指针 计算的是字符串中到“\0"之前的字符个数 1.2模拟实现&#xff1a; 方法一&#xff1a;计数器式遍历 #include<stdio.h> #in…...

类和对象【基础概念】

全文目录 类的定义定义方式 类的访问限定符封装&#xff08;面向对象的三大特性之一&#xff09; 类对象模型类对象的存储方式类对象的大小计算 this指针this指针的特性**this指针可以为空吗&#xff1f;** 类的定义 在C中&#xff0c;C语言中的结构体struct中除了定义变量外还…...

如何测试生成式人工智能(AIGC)

简介&#xff1a;在人工智能日趋普及的今天&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;已经成为不可忽视的一个分支。从自动化生成新闻、编写代码到图像和音频生成&#xff0c;AIGC几乎无处不在。但如何确保这些生成的内容达到预期标准、安全可靠&#xff0c;同时…...

机器学习算法详解3:逻辑回归

机器学习算法详解3&#xff1a;逻辑回归 前言 ​ 本系列主要对机器学习上算法的原理进行解读&#xff0c;给大家分享一下我的观点和总结。 本篇前言 ​ 本篇对逻辑回归的算法原理进行解读。 目录结构 文章目录 机器学习算法详解3&#xff1a;逻辑回归1. 引子2. sigmoid函数3. 原…...

linux命令集合

cd:切换文件路径 pwd:显示当前所处的路径 mkdir&#xff1a;创建目录比如mkdir test touch:创建一个空文件touch test.txt in:用于指定文件夹在另一个位置建立同步的链接in -s /lib/test1 /user/lj 在user目录下建立指向/lib/test1 目录的lj文件 cat:cat file(查看文件内…...

实现卓越供应链:RFID技术的革命性应用

在现代制造业中&#xff0c;供应链和物流的高效运作至关重要&#xff0c;它不仅影响着生产效率&#xff0c;还直接关系到企业的竞争力和客户满意度。为了应对这些挑战&#xff0c;越来越多的企业开始关注智能制造RFID智能设备&#xff0c;将其应用于供应链和物流管理&#xff0…...

从JVM角度看继承

从JVM角度看继承 最近重读了周志明老师的《深入理解JAVA虚拟机》一书&#xff0c;看完大有收获&#xff0c;但仍对继承情况下对象内存布局有所疑惑&#xff0c;所以查阅资料&#xff0c;结合本书进行分析 参考文档&#xff1a; 【深入理解JVM】&#xff1a;Java类继承关系中…...

基于Python和mysql开发的看图猜成语微信小程序(源码+数据库+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python和mysql开发的看图猜成语微信小程序&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都…...

Unity入门教程||创建项目(上)

一、介绍 目的&#xff1a;通过尝试制作一款使用玩家角色把小球弹飞的简单小游戏&#xff0c;熟悉使用Unity进行游戏开发的基本流程。 软件环境&#xff1a;Unity 2017.3.0f3&#xff0c;Visual Studio 2013 二、创建新项目 1&#xff0c;启动Unity后将出现一个并列显示Pro…...

Openbmc编译

1.网址的问题解决 原文 Modifying /conf/local.conf was the only solution that worked for me. Simply add one of the two options:#check connectivity using google CONNECTIVITY_CHECK_URIS "https://www.google.com/"#skip connectivity checks CONNECTIVI…...

美国CN2服务器速度怎么样

美国服务器以免备案、大带宽、性价比高的优势&#xff0c;多用于企业、电商、外贸、视频等个中大型网站建设。但是&#xff0c;因中美服 务器接口原因&#xff0c;导致某些服务器的网络并不稳定&#xff0c;这时候就会对美国服务器产品失望&#xff0c;解决这种问题的方法就是选…...

K8S原理架构与实战教程

文章目录 一、背景1.1 物理机时代、虚拟机时代、容器化时代1.2 容器编排的需要 二、K8S架构2.2 Worker节点 三、核心概念3.1 Pod3.2 Deployment3.3 Service3.4 Volume3.5 Namespace 四、K8S安装五、kubectl常用命令六、K8S实战6.1 水平扩容6.2 自动装箱6.2.1 节点污点6.2.2 Pod…...

基于C#的图书管理系统数据库设计报告

第一章 问题描述 1.1 图书管理系统简介 本系统利用.NET处理数据库的功能&#xff0c;实现对图书馆信息的管理。主要功能为管理有关读者、出版社、书籍、借阅和管理者的信息等。 本系统的结构分为读者信息管理模块、出版社信息管理模块、书籍信息管理模块、借阅信息管理模块、…...

【Express.js】pm2进程管理

pm2进程管理 本节我们将介绍如何使用 pm2 运行和监管我们的 express 项目 准备工作 一个 express 项目全局安装 pm2 npm install -g pm2pm2使用介绍 启动应用 你可以用纯命令去运行一个node项目&#xff0c;假设原本运行项目使用 node src/index.js可以跑起来一个项目&am…...

Nginx部署前后端分离项目(Linux)

Nginx代理前端页面、后端接口 一、前端打包二、后端打包三、Linux部署Nginx启动、暂停、重启服务器部署文件地址&#xff1a; 一、前端打包 npm run build二、后端打包 通过Maven 使用package打包 三、Linux部署 安装Nginx 安装环境 yum -y install gcc pcre pcre-devel z…...

Docker网络

1 简介 网络原理 下载iproute工具&#xff08;linux&#xff09;ip addr查看地址映射 容器内ip地址会进行映射符号。docker分配的地址。 77: eth0if78: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc noqueue state UP group default link/ether 02:42:ac:11:00:…...

第15章_瑞萨MCU零基础入门系列教程之Common I2C总线模块

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…...

《TCP/IP网络编程》阅读笔记--多播与广播

目录 1--多播 2--多播代码实例 3--广播 4--广播代码实例 1--多播 多播方式的数据传输是基于 UDP 完成的&#xff0c;多播数据包的格式与 UDP 数据包相同&#xff1b; 多播与 UDP 的区别&#xff1a;UDP 数据传输以单一目标进行&#xff0c;多播数据同时传递到加入&#xff…...

聚观早报|华为Mate 60 Pro支持面容支付;特斯拉重回底特律车展

【聚观365】9月8日消息 华为Mate 60 Pro已支持面容支付 特斯拉将重回底特律车展 iPhone在美国有1.67亿用户 韩国半导体8月份出口85.6亿美元 比亚迪元PLUS冠军版将于9月15日上市 华为Mate 60 Pro已支持面容支付 毫无预热的华为Mate 60 Pro突然在华为商城首批开售&#xf…...

本地缓存Caffeine的缓存过期淘汰策略

本地缓存是一种将数据存储在应用程序的内存中&#xff0c;以加速数据访问的技术。缓存的数据可以是频繁访问的数据&#xff0c;以减少对慢速数据源&#xff08;如数据库或网络&#xff09;的访问。缓存通常有一些缓存过期淘汰策略&#xff0c;以确保缓存中的数据保持最新和有效…...

激光焊接汽车尼龙塑料配件透光率测试仪

激光塑性成型技术是近年来塑性加工界出现的一种新技术。通常塑料主要是通过加热加压依赖模具成型。这对于单品种、大批量生产是有效的&#xff1b;而对于各种不同形状的塑料制件则需要昂贵的模具‚装置也较庞大。 高度聚焦的激光束垂直照射在待变形的板料上‚由于塑料直接吸收激…...

影院网站建设/湛江百度网站快速排名

图片上传及路径设置对于在该编辑器中生成的图片为 base64 编码&#xff0c;所生成的字符占据太大空间&#xff0c;可考虑将其上传至服务器中&#xff0c;在该图片设置保存好的文件路径即可&#xff0c;以 php 为例。js 代码// 圖片上傳quill.on(text-change, function(delta, o…...

网站 被攻击_主业篡改 被黑了 织梦做的站/晋江友情链接是什么意思

本文无意选择或推荐阵营&#xff0c;毕竟单片机大同小异&#xff0c;基于各自不同的知识水平和预算以及团队选择&#xff0c;谈不上对错&#xff0c;只是从菜鸟到老鸟的路径曲折程度不同而已。 年前收到“STC开天斧”开发板&#xff08;这波免费包邮送的力度很大&#xff09;&a…...

wordpress加入http请求/企业培训机构

同步&#xff08;Sync&#xff09; 所谓同步&#xff0c;就是发出一个功能调用时&#xff0c;在没有得到结果之前&#xff0c;该调用就不返回或继续执行后续操作。 根据这个定义&#xff0c;Java中所有方法都是同步调用&#xff0c;应为必须要等到结果后才会继续执行。我们在说…...

个人建站如何赚钱/鞍山seo外包

一&#xff0c;浮点数的2种表示形式 二&#xff0c;浮点数使用的注意事项 ①浮点数不应进行大小比较 ②小数转二进制的做法&#xff1a;乘2并顺序取整数部分③当整数运算的结果超出整数的范围后&#xff0c;会自动转换为浮点数 转载于:https://www.cnblogs.com/you…...

大一网页设计个人网站代码/互联网全网推广

微商城 微信商城 微信公众平台 电子商务 微信商城系统作者&#xff1a;方倍工作室 地址&#xff1a;http://www.cnblogs.com/txw1958/p/weixin73-microshop.html 微商城是基于手机端的电子商务平台&#xff0c;更多指的是基于微信公众平台搭建的网络销售平台。 商城首页及产品分…...

怎么做阿里巴巴国际网站首页/广东今天新闻最新消息

2019独角兽企业重金招聘Python工程师标准>>> 今天在使用 codeigniter&#xff08;CI&#xff09;异步&#xff08;ajax&#xff09;传输数据时总是出现500 internal server error。 分两种分析&#xff0c;首先 如果使用url访问能够正确显示而没有这个错误&#xff…...