设计模式--观察者模式

设计模式：

一、行为型-观察者模式

 

观察者模式（Observer）又被称为发布者-订阅者或消息机制。定义依赖关系，解决主体对象与观察者之间的功能的耦合

创建观察者模式

var Observer = (function(){
       let  _messages={} 
       return {
        regist: function(type, fn){ // type注册名字， fn传入的回调函数
          if(typeof _messages[type]==="undefined"){ //  type不存在的时候
            _messages[type]=[fn]  
          } else { // type已经存在也就是同名的时候入栈
            _messages[type].push(fn)
          }
          console.log("22regist", _messages)
        },
       
       }
    })()

注册事件

 Observer.regist('test', function(e){
       console.log('test####11',e, e.type, e.args.msg)
     })
     Observer.regist('test', function(e){
       console.log("test****", e, e.type, e.args,  e.args.msg)
     })
     Observer.regist('test22', function(e){
       console.log("test22****", e, e.type, e.args,  e.args.msg)
     })
     Observer.regist('test33', function(e){
       console.log("test33****",e, e.type, e.args)
     })

打印

 var Observer = (function(){
       let  _messages={}
       return {
        regist: function(type, fn){ // type注册名字， fn传入的回调函数
          if(typeof _messages[type]==="undefined"){ //  type不存在的时候
            _messages[type]=[fn]  
          } else { // type已经存在也就是同名的时候入栈
            _messages[type].push(fn)
          }
          console.log("22regist", _messages)
        },
         fire: function(type, args){ // type注册名字， args传的参数
          // console.log(!_messages[type],_messages[type], "fire11", type, args)
          if(!typeof _messages[type]){ // 
            return
          }
          let events={
            type: type,
            args: args || {}
          }
          for(let i =0; i<_messages[type].length;i++){
            _messages[type][i].call(this, events)
          }

         },
         remove: function(type, fn){
           if( _messages[type] instanceof Array){
             let i = _messages[type].length-1
             for(; i>=0; i--){
                _messages[type][i] === fn && _messages[type].splice(i, 1)
             }
            }

         }
       }
    })()

发布

     Observer.regist('test', function(e){ // 注册type为"test"的函数
       console.log('test####11',e, e.type, e.args.msg)
     })
     Observer.regist('test', function(e){ // 注册type为"test"的函数
       console.log("test****", e, e.type, e.args,  e.args.msg)
     })
     Observer.regist('test22', function(e){
       console.log("test22****", e, e.type, e.args,  e.args.msg)
     })
     Observer.regist('test33', function(e){
       console.log("test33****",e, e.type, e.args)
     })
     Observer.fire('test', {msg:'传递参数'})  // 发布者

注册type为"test"的函数都执行了

Observer.fire('test', {msg:'传递参数'})
Observer.fire('test22', {msg:'hello world'})

remove这个删除是删除不掉的， 删除的函数和注册的时候时候不是同一个回调函数这个需要注意的

 Observer.remove('test33', function(e){  
      console.log("test33****",e, e.type, e.args)
 })

可以打印看一下

        remove: function(type, fn){
           console.log(_messages[type].length, type, _messages[type], '-------remove-----', _messages[type] instanceof Array)
           if( _messages[type] instanceof Array){
             let i = _messages[type].length-1
             for(; i>=0; i--){
               console.log('remove22---i--', i, typeof _messages[type][i], _messages[type][i] === fn)
              _messages[type][i] === fn && _messages[type].splice(i, 1)
             }
           }
         }

对象间解耦

 // 学生类
      const Student= function(result){
       let that = this
        // 学生回答结果
        that.result = result;
        that.say = function(){ // 不能传参数
          console.log('student-学生回答结果-->',that.result)
        }
        
      }

      Student.prototype.answer = function(question){
        // console.log(this.result, '', question, '已经被注册')
        Observer.regist('question', this.say);
      
      }
      Student.prototype.sleep = function(question){
        // console.log(this.result, '', question, '已经被注销')
        Observer.remove('question', this.say);
       
      }

      const Teacher = function(){}
      Teacher.prototype.ask= function(question){
         console.log('问题是', question)
         // 发布提问消息
         Observer.fire('question')
      }

      let  student1= new Student('学生1回答的问题')
      let  student2= new Student('学生2回答的问题')
      let  student3= new Student('学生3回答的问题')

       student1.answer('学生1设计模式')
       student2.answer('学生2简述观察者模式')
       student3.answer('学生3简述历史至大米')

      //  student2.sleep('学生三睡着简述观察者模式')

       let teather = new Teacher()
       teather.ask('老师提问问题1: 什么是设计者模式')
       teather.ask('老师提问2: 简述观察模式')

student2.sleep('学生三睡着简述观察者模式')

-------陆续更新中--------