这是部分设计模式的javascript实现例子参考。 我把代码放在：doterlin/js-design-pattern: javascript设计模式实现 (github.com)

我觉得直接看代码可能更好理解这些设计模式，在日常工作中，有些设计模式其实我们自己已经设计，或者在使用npm库的时候已经用到，比如: vue3的双向绑定使用的proxy，弹窗组件的单例模式。我们可以回顾和学习下方便巩固和更好的使用他们。

运行

可以按F12直接粘贴代码在控制台运行，或者在github下载代码直接点开index.html按F12查看控制台。

简单工厂模式

 // 简单工厂模式
    (function() {
      function Factory(career) {
        function User(career, work) {
          this.career = career;
          this.work = work;
        }
  
        let work;
        switch (career) {
          case '老师':
            work = '教书';
            break;
          case '学生':
            work = '学习';
            break;
        }
        return new User(career, work);
      }
  
      console.log('%cstart---简单工厂模式', 'color: blue;')
      const teacher = Factory('老师');
      const student = Factory('学生');
      console.log(teacher.career, teacher.work);
      console.log(student.career, student.work);
      console.log('%cend---简单工厂模式', 'color: red;')
    })()

工厂方法模式

// 工厂方法模式
    (function() {
      function Factory(career) {
        if(this instanceof Factory) {
          return new this[career]
        }
        return new Factory(career)
      }
      Factory.prototype = {
        teacher: function(carrer) {
          this.carrer = carrer
          this.carrerName = '老师'
          this.work = '教书'
        },
        student: function(carrer) {
          this.carrer = carrer
          this.carrerName = '学生'
          this.work = '学习'
        }
      }
  
      console.log('\n%cstart---工厂方法模式', 'color: blue;')
      const teacher = new Factory('teacher');
      const student = new Factory('student');
      console.log(teacher.carrerName, teacher.work);
      console.log(student.carrerName, student.work);
      console.log('%cend---工厂方法模式', 'color: red;') 
    })()

代理模式

// 代理模式, 以下演示的是缓存代理
  (function() {
    // 一个功能函数,返回所有参数的乘值
    function multiply(){
      if(!arguments.length) return
      let result = arguments[0]
      for(let i = 1; i < arguments.length; i++) {
        result = result * arguments[i]
      }
      return result
    }

    // 代理, 对上述的方法进行值缓存
    const cacheProxyMultiply = (function () {
      const cache = {}
      return function() {
        const cacheKey = Array.prototype.join.call(arguments, '*')
        console.log('目前缓存: ', cache)
        if(!cache[cacheKey]) {
          const result = multiply(...arguments)
          cache[cacheKey] = result
          return result
        }
        console.log(cacheKey + ' 有缓存结果: ', cache[cacheKey])
        return cache[cacheKey]
      }
    })()

    console.log('\n%cstart---代理模式', 'color: blue;')
    cacheProxyMultiply(10, 15, 75)
    cacheProxyMultiply(23, 35, 88)
    cacheProxyMultiply(23, 35, 88)
    console.log('%cend---代理模式', 'color: red;') 

观察者模式

(function() {
      class Subject {
        constructor () {
          this.observerList = []
        }

        addObserver(ob) {
          this.observerList.push(ob)
          return this
        }

        removeObserver(ob) {
          this.observerList = this.observerList.filter(item => ob.name !== item.name )
          return this
        }

        notify(message) {
          this.observerList.forEach(function(ob) {
            ob.getNotify(ob.name + '观察到： ' + message)
          })
        }
      }

      class Observer {
        constructor (name) {
          this.name = name
        }
        getNotify(msg) {
          console.log('get message :', msg)
        }
      }

      console.log('\n%cstart---观察者模式', 'color: blue;')
      const subject = new Subject()
      const obA = new Observer('观察者A')
      const obB = new Observer('观察者B')
      subject.addObserver(obA).addObserver(obB).notify('第一次发布！')
      subject.removeObserver(obA).notify('第二次发布！')
      console.log('%cend---观察者模式', 'color: red;') 
    })()

订阅发布模式

// 订阅发布模式
    (function() {

      // 订阅中心，作为第三方
      class SubscriptionCenter {
        constructor() {
          this.publisherList = []
          this.subscriberList = []
        }

        addPublisher(publisher) {
          this.publisherList.push(publisher)
        }

        addSubscriber(subscriber) {
          this.subscriberList.push(subscriber)
        }

        notify(topicType, content, pulisherName) {
          // 找出该主题的订阅者和发布内容
          const targetSubscriber = this.subscriberList.filter(item => item.topics.includes(topicType))
          targetSubscriber.forEach(item => item.getTopic(topicType, content, pulisherName))
        }
      }

      // 发布者
      class Publisher {
        constructor(name, subscriptionCenter) {
          this.name = name
          this.subscriptionCenter = subscriptionCenter
          this.subscriptionCenter.addPublisher(this)
        }

        publish(topic, content) {
          this.subscriptionCenter.notify(topic, content, this.name)
        }
      }

      // 订阅者
      class Subscriber {
        constructor(name, subscriptionCenter) {
          this.name = name
          this.subscriptionCenter = subscriptionCenter
          this.topics = [] //订阅主题
          this.subscriptionCenter.addSubscriber(this)
        }

        // 订阅主题
        subscribe(topics) {
          this.topics = this.topics.concat(topics)
        }

        // 收到订阅
        getTopic(topic, content, pulisherName) {
          console.log(`订阅者‘${this.name}’ 收到来自 '${pulisherName}' 的订阅主题'${topic}'，订阅内容'${content}'`)
        }
      }

      console.log('\n%cstart---订阅发布模式', 'color: blue;')
      const TYPE_A = '小说'
      const TYPE_B = '电影'
      const TYPE_C = '动漫'

      const subscriptionCenter = new SubscriptionCenter()

      const publisherA = new Publisher('腾讯', subscriptionCenter)
      const publisherB = new Publisher('网易', subscriptionCenter)


      const subscriberA = new Subscriber('赵四', subscriptionCenter)
      const subscriberB = new Subscriber('张三', subscriptionCenter)

      // 订阅者订阅
      subscriberA.subscribe([TYPE_A, TYPE_B])
      subscriberB.subscribe([TYPE_A, TYPE_C])

      // 发布者发布
      publisherA.publish(TYPE_A, '腾讯小说A')
      publisherB.publish(TYPE_A, '网易小说A')
      
      publisherB.publish(TYPE_A, '网易小说B')
      publisherB.publish(TYPE_C, '网易动漫B')
      publisherA.publish(TYPE_B, '腾讯电影A')
      
      publisherB.publish(TYPE_C, '网易动漫C')
      publisherA.publish(TYPE_B, '腾讯电影B')

      console.log('%cend---订阅发布模式', 'color: red ;') 
    })()