js设计模式

1.单例模式

class SingleObject {}

SingleObject.getInstance = (function(){
  let instance
  return function() {
    if (!instance) {
      instance = new SingleObject()
    }
    return instance
  }
})()

let a = SingleObject.getInstance()
let b = SingleObject.getInstance()

console.log(a === b)

2.代理模式

1. Object.defineProperty()

let obj = {
  name: 'zzw'
}
let val = obj.name
Object.defineProperty(obj, 'name', {
  set(value) {
    val = value
    return value
  },
  get() {
    return val
  }
})

console.log(obj.name)

2. proxy代理

let star = {
  name: 'yanyongchao',
  age: 23
}

let agent = new Proxy(star, {
  get(target, key) {
    return target[key]
  },
  set(target, key, value) {
    target[key] = value
  }
})

console.log(agent)

3.工厂模式

class Product {
  constructor(name) {
    this.name = name
  }
  fun1 () {
    console.log(this.name)
  }
}

function creator (name) {
  return new Product(name)
}

let p1 = creator('p1')
let p2 = creator('p2')

p1.fun1()
p2.fun1()

3.装饰器模式

1. 装饰类

@testable
class Person {}

function testable(target) {
  target.testable = true
}

console.log(Person.testable)

2. 装饰方法

function readonly (target, name, descriptor) {
  console.log(target, name, descriptor)
  descriptor.writable = false
  return descriptor
}

class Person {
  constructor () {
    this.firstname = 'zz'
    this.lastname = 'cc'
  }
  @readonly
  say () {
    return `${this.firstname} - ${this.lastname}`
  }
}

let p = new Person()

p.say = function() {
  console.log(12)
}

观察者模式

class Subject {
  constructor() {
    this.state = 0
    this.observers = []
  }
  getState() {
    return this.state
  }
  setState(state) {
    this.state = state
    this.notifyAllObservers()
  }
  notifyAllObservers() {
    this.observers.forEach(observer => {
      observer.update()
    })
  }
}

class Observer {
  constructor(name, subject) {
    this.name = name
    this.subject = subject
    this.subject.observers.push(this)
  }
  update() {
    console.log(this.name)
  }
}

let s1 = new Subject()

let o1 = new Observer('o1', s1)

s1.setState('123')