这是我参与「第四届青训营 」笔记创作活动的第3天

经过阅读《不知道怎么封装代码？看看这几种设计模式吧！》，发现了设计模式的重要性，初步了解了工厂模式、建造者模式、单例模式、原型模式。在本片中对吴立宁老师讲解的多种设计模式的概念进行初步的记录，在后续的学习过程中不断对各种设计模式的内容进行完善

什么是设计模式？

设计模式就是软件设计中常见问题的解决方案，是历史经验的总结，并且与特定的语言无关

设计模式的分类--23中设计模式

创建型

如何创建一个对象

工厂模式，抽象工厂模式，建造者模式，单例模式，原型模式

结构型

如何灵活的将对象组装成较大的结构

配器模式，装饰器模式，代理模式，外观模式，桥接模式，组合模式，享元模式

行为型

负责对象间的高效通信和职责划分

策略模式，模板方法模式，发布订阅模式，迭代器模式，职责链模式，命令模式，备忘录模式，状态模式，访问者模式，中介者模式，解释器模式。

工厂模式

概念

向工厂一样可以批量生产出自己所需要使用的对象

简单代码实现

function factory(type) { 
    switch(type) { 
        case 'type1': 
            return new Type1(); 
        case 'type2': 
            return new Type2(); 
        case 'type3': 
            return new Type3(); 
    } 
}

浏览器中的设计模式

单例模式

定义 ： 全局唯一访问对象

应用场景 ： 缓存，全局状态管理等

发布订阅模式

定义 ：一种订阅机制，可在被订阅对象发生变化时通知订阅者。

应用场景 ： 从系统架构之间进行解耦，到业务中一些实现模式像邮件订阅，上线订阅等等，应用广泛。

JavaScript中的设计模式

原型模式

定义 ：复制已有对象来创建新的对象 ,其实可以理解为JS的原型链

应用场景 ：JS中对象创建的基本模式

代理模式

定义 ：可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理

应用场景 ：监控，代理工具，前端框架实现等等

迭代器模式

定义 ：在不暴露数据类型的情况下访问集合中的数据

应用场景 ：数据结构中有多重数据类型，列表，数等，提供通用操作接口

前端框架中的设计模式

代理模式

前端框架中对DOM操作的代理

graph TD
更改DOM属性--> 视图更新

graph TD
更改DOM属性--> 更新虚拟DOM-->  根据diff算法进行视图更新

组合模式

定义 ：可多多个对象组合使用，也可单个对象独立使用

应用场景 ： DOM,前端组件,文件目录,部门

总结

设计模式的作用

增加代码的可复用性，可维护性，可扩展性等等 提高写代码的效率