【JavaScript进阶学习】设计模式

设计模式

1. 设计模式：一套经过多人总结的，优化的，验证的，方便的，用来解决某种特定问题的固定模式

2. 设计模式的种类繁多，常见的有：构造器模式，模块化模式，暴露模块模式，单例模式，中介者模式，原型模式，命令模式，外观模式，工厂模式，Mixin模式，装饰模式，亨元(Flyweight)模式，MVC模式，MVP模式，MVVM模式，组合模式，适配器模式，外观模式，观察者模式，迭代器模式，惰性初始模式，代理模式，建造者模式

3. 单例模式：

   • 单个实例，实例，对象，单个对象
   • 在整个功能操作过程中，只存在一个对象，不允许出现多个对象
   • 不拘泥于某一种固定的写法，只能要做到↑↑↑，就是单例模式

4. 组合模式

   • 组合，将多个对象按照树状结构（DOM关系结构）的组织关系进行组合
   • 在动态的页面设计中，将每个元素节点都设计成对象，按照对应的关系进行组合，实现批量操作
     • 如果对某个父对象进行了某项操作，其所有的后代都会跟随操作
   • 将对象进行组合之后，根据关系，包含子对象的对象叫枝对象；不包含子对象的对象叫叶对象
   • 为了将对象进行组合，还需要提前准备一个组合器，用来组合对象
   • 为动态的html结构而生的。
   • 组合模式，节省了操作，浪费性能

5. 观察者模式

   • 发布订阅者模式，两个角色对象
   • 发布者：用来发布或更新信息
   • 观察者（订阅者）：接收到发布者发布或更新的信息后，做出对应的处理
   • 简单的广播通信，一个发布者，多个订阅者
   • 耦合低，订阅者可以随时加入或离开
   • 案例：
     • 自定义事件监听
     • 购物车：
       • 商品列表：点击添加商品
       • 车：显示商品
       • 弹出框：显示商品

6. 代理模式

   • 代理：代理帮我完成某件事情
   • 当无法或不方便直接完成某个功能时，需要由第三方程序，代理完成。
   • 案例
     • 事件委托：将原本要加给多个子元素的事件，添加给共同的现存的父元素
     • 解决跨域方式-服务器代理

7. 适配器模式

   • 适配器：将原本不符合要求的数据或信息，进行包装，包装后，看起来符合要求的规范，这一层包装，就叫适配器
   • 程序中，有一个A功能，需要接受a类型的数据
   • 但是目前我只有b类型的数据
   • 将b类型的数据，进行包装，让他看起来像a类型的数据，传给A功能
   • 案例：
     • 前后端交互只能交互字符，但现有一个对象数据
       • 将对象转成json，进行传输，到达另一端后，再将json转回对象
       • 完成数据传输，在这个过程中json就是适配器
     • 默认参数的处理
       • 将undefined处理成指定值

8. 抽象工厂模式

   • 抽象工厂：在工厂模式的基础上，对同批次对象的相同属性，再次进行抽象，形成更具体的工厂模式。
   • 在造车厂的基础上
     • 例如：造一批白色大众车
     • 例如：造一批红色比亚迪

9. 策略模式

   • 策略，A计划->B计划->C计划
   • 提前规定好不同的功能或计划，根据程序执行过程中可能会产生的而不同的信息，绝对执行不同的功能
   • 案例：
     • 分支结构
   • 扩展：不使用分支结构，实现策略模式
     • 利用对象的中括号语法，将条件值作为属性名，访问对应的功能

10. MVC模式（扩展）

    • M：model，模型
    • V：view，视图
    • C：control，控制器
    • 将一个项目或程序分成三层：模型层负责管理维护数据信息，视图层负责管理维护数据的渲染方式，控制器负责当前要获取哪个数据渲染在哪个视图中
    • 降低了程序中数据，视图之间的耦合，提高了可维护性，可复用性
    • 工作流程：
      • 控制器接收到程序指令后
      • 根据指令获取指定模型中的数据
      • 根据指令获取指定的视图
      • 将刚才获取到的数据，交给视图，负责渲染
      • 视图将接收到的数据，渲染

11. 工厂模式

    • 组成：原料，加工，出厂
    • 目的：批量创建同类型对象