首页 > 其他分享 >前端设计模式

前端设计模式

时间:2022-11-17 15:36:46浏览次数:44  
标签:原则 对象 创建 代码 模式 设计模式 前端

1. 什么是设计模式?

设计模式是一套被反复使用、多数人知晓、经过分类编目的、代码设计经验的总结。它是为了可重用代码,让代码更容易的被他人理解并保证代码的可靠性。 就像是在做数学题时,已知直角三角形两边长,求另一边,我们会直接用勾股定理,而不会去证明为什么勾股定理是成立的。所以,设计模式实际上是“拿来主义”在软件领域的贯彻实践,它是一套现成的工具,拿来即用。下面来看一下设计模式的设计原则。  

2. 设计原则概述

设计原则是设计模式的指导理论,它可以帮助我们规避不良的软件设计。设计模式遵循SOLID原则,SOLID 指代的五个基本原则分别是: ●单一职责原则(Single Responsibility Principle) 开放封闭原则指的就是对扩展开放、对修改关闭。编写代码的时候不可避免地会碰到修改的情况,而遵循开闭原则就意味着当代码需要修改时,可以通过编写新的代码来扩展已有的代码,而不是直接修改已有代码本身。 ●开放封闭原则(Opened Closed Principle) 应该有且仅有一个原因引起类的变更。这个原则很好理解,一个类代码量越多,功能就越复杂,维护成本也就越高。遵循单一职责原则可以有效地控制类的复杂度。 ●里式替换原则(Liskov Substitution Principle) 里氏替换原则是指在使用父类的地方可以用它的任意子类进行替换。里氏替换原则是对类的继承复用作出的要求,要求子类可以随时替换掉其父类,同时功能不被破坏,父类的方法仍然能被使用。 ●接口隔离原则(Interface Segregation Principle) 不应该依赖它不需要的接口,也就是说一个类对另一个类的依赖应该建立在最小的接口上。目的就是为了降低代码之间的耦合性,方便后续代码修改。 ●依赖反转原则(Dependency Inversion Principle) 准确说应该是避免依赖倒置,好的依赖关系应该是类依赖于抽象接口,不应依赖于具体实现。这样设计的好处就是当依赖发生变化时,只需要传入对应的具体实例即可。 ●最少知识原则(The Least Knowledge Principle)  一个类对于其他类知道得越少越好,就是说一个对象应当对其他对象尽可能少的了解。这一条原则要求任何一个对象或者方法只能调用该对象本身和内部创建的对象实例,如果要调用外部的对象,只能通过参数的形式传递进来。这一点和纯函数的思想相似。  

3.设计模式3种类型

(1)创建型

创建型模式的主要关注点是“如何创建和使用对象”,这些模式的核心特点就是将对象的创建与使用进行分离,从而降低系统的耦合度。使用者不需要关注对象的创建细节,对象的创建由相关的类来完成。

具体包括下面几种模式:
●抽象工厂模式,提供一个超级工厂类来创建其他工厂类,然后通过工厂类创建类实例;
●构造器模式,将一个复杂对象分解成多个相对简单的部分,然后根据不同需要分别创建它们,最后构建成该复杂对象;
●工厂模式,定义一个用于创建生成类的工厂类,由调用者提供的参数决定生成什么类实例;
●原型模式,将一个对象作为原型,通过对其进行克隆创建新的实例;
●单例模式,生成一个全局唯一的实例,同时提供访问这个实例的函数。
 

(2)结构型

结构型模式描述如何将类或对象组合在一起形成更大的结构。它分为类结构型模式和对象结构型模式,类结构型模式采用继承机制来组织接口和类,对象结构型模式釆用组合或聚合来生成新的对象。

具体包括下面几种模式:
●适配器模式,将一个类的接口转换成另一个类的接口,使得原本由于接口不兼容而不能一起工作的类能一起工作;
●桥接模式,将抽象与实现分离,使它们可以独立变化,它是用组合关系代替继承关系来实现的,从而降低了抽象和实现这两个可变维度的耦合度;
●组合模式,将对象组合成树状层次结构,使用户对单个对象和组合对象具有一致的访问性;
●装饰器模式,动态地给对象增加一些职责,即增加其额外的功能;
●外观模式,为多个复杂的子系统提供一个统一的对外接口,使这些子系统更加容易被访问;
●享元模式,运用共享技术来有效地支持大量细粒度对象的复用;
●代理模式,为某对象提供一种代理以控制对该对象的访问,即客户端通过代理间接地访问该对象,从而限制、增强或修改该对象的一些特性。
 

(3)行为型

行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象无法单独完成的任务,它涉及算法与对象间职责的分配。

行为型模式分为类行为模式和对象行为模式,类的行为模式采用继承机制在子类和父类之间分配行为,对象行为模式采用多态等方式来分配子类和父类的职责。

具体包括下面几种模式:
●责任链模式,把请求从链中的一个对象传到下一个对象,直到请求被响应为止,通过这种方式去除对象之间的耦合;
●命令模式,将一个请求封装为一个对象,使发出请求的责任和执行请求的责任分割开;
●策略模式,定义了一系列算法,并将每个算法封装起来,使它们可以相互替换,且算法的改变不会影响使用算法的用户;
●解释器模式,提供如何定义语言的文法,以及对语言句子的解释方法,即解释器;
●迭代器模式,提供一种方法来顺序访问聚合对象中的一系列数据,而不暴露聚合对象的内部表示;
●中介者模式,定义一个中介对象来简化原有对象之间的交互关系,降低系统中对象间的耦合度,使原有对象之间不必相互了解;
●备忘录模式,在不破坏封装性的前提下,获取并保存一个对象的内部状态,以便以后恢复它;
●观察者模式,多个对象间存在一对多关系,当一个对象发生改变时,把这种改变通知给其他多个对象,从而影响其他对象的行为;
●状态模式,类的行为基于状态对象而改变;
●访问者模式,在不改变集合元素的前提下,为一个集合中的每个元素提供多种访问方式,即每个元素有多个访问者对象访问;
●模板方法模式,定义一个操作中的算法骨架,将算法的一些步骤延迟到子类中,使得子类在可以不改变该算法结构的情况下重定义该算法的某些特定步骤。          

标签:原则,对象,创建,代码,模式,设计模式,前端
From: https://www.cnblogs.com/cczlovexw/p/16899624.html

相关文章

  • 自动生成前端接口文件以及方法函数实践
    实现原理解析(以个人项目角度实现)后端接口布置访问链接,可以从浏览器network中获取到请求地址存在请求参数为userpageSize访问接口示例为:/apiList/pageSize=55获取......
  • 前端防抖节流
    /***防抖核心代码*逻辑是*第一次点完以后开始计时*如果单位时间内点了的话*不但无效,而且时间从头计算**例如*设置3000毫秒*第一次点完如果3秒......
  • 前端技术实现文件预览(word、excel、pdf、ppt、mp4、图片、文本)
    前端技术实现文件预览(word、excel、pdf、ppt、mp4、图片、文本)前言因为业务需要,很多文件需要在前端实现预览,今天就来了解一下吧。Demo地址[1]:https://zhuye1993.github......
  • vue纯前端导入excel,获取excel的表格数据渲染el-table并纯前端分页实现方法
    因为项目开发的过程中不是所有的表格数据由后台处理返回,因为有些数据不需要在数据库落地,只做前端页面展示并且获取表格的数据上传即可,所以需要前端纯处理excel的数据。第......
  • 软件设计模式白话文系列(十二)组合模式
    1、模式描述组合模式属于结构型模式,把多个对象组成树状结构来表示局部与整体,这样用户可以以相同的方式对待单个对象和组合对象。需要注意的是这里的组合和之前系列中,我们......
  • 前端常见算法
    C:\Users\Administrator\Desktop\手写\01_instanceOf.jsfunctioninstance_of(target,origin){lettargetP=target.__proto__;letoriginP=origin.prototype;......
  • 问题记录-前端开发避坑(7)--vue 原生h5开发及基础组件开发
    问题1问题描述与分析执行vueRouter的编程式导航时,报错:vuerouterTypeError:onCompleteisnotafunction检查发现是参数格式不对。这里使用了对象语法,而我错把qu......
  • 2022_后台前端幕课网
    新建一个项目 vue3 命令 vuecreate****安装后发现版本低 可以使用以下指令升级版本,使支持最新setup语法[email protected]@[email protected]开发前期,......
  • 一个简单的前端可视化监控系统
    背景首先我们为什么要做前端系统呢,先看下面这张表,可以很显然的看出,前端的性能对于产品的价值提升还是蛮有帮助的,但是这些信息如果我们能实时的采集到,并且实施以监控,让整个产......
  • 设计模式 -- 工厂模式
    简单工厂模式简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式(静态工厂模式):定义了一个创建对象的类,由这个类来封装实例化对象的行为(代码)......