zoukankan      html  css  js  c++  java
  • 实现观察者模式

    一、观察者模式

          一对多的一种模式,当分发一个事件时,可以触发多个相关依赖。

    二、用观察者模式实现一个简单的vue的bus.$emit/bus.$on

    methods: {
        test() {
          let bus = this.Event()
          bus.$on('click0', function(value) {
            console.log("我是第一个click0:",value)
          })
          bus.$on('click0', function(value) {
            console.log('我是第二个click0:',value)
          })
          bus.$on('click1', function(value) {
            console.log("click1:",value)
          })
          bus.$on('click2', function(value) {
            console.log("click2:",value)
          })
    
          bus.$emit('click0', '我是click0')
          bus.$emit('click1', '我是click1')
          bus.$emit('click3', '我是没有订阅的click3')
        },
    
        Event() {
          let $on, $emit, obj={}
          $on = (key, fun) => {
            let stack, _ref //stack是盒子
            stack = (_ref = obj[key]) ? _ref : (obj[key] = [])
            return stack.push(fun)
          }
    
          $emit = (key, value) => {
            let fn, stack, _i, _len, _ref
            stack = (_ref = obj[key]) ? _ref : (obj[key] = [])
            for (_i = 0, _len = stack.length; _i < _len; _i++) {
              fn = stack[_i]
              //函数默认return false
              if (fn.call(this, value) === false) {
                return false
              }
            }
          }
    
          return {
                  $on: $on,
                  $emit: $emit
                }
        },
      },
    

      参考资料:

          观察者模式和订阅-发布模式的区别:https://juejin.im/post/5a14e9edf265da4312808d86

          观察者模式:http://www.alloyteam.com/2012/10/commonly-javascript-design-pattern-observer-mode/

  • 相关阅读:
    mysql timestamp自动更新 简单
    vim中执行shell命令小结 简单
    Memcached常用资料 简单
    linux bash的命令行操作 简单
    如何调研 简单
    Linux 任务 jobs 简单
    shell相关命令效率 简单
    shell命令学习 简单
    线段树 区间更新(hdu1698) 区间合并(poj3667)
    hdu 1166 敌兵布阵 (树状数组)
  • 原文地址:https://www.cnblogs.com/yy95/p/9885623.html
Copyright © 2011-2022 走看看