JavaScript设计模式学习

1. 观察者模式

当一个对象数据发生变化时，通知其他订阅该变化的对象，让其响应这种变化

观察者设计模式中主要区分两个概念：

观察者 ：指观察者对象，也就是消息的订阅者；

被观察者 ：指要观察的目标对象，也就是消息的发布者。

class Subject{ //发布者
  constructor(){
    this.subs = [];
 }
  addSub(sub){
    this.subs.push(sub);
 }
  notify(name){
    this.subs.forEach(sub=> {
        sub.update(name);
   });
 }
}
class Observer{//订阅者
  constructor(name, msg){
    this.name = name;
    this.msg = msg;
  }
  update(name){
    if(name===this.name){
        console.log(name + "该起床了");
    }
  }
}
var subject = new Subject();
var p1 = new Observer("a");
var p2 = new Observer("b");
subject.addSub(p1);
subject.addSub(p2);
subject.notify("a");

2. 工厂模式

工厂函数里包含了一个create方法，只需要实例化一次工厂函数，然后不断调用create方法即可生成Student实例。此方式只实例化一次工厂函数，但后续如果更改工厂Student的方法，会影响所有实例。既是优点也是缺点。

class Student {
    constructor(name, age) {
        this.name = name
        this.age = age;
    }
    study(){
        console.log("Student:"+this.name+"‘age is"+this.age)
    }
}
class FactoryCreator {
    create(name, age) {
        return new Student(name, age)
    }
}
let creator = new FactoryCreator();
// 通过工厂生成Student的实例
let s1 = creator.create('a',18)
s1.study();
let s2 = creator.create('b',20)
s2.study();

3. 单例模式

整个系统中只有一个实例，再次调用时判断是否已有该实例，若有，则直接返回。确保全局统一，节省资源。区别于工厂模式生产出来都是独立的实例，只是用于共同的方法等。单例模式就只有一个实例。

class Store {
    action() {
        console.log("vue store")
    }
}

Store.instance = (function(){
    let instance;
    return function() {
        if(!instance) {
            instance = new Store();
        }
        return instance;
    }
})();

let obj1 = Store.instance();
let obj2 = Store.instance();
obj1.action();
obj2.action();
console.log(obj1 === obj2) // true

4. 装饰器模式

顾名思义，在原先的对象基础上新增功能。

class Animal {
    eat() {
        console.log('I can eat')
    }
}

class AnimalDecorator {
    constructor(animal) {
        this.animal = animal;
    }
    eat() {
        this.animal.eat();
        this.drink()
    }
    drink() {
        console.log('I can drink')
    }
}

let obj = new Animal();
obj.eat();
let objDecorator = new AnimalDecorator(obj);
objDecorator.eat();

5. 代理模式

代理对象拥有原对象所有的方法和职能，但是可以在请求原对象前进行一些处理，然后再对原对象进行实例化。优点：可以额外处理一些特殊情况，然后对一些对象等到需要时再实例化，减少开销。

var obj = function(animal) {
    this.animal = animal;
    this.sendMsg = function(msg) {
        alert(animal + ' say ' + msg );
    }
}

// 代理对象
var objProxy = function(animal) {
    this.animal = animal;
    this.sendMsg = function(msg) {
        if (!msg) return;
        (new obj(animal)).sendMsg(msg);
    }
}

var proxy = new objProxy('dog');
proxy.sendMsg('wang wang wang')