JS 常见知识点(设计模式)

概念

• 是一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结

  • 为什么要用？
    • 为了代码的可重用性、让代码更容易被他人理解、保证代码的可靠性。设计模式使代码的编写真正的工程化

常用设计模式

• 构造器模式，模块化模式，暴露模块模式，单例模式，中介者模式，原型模式，命令模式，外观模式，工厂模式，Mixin模式，装饰模式，亨元(Flyweight)模式，MV*模式，组合模式，适配器模式，外观模式，观察者模式，迭代器模式，惰性初始模式，代理模式，建造者模式，…

• 设计模式是在面向对象编程中被使用

  • 面向对象：内功
  • 设计模式：招式

工厂模式

• 批量创建对象

• 特点：原料对象，属性或方法的加工，返回

• 语法：

  • 构造函数创建对象

        function Fn(){
            this.name = "admin"
        }
        var f = new Fn();
    

  • 封装成函数

        function fn(){
            var obj = {};
            obj.name = "admin";
            return obj;
        }
        var f = fn();
    

单例模式

• 只能创建单个对象，和工厂模式相对
• 特点：每次创建得到的都是同一个对象
• 单个对象
  • var obj = {};
• 利用构造函数实现单例模式

组合模式

• 将类或对象按照一定的关系，组合起来。可以实现批量执行的功能。
• 一般应用在动态的html结构上
• 组合成树状结构，对象节点
  • 根对象
  • 枝对象：具有子对象的节点
  • 叶对象：不具有子对象的节点
• 节省操作
• 性能消耗大
• 先创建一个，组合器
  • 在组合对象

适配器模式

• 适配器，将原本不符合接口的数据或信息，包装成符合的数据或信息，这个包装，就叫适配器

• 工厂：手机，平板（非通话）

  • 只有一个测试部门
  • 按照最全的功能测试
    • 手机：打电话，玩游戏，听音乐
    • 平板：玩游戏，听音乐

• 适配器的意义，多数应用在系统接口使用，也就是别人提供了一个功能，但要求传入一个A类型的参数，而我们手里的数据是B类型的，如果我们想使用这个功能。那么有两种解决办法：

  1. 把自己的原代码进行修改，让B类型改为A类型，这是非常蠢的做法。
  2. 我们把B类型的数据进行一个包装，让它看起来符合类型A，这个包装函数，就是适配器。

观察者模式（发布订阅者）

• 订阅者（观察方，接收对象）：接收信息
• 发布者（被观察方，主体对象）：发布信息
• js中的事件监听式绑定事件和触发

代理模式

• 代理，委托

• 系统功能A，系统调用，会产生数据的传输

• 给系统功能A做个代理，让系统调用代理

• 代理功能自定义完成，截获，另作他用，另行加工

• 事件委托

• 服务器代理

策略模式

• 功能的执行方式
• 策略，战术，计划
• 提前将可能发生的情况都考虑到位，并给出对应的解决方案
• 场景：
  • 轮播图中左右按钮的区分
  • 左右移动方向的确定
  • 小标被点击时的方向

MVC模式

- M：model：模型，数据
- V：view：视图
- C：ctrl：控制器

1. 用户/系统调用控制器发起指令
2. 控制器接收到指令，根据指令调用对应的模型
3. 模型返回数据，控制器保存数据
4. 控制器根据指令，调用对应的视图
5. 将保存的数据，发给视图
6. 视图做数据的渲染