发表更新设计模式3 分钟读完 (大约506个字)0次访问

常见设计模式

SOLID 五大设计原则

  • S 单一职责原则

    一个程序只做好一件事，如果功能过于复杂就拆分开，每个部分保持独立

  • O 开放封闭原则

    对修改封闭，对扩展开放

  • L 李氏置换原则

    子类能覆盖父类

  • I 接口独立原则

    保持接口的单一独立，避免出现胖接口

  • D 依赖倒置原则

    面向接口编程，依赖于抽象而不依赖于具体。写代码时用到具体类时，不与具体类交互，而与具体类的上层接口交互。

常见的设计模式

工厂模式、单例模式、构造函数模式、建造者模式、代理模式、命令模式、观察者模式、适配器模式、职责链模式、装饰器模式、策略模式等

  • 工厂模式

    jquery、react createElement

  • 单例模式

    • 自定义事件 EventBus 全局唯一
    • Vuex Redux 的 store 全局唯一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class SingleTon {
  private constructor() {}

  private static instance: SingleTon | null;

  static getInstance(): SingleTon {
    if (SingleTon.instance === null) {
      SingleTon.instance = new SingleTon();
    }

    return SingleTon.instance;
  }
}
SingleTon.getInstance(); // 正确
SingleTon.instance; // 报错
new SingleTon(); // 报错

  • 策略模式

    • 定义一系列算法，将它们封装起来，目的就是将算法的使用和算法的实现分离开来
    • 策略类的实现由两部分组成
      • 策略类：封装具体算法实现
      • 环境类：接收请求，并把请求委托给一个策略类
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var obj = {
      A: function (salary) {
        return salary * 4;
      },
      B: function (salary) {
        return salary * 3;
      },
      C: function (salary) {
        return salary * 2;
      },
    };
    var calculateBouns = function (level, salary) {
      return obj[level](salary);
    };
    console.log(calculateBouns('A', 10000)); // 40000

  • 代理模式

    • 常用的场景 - 缓存代理 - 虚拟代理

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      // 缓存代理
      var proxyMult = (function () {
        var cache = {};
        return function () {
          var args = Array.prototype.join.call(arguments, ',');
          if (args in cache) {
            return cache[args];
          }
          return (cache[args] = mult.apply(this, arguments));
        };
      })();

      proxyMult(1, 2, 3, 4); // 输出:24
      proxyMult(1, 2, 3, 4); // 输出:24
      // 当第二次调用 proxyMult(1, 2, 3, 4) 时，本体 mult 函数并没有被计算，proxyMult 直接返回了之前缓存好的计算结果
#

评论

×