Design pattern attempts (strategy mode, proxy mode, release mode subscribers, duty chain) --- js achieve

　　　Strategy Mode: personal feeling is simply different methods to encapsulate external exposure to a single entrance, so easy to use a different logic.

class choiceItem {
    static getMoney(type, base) {
        switch(type) {
            case 's' : 
                return this.sType(base);
            case 'a' : 
                return this.aType(base);
            case 'b' : 
                return this.bType(base);
        }
    }
    static sType(base) {
        return 6*base; 
    }
    static aType(base) {
        return 4*base;    
    }
    static bType(base) {
        return 2*base;
    }
}
console.log(choiceItem.getMoney('s', 1000));

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

　　　Proxy mode: as more classic mode applications it is not difficult, the principle is probably commissioned by the other party to do something. This can increase some of the other judge, that is to say without modifying the original logic of the premise has added certain features, such as the most classic images proxy cache.

class imgLoad{
  constructor(url, loUrl, dom, proxy) {
    this.url = url;
    this.proxy = proxy;
    this.dom = dom;
    this.loUrl = loUrl;
    if(this.proxy) {
      this.isIma = this.isImage();
      this.proxyIma = this.proxyImage();
      this.proxyIma.setSrc.call(this, this.url);
    } else {
      this.isIma = this.isImage();
      this.isIma.setSrc.call(this, this.url);
    }
  }
  isImage () {     //   normal image addition region 
    const IMG = new new Image ();
     the this .dom.appendChild (IMG);
     return {
      setSrc(url) {
        img.src = url;
      }
    }
  }
  proxyImage () {   //   cache images 
    const img = new new Image ();
    img.onload = () => {
      this.isIma.setSrc(this.url);
    }
    return {
      setSrc: function(url) {
        img.src = url;
        this.isIma.setSrc(this.loUrl);
      }
    }
  }
}

new imgLoad('http://ali-static.game.yximgs.com/bs2/fes/game_1571312642677_.png', 'http://ali-static.game.yximgs.com/bs2/fes/game_1571311087230_.png', document.body, true);

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

　　Posted Subscriber Model: js is actually in the event, registering an event, then trigger at a particular point in time, when a lot of the framework uses have taken advantage of this approach, such as the time between vue component method is actually bottoming this effect is the release mode subscribers generated.

class Event {
    constructor() {
        this.eventList = {};
    }

    on(type, fn) {
        if(!this.eventList[type]) {
            this.eventList[type] = [];
        }
        this.eventList[type].push(fn);
    }

    emit() {
        const type = Array.prototype.shift.call(arguments);
        const arr = this.eventList[type];
        for(let i in arr) {
            arr[i].apply(arr[i], arguments);
        }
    }
}

const ev1 = new Event();

ev1.on('ceshi', function(a,b,c) {
    console.log(a);
    console.log(b);
    console.log(c);
})

ev1.emit ( 'ceshi', '1111', '2222', '3333');

　　Note that the code above is not actually fully realized on, emit triggered if the trigger words before on the error occurs. As the fault tolerance can emit each time the trigger if you do not exist, save it in a queue, and then on the register is to check whether there is the new, then triggered, of course, this is just simple logic, which certainly also include more variety of fault-tolerant. This is not to say.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

　　Chain of Responsibility pattern: a very simple to understand, implement a little trouble mode. This mode is mainly used will be similar, but different responsibilities codes separately. The core is that each method handle their current stage, we do not care about the specific content of the next method of treatment. A plurality of judgment differentiation using chaining.

　　For example, we want to extract 166 dollars. Well first of all it is to deduct the money in denominations of $ 100, then deduct denominations of 50, and so on until all the money into different denominations calculate the cash spit.

moneySize {class // generate different money denominations 
  constructor (size) {
     the this .size = size;
     the this .next = null ;
  }
  getMoney(money) {
    const floorMoney = Math.floor(money / this.size);
    if(floorMoney > 0) {
      the console.log ( the this .size + 'element: Here ejection' * + floorMoney the this .size);
      money = money - (floorMoney*this.size);
    }
    money>0 && this.next && this.next.getMoney(money);
  }
  setNext(next) {
    this.next = next;
  }
}

the ATM {class    // ATM machine, the main chain of responsibility of stitching, and setting the amount of the 
  constructor () {
     the this .money100 = new new moneySize (100 );
     the this .money50 = new new moneySize (50 );
     the this .money20 = new new moneySize (20 is );
     the this .money10 = new new moneySize (10 );
     the this .money1 = new new moneySize (. 1 );

    this.money100.setNext(this.money50);
    this.money50.setNext(this.money20);
    this.money20.setNext(this.money10);
    this.money10.setNext(this.money1);

    this.first = this.money100;
  }

  setMoney(money) {
    this.first.getMoney(money);
  }
}

const atm = new ATM();

atm.setMoney(166);

　　It should be noted that, although unlimited duty chain stitching. But result in larger waste when dealing with, for example, suppose we want to get 6 dollars, then it will be wasted computing early 100,50 denomination, etc., and ultimately determine the amount of processing in $ 1. So this in itself is a waste of existence, so use need to pay attention to this.