当前位置：网站首页>6、 Observer mode

6、 Observer mode

2022-06-10 10:09:00 【Qwe7】

6、 ... and 、 Observer mode

The observer mode is also called publish subscribe mode or message mode . It is a very famous and important design pattern , This model generally defines a subject and many individuals , The main body here can be imagined as a message center , There are all kinds of news in it , Many individuals can subscribe to different messages , When the future news center releases a message , Individuals who have subscribed to him will wait for notification

1、 An example of the observer pattern

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    
    //  Message center 
    var msgCenter = (function () { 
        var _msg = {}; //  Store messages 
        /*
            var _msg = {
                'carInfo': [person1.alreadyRegister.carInfo, person2.alreadyRegister.carInfo, person3.alreadyRegister.carInfo, , person5.alreadyRegister.carInfo]
                'newInfo': [person1.alreadyRegister.newInfo, person2.alreadyRegister.newInfo, person3.alreadyRegister.newInfo, , person4.alreadyRegister.newInfo]
            }
        */
        return {
            //  For subscribing to a message 
            register: function(type, fn) { // fn  Callback function 
                if (_msg[type]) {
                    _msg[type].push(fn)
                } else {
                    _msg[type] = [fn]
                }
                
            },
            //  Used to post messages 
            fire: function(type, args) { // args  The information attached to the announcement 
                if (!_msg[type]) {
                    return
                } 
                var event = {
                    type: type,
                    args: args || {}
                }
                for(var i = 0; i < _msg[type].length; i++) {
                    _msg[type][i](event)
                }
            },
            //  Message for unsubscribing 
            cancel: function(type, fn) {
                if (!_msg[type]) {
                    return
                }
                for(var i = 0; i < _msg[type].length; i++) {
                    if (_msg[type][i] === fn) {
                        _msg[type].splice(i, 1)
                        return
                    }
                }
            }
        }
     })()

     function Person() {
         this.alreadyRegister = {};
     }

     Person.prototype.register = function(type, fn) {
         if (this.alreadyRegister[type]) {
             console.log(' You have subscribed to this message , Please don't subscribe again ')
         } else {
            msgCenter.register(type, fn);
            this.alreadyRegister[type] = fn
         }
     }
     Person.prototype.cancel = function (type) { 
         msgCenter.cancel(type, this.alreadyRegister[type])
         delete this.alreadyRegister[type]
      }

      var person1 = new Person()
      var person2 = new Person()
      var person3 = new Person()
      var person4 = new Person()
      var person5 = new Person()

      person1.register('carInfo', function (e) { 
          console.log('person1 Got about ' + e.type + ' The news of , The message is :' + e.args.info);
       })
      person1.register('newInfo', function (e) { 
          console.log('person1 Got about ' + e.type + ' The news of , The message is :' + e.args.info);
       })
      person2.register('carInfo', function (e) { 
          console.log('person2 Got about ' + e.type + ' The news of , The message is :' + e.args.info);
       })
      person2.register('newInfo', function (e) { 
          console.log('person2 Got about ' + e.type + ' The news of , The message is :' + e.args.info);
       })
      person3.register('carInfo', function (e) { 
          console.log('person3 Got about ' + e.type + ' The news of , The message is :' + e.args.info);
       })
      person3.register('newInfo', function (e) { 
          console.log('person3 Got about ' + e.type + ' The news of , The message is :' + e.args.info);
       })
      person4.register('carInfo', function (e) { 
          console.log('person4 Got about ' + e.type + ' The news of , The message is :' + e.args.info);
       })
      person5.register('newInfo', function (e) { 
          console.log('person5 Got about ' + e.type + ' The news of , The message is :' + e.args.info);
       })

       msgCenter.fire('carInfo', {info: ' New car launch !'})
       msgCenter.fire('newInfo', {info: ' So and so is here ！'})

       person1.register('carInfo', function(e) {
           console.log('test')
       })

       console.log('------------------')

       person1.cancel('carInfo')
       msgCenter.fire('carInfo', { info: ' Send another one ' })

    </script>
</head>
<body>
    
</body>
</html>

原网站

版权声明
本文为[Qwe7]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/161/202206100950548679.html

当前位置：网站首页>6、 Observer mode

6、 Observer mode

边栏推荐

猜你喜欢

随机推荐