• 前端常用设计模式


    前端常用设计模式

    GoF23
    • 一种思维,一种态度,一种进步
    创建型模式:
    • 单例模式、工厂模式、抽象工厂模式、建造者模式、原型模式。
    结构型模式:
    • 适配器模式,桥接模式,装饰模式,组合模式,外观模式,享元模式,代理模式。
    行为型模式:
    • 模板方法模式,命令模式,迭代器模式,观察者模式,中介者模式,备忘录模式,解释器模式,状态模式,策略模式,职责链模式,访问者模式。
    OOP七大原则

    ![image-20201010152004991](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201010152004991.png)

    前端常用五种设计模式有哪些?
    • 工厂模式
    • 单例模式
    • 代理模式
    • 观察者模式
    • 策略模式
    工厂模式

    ![image-20201010153737126](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201010153737126.png)

    ![image-20201010153932088](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201010153932088.png)

    抽象工厂模式

    ![image-20201010173344430](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201010173344430.png)

    单例模式

    核心作用:

    • 保证一个类只有一个实例,并且提供一个访问该实例的全局访问点

    常见场景:

    • Windows的任务管理器
    • Windows的回收站
    • 项目中,读取配置文件的类,一般也只有一个对象,没必要每次都去new对象读取
    • 网站的计数器一般也会采用单例模式,可以保证同步
    • 数据库连接池的设计一般也是单例模式
    • 在Servlet编程中,每个Servlet也是单例的
    • 在Spring中,每个Bean默认就是单例的
    代理模式

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

    代理模式最基本的形式是对访问进行控制,代理对象和另一个对象(本体)实现的是同样的接口。

    实际上工作还是本体在做,它才是负责执行所分派的任务的那个对象或类,代理对象所做的不外乎节制对本体的访问,代理对象并不会在另一对象的基础上添加方法或修改其方法,也不会简化那个对象的接口,它实现的接口与本体完全相同,所有对它进行的方法调用都会被传递给本体。

    总结:在上面的代码中,Proxy可以控制对真正被代理对象的一个访问。在代理模式中,比较常见的就是虚拟代理,虚拟代理用于控制对那种创建开销很大的本体的访问,它会把本体的实例化推迟到有方法被调用的时候。

    比如说,现在我们假设PublicLibrary的实例化很慢,不能在网页加载的时候立即完成,我们可以为其创建一个虚拟代理,让它把PublicLibrary的实例化推迟到必要的时候,比如说我们在前端中经常用到的图片懒加载,就可以用虚拟代理;

    观察者模式

    如果大家学过一些像vue,react这些框架,相信大家对观察者模式一定很熟悉,现在很多mvvm框架都用到了观察者模式这个思想,观察者模式又叫做发布—订阅模式。

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

    document.body.addEventListener("click", function(){
        alert("hello world")
    },false)
    document.body.click() // 模拟用户点击
    

    总结:在上面的例子中,需要监听用户点击 document.body 的动作,但是我们是没办法预知用户将在什么时候点击的,因此我们订阅了 document.body 的 click 事件,当 body 节点被点击时,body 节点便会向订阅者发布 "Hello World" 消息。

    策略模式

    策略模式指的是定义一些列的算法,把他们一个个封装起来,目的就是将算法的使用与算法的实现分离开来,避免多重判断条件,更具有扩展性。

    ![image-20201011203533533](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201011203533533.png)

    ![image-20201011203556813](/Users/zhoupanpan/Library/Application Support/typora-user-images/image-20201011203556813.png)

    总结:在上面的代码中,通过策略模式,使得客户的折扣与算法解藕,又使得修改跟扩展能独立的进行,不影到客户端或其他算法的使用。

    当我们的代码中有很多个判断分支,每一个条件分支都会引起该“类”的特定行为以不同的方式作出改变,这个时候就可以使用策略模式,可以改进我们代码的质量,也更好的可以进行单元测试。

    链接:https://www.jianshu.com/p/0753baddf75e

  • 相关阅读:
    cad是什么意思?教你快速把cad转换成pdf格式
    为什么街上的商贩更喜欢用微信支付,而不是支付宝,看完长知识了
    音乐剪辑软件怎么用?教你一个快速编辑音频的方法
    电脑如何录制视频?安利两种电脑录屏的方法
    被称为逆天改命的5大中国工程,曾轰动世界,你知道几个?
    如何使用音乐格式转换器?快速编辑音频文件的方法
    PPT结尾只会说“谢谢”?学会这些PPT结尾,观众主动为你鼓掌
    经典PHP面试题(冒泡排序),当场就被打脸,卧槽什么冒泡?为啥还排序?
    千万不要再搞混了,函数empty( var );输出的判断值是false : true
    PHP删除数组中空数组
  • 原文地址:https://www.cnblogs.com/zppsakura/p/13799152.html
Copyright © 2020-2023  润新知