JavaScript设计模式中的单一职责原则

单一职责原则（SRP）

一个对象/方法只做一件事情。就一个类而言，应该仅有一个引起它变化的原因

1. 一个方法有两个动机可以修改，那么这个方法就具有两个职责。如果一个方法承担了过多的指责，那么在需求的变迁过程中，需要改写这个方法的可能性就越大。当多个职责耦合在一起的时候，一个职责发生变化可能会影响到其他职责的实现。这种是低内聚高耦合和脆弱的设计。

SRP 原则

1. 一个对象（方法）只做一件事情。

2. SRP 原则在很多设计模式中都有广泛的运用，例如代理模式，迭代器模式、单例模式和装饰者模式。

   1. 代理模式

   2. 把添加 img 标签和预加载图片的职责分开放到两个对象中，这两个对象都只有一个被修改的动机。他们各自发生变化的时候，也不会影响到另外一个对象

      const myImage = (function () {
        const Image = document.createElement("img");
        document.body.appendChild(Image);
        return {
          setSrc: function (src) {
            Image.src = src;
          },
        };
      })();
      
      // 加一层代理，在图片加载前先展示 x.jpg
      const proxyImage = (function () {
        const img = new Image();
        img.onload = function (src) {
          myImage(this.src);
        };
        return function () {
          myImage("./logo192.png");
          img.src = src;
        };
      })();
      proxyImage(
        "http://a1.qpic.cn/psc?/V136LlQn4Btod3/ruAMsa53pVQWN7FLK88i5iAcMicwMv1z7.           3IKQFRFzr50QXCJ3qDREMjNkw3TsqT9lwVUntnOV*0H27hHUEP8nH1fGWVMHu4.OQLi1dRSE4!/c&ek=1&kp=1&pt=0&bo=VQhABlUIQAYWECA!&    tl=3&     vuin=1411818691&tm=1666198800&dis_t=1666199020&dis_k=424467f433b9c9b64c82c0846a57d281&sce=60-2-2&rf=0-0"
      );
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24

SRP 应该何时分离职责

1. 有两个职责同时发生变化，就没有必要分离。比如 ajax 请求的时候，创建 xhr 对象和发送 xhr 请求总是在一起，那么创建 xhr 对象和发送 xhr 请求就没有必要分离。
2. 两个职责已经被耦合在一起，但他们还没有发生改变的征兆，也没必要分离他们。

SRP 的优缺点

1. 优点
   1. 降低了单个类或者对象的复杂度，按照职责把对象分解成更小的粒度，有助于代码的复用。当一个职责需要变更的时候，不会影响到其他的职责。
2. 缺点
   1. 粒度分的细，会增加编写代码的复杂度，也会增加对象之间联系的难度。