js中常见的设计模式有哪些?

Javascript/jQuery/ES6 专栏收录该内容
31 篇文章 0 订阅

参考:JavaScript 中常见设计模式整理
详解 Javascript十大常用设计模式

1、常用的设计模式

  1. 单例模式
    • 一个类只能构造出一个实例。即如果有实例化,只能实例化一次
    • 实现:使用一个变量来标识该类是否被实例化
    • 例如我们实现弹窗,点击的时候创建一个div元素,如果频繁点击就会不断的创建和删除,此时使用单例模式则只会实例化一次
  2. 策略模式
    • 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换
    • 根据不同的参数可以命中不同的策略,例如动画库里的算法函数
  3. 代理模式
    • 代理对象和本体对象具有一致的接口,例如图片预加载
    • 代理是一个对象,它可以用来控制对本体对象的访问,它与本体对象实现了同样的接口,代理对象会把所有的调用方法传递给本体对象的
    • 本地对象注重的去执行页面上的代码,代理则控制本地对象何时被实例化,何时被使用
    • 优点:代理对象可以代替本体被实例化,并使其可以被远程访问;可以把本体实例化推迟到真正需要的时候;对于实例化比较费时的本体对象,或者因为尺寸比较大以至于不用时不适于保存在内存中的本体,我们可以推迟实例化该对象
  4. 工厂模式
    • 主要为了解决实例化对象产生重复的问题。
    • 优点:可以解决多个相似的问题;缺点:不能知道对象识别的问题,即不知道是哪个对象的实例
    • 可以在父类中实现一些相同的方法,在子类中重写该父类的方法实现自己的业务逻辑
  5. 发布-订阅者模式
  6. 命令模式
    • 命令指的是一个执行某些特定事情的指令
    • 使用场景:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道请求的操作是什么,可以使用命令模式来消除发送者与接收者的代码耦合关系。
  7. 模块模式
    • 模块模式是为单例模式添加私有变量和私有方法,能够减少全局变量的使用
    • 模块模式使用了一个返回对象的匿名函数。在这个匿名函数内部,先定义了私有变量和函数,供内部函数使用,然后将一个对象字面量作为函数的值返回,返回的对象字面量中只包含可以公开的属性和方法
  8. 职责链模式
    • 通过请求第一个条件,会持续执行后续的条件,直到返回结果为止
    • 发送者知道链中的第一个接收者,它向这个接收者发送该请求;每一个接收者都对请求进行分析,然后要么处理它,要么它往下传递;每一个接收者知道其他的对象只有一个,即它在链中的下家(successor);如果没有任何接收者处理请求,那么请求会从链中离开。
    • 优点:消除请求的发送者与接收者之间的耦合。
  9. 模板方法模式:
  10. 中介者模式
    • 对象和对象之间借助第三方中介者进行通信
    • 中介者模式的作用是解除对象与对象之间的耦合关系,增加一个中介对象后,所有的相关对象都通过中介者对象来通信,而不是相互引用,所以当一个对象发送改变时,只需要通知中介者对象即可。
  11. 装饰者模式
- 动态的给函数赋能
  1. 适配者模式
- 一种数据结构改成另一种数据结构
  1. 观察者模式
- 当观察对象发生变化时自动调用相关函数

2、设计模式的六大原则

参考:23种设计模式全解析

总原则:开闭原则,即对扩展开放,对修改关闭

在程序需要进行拓展的时候,不能去修改原有的代码,而是要扩展原有代码,实现一个热插拔的效果

  1. 单一职责原则:每个类应该实现单一的职责,如若不然,就应该把类拆分
  2. 里氏替换原则:子类对父类的方法尽量不要重写和重载
  3. 依赖倒转原则:写代码时用到具体类时,不与具体类交互,而与具体类的上层接口交互。
  4. 接口隔离原则
  5. 迪米特法则:只与直接的朋友通信
  6. 合成复用原则:尽量首先使用合成/聚合的方式,而不是使用继承
  • 0
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

1) 优秀的程序应该是这样的:阅读时,感觉很优雅;新增功能时,感觉很轻松;运行时,感觉很快速,这就需要设计模式支撑。<br /> <br /> 2) 设计模式包含了大量的编程思想,讲授和真正掌握并不容易,网上的设计模式课程不少,大多讲解的比较晦涩,没真实的应用场景和框架源码支撑,学习后,只知其形,不知其神。就会造成这样结果: 知道各种设计模式,但是不知道怎么使用到真实项目。本课程针对上述问题,针对性的进行了升级 (1) 授课方式采用 图解+框架源码分析的方式,让课程生动趣好理解 (2) 系统全面的讲解了设计模式,包括 设计模式七大原则、UML类图-类的六大关系、23种设计模式及其分类,比如 单例模式的8种实现方式、工厂模式的3种实现方式、适配器模式的3种实现、代理模式的3种方式、深拷贝等<br /> <br /> 3) 如果你想写出规范、漂亮的程序,就花时间来学习下设计模式吧<br /> <br /> 课程内容和目标<br /> <br /> 本课程是使用Java来讲解设计模式,考虑到设计模式比较抽象,授课采用 图解+框架源码分析的方式<br /> <br /> 1) 内容包括: 设计模式七大原则(单一职责、接口隔离、依赖倒转、里氏替换、开闭原则、迪米特法则、合成复用)、UML类图(类的依赖、泛化和实现、类的关联、聚合和组合) 23种设计模式包括:创建型模式:单例模式(8种实现)、抽象工厂模式、原型模式、建造者模式、工厂模式。结构型模式:适配器模式(3种实现)、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式(3种实现)。行为型模式:模版方法模式、命令模式、访问者模式、迭代器模式、观察者模式介者模式、备忘录模式、解释器模式(Interpreter模式)、状态模式、策略模式、职责链模式(责任链模式)<br /> <br /> 2) 学习目标:通过学习,学员能掌握主流设计模式,规范编程风格,提高优化程序结构和效率的能力。<br /> <div> <br /> </div>
<h4 style="font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;">期末</span><span style="font-size:14px;background-color:#fbeeb8;">考点</span><span style="font-size:14px;">都对应</span><span style="font-size:14px;background-color:#fbeeb8;">详解视频</span><span style="font-size:14px;">,</span><span style="font-size:14px;"><span style="color:#e03e2d;">基础阶段</span></span><span style="font-size:14px;">内容全面,语言通俗易懂(翻译书的语言为</span><span style="font-size:14px;background-color:#fbeeb8;">人话)</span><span style="font-size:14px;">,</span> </h4> <h4 style="font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;">老师精心研究</span><span style="font-size:14px;background-color:#fbeeb8;">百份</span><span style="font-size:14px;">考卷,总结每一个考点,同时结合你肯定可以听懂的骚话,</span> </h4> <h4 style="font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;background-color:#fbeeb8;">扫清你的数据库系统盲区</span> </h4> <h4 style="font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;"><span style="color:#e03e2d;">真题阶段</span></span><span style="font-size:14px;">为你提供</span><span style="font-size:14px;background-color:#fbeeb8;">解题思路</span><span style="font-size:14px;">,培养你的</span><span style="font-size:14px;background-color:#fbeeb8;">解题思维</span><span style="font-size:14px;">,同时</span><span style="font-size:14px;background-color:#fbeeb8;">点明考点</span><span style="font-size:14px;">,结合文档进行重点解读,加深你的印象.</span> </h4> <h4 style="font-weight:500;font-size:1.5rem;font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;background-color:#ffffff;text-align:center;"> <span style="font-size:14px;color:#3598db;">只为你的高分,我们交个朋友!让每位学生都可以学的起!!</span> </h4> <p> <span style="font-size:14px;color:#3598db;"><img src="https://img-bss.csdnimg.cn/202103040423318088.png" alt="" width="788" height="450" /></span> </p>
©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值