js设计模式总结 —— 常用六种

工厂模式

在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。

class Product {
        constructor(name) {
          this.name = name
        }
        init() {
          alert('init')
        }
        fun1() {
          alert('fun1')
        }
        fun2() {
          alert('fun2')
        }
      }

      class Creater {
        create(name) {
          return new Product(name)
        }
      }

      // 测试
      let creater = new Creater()
      let p1 = creater.create('bb')
      p1.init()
      p1.fun1()

单例模式

这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。

class SingleObject {
      login() {
        console.log('login...')
      }
    }

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

    let obj1 = SingleObject.getIns

适配器模式

适配器模式（Adapter Pattern）是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，它结合了两个独立接口的功能。

 class Adaptee {
      specific() {
        return '国外'
      }
    }

    class Target {
      constructor() {
        this.adaptee = new Adaptee()
      }

      request() {
        let info = this.adaptee.specific()
        return `${info} -> 转化 -> 中国`
      }
    }

    let target = new Target()
    target.request()

装饰器模式 （结合到es7的装饰器）

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构，这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。

// readOnly （只读装饰器，不可更改
function readOnly(target, name, descriptor) {
      descriptor.writable = false
      return descriptor
      }

    class Person {
      constructor () {
        this.first = 'A'
        this.last = 'B'
      }

      @readOnly
      name() {
        return `${this.first} ${this.last}`
      }
    }

    let p = new Person()
    console.log(p.name()) // AB
    p.name = function () { // 报错
      alert(100)
      }

代理模式 （结合es6的proxy）

在代理模式中，我们创建具有现有对象的对象，以便向外界提供功能接口。一个类代表另一个类的功能

let star = {name: '马大大', age: 18, phone: '13149998888'}
      let agent = new Proxy(star, {
        get: function(target, key) {
          console.log('get =>', target, key)
        },
        set: function (target, key, value) {
          console.log('set =>', target, key, value)
          target[key] = value
          return target
        }
      })

      // console.log('star =>', star)
      // console.log('agent =>', agent)
      console.log(agent.name)
      agent.name = '666'
      console.log('agent =>', agent)

观察者模式

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知依赖它的对象。

// 主题，接收状态变化，触发每个观察者
    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()
        })
      }

      attach(observer) {
        this.observers.push(observer)
      }
    }

// 观察者，等待被触发
    class Observer {
      constructor(name, subject) {
        this.name = name
        this.subject = subject
        this.subject.attach(this)
      }

      update() {
        console.log(`${this.name} update, state: ${this.subject.getState()}`)
      }
    }

    let s = new Subject()
    let o1 = new Observer('o1', s)

    // 测试代码
let s = new Subject()
let o1 = new Observer('o1', s)
let o2 = new Observer('o2', s)
let o3 = new Observer('o3', s)

s.setState(1)
s.setState(2)
s.setState(3)