美文网首页
前端设计模式简单理解

前端设计模式简单理解

作者: 别闹__ | 来源:发表于2022-11-27 14:40 被阅读0次

    很长的一段时间,听到设计模式,就感觉是不明觉厉的东西,也不太清楚到底是些啥。慢慢的尝试去读懂它后,发现,原来它一直在我们身边。
    这段时间,看了下小册,有位大神出的设计模式核心原理,自己也动手整理了下,感谢!

    先简单的上自己整理的一张图


    image.png

    工厂模式

    工厂模式就是将创建对象的过程单独封装,然后实现无脑传参

    抽象工厂

    详情看脑图,基本思想是 围绕一个大的场景,分开创建一些小的工厂,来达到需求

    单例模式

    核心思想就是,不管我们尝试去创建多少次,它都只给你返回第一次所创建的那唯一的一个实例

    原型模式

    原型模式是一种编程范式,就是基于原型链的继承,js面向对象系统实现的根基

    装饰器模式

    装饰器模式,又名装饰者模式。它的定义是“在不改变原对象的基础上,通过对其进行包装拓展,使原有对象可以满足用户的更复杂需求”

    适配器模式

    就是把一个类的接口变换成客户端所期待的另一种接口,帮我们解决兼容问题

    代理模式

    看脑图解释

    策略模式

    这种模式,对大家培养良好的编码习惯和重构能带来很大的帮助,简单来说呢,就是对于方法中的,一堆堆的if, 我们可以拆分成一个个的方法, 用对象包裹起来,然后实现调用就好了,举个简单的例子

     const methodList = {
            [ShipMethod.PickUp]: () => {
              return !isPickUp;
            },
            [ShipMethod.ShipToMe]: () => {
              return storeOnly;
            },
            [ShipMethod.SDD]: () => {
              return sameDayDelivery
            },
          };
    methodList[shipMethod]();
    

    状态模式

    允许一个对象在起内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类
    其实就是基于策略模式,添加了一个状态控制,根据状态,调用不同的方法

    观察者模式

    观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个目标对象,当这个目标对象的状态发生变化时,会通知所有观察者对象,使它们能够自动更新。 —— Graphic Design Patterns

    迭代器模式

    迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示。 ——《设计模式:可复用面向对象软件的基础》
    详细可以去了解es6 的迭代器的实现原理

    相关文章

      网友评论

          本文标题:前端设计模式简单理解

          本文链接:https://www.haomeiwen.com/subject/zqtkfdtx.html