JS设计模式之观察者模式

观察者模式，即发布与订阅模式，实现一对多的一种关系模式，当一种对象接受信号时其他所有依赖均有行为。我们在写code的时候总是会去自定义一些事件，这就是观察者常常使用的地方：

JS中的观察者模式应用：
```
var

　　dom = document.getElementById('demo');

dom.addEventListener('click',function(){

　　console.log('demo is running.');

});
```
利用addEventListener添加一个click事件，然后点击Dom元素的时候触发这个click事件执行回调函数。

Jquery中的观察者模式应用：

var

　　dom = $('#demo');

dom.on('emit', function(){

　　console.log('demo is running');

});

dom.trigger('emit');

利用jquery中on来注册个事件，当trigger触发的时候执行回调函数。

nodejs中观察者模式应用：

var

    EventEmitter = require('events').EventEmitter,

    event = new EventEmitter();

event.on('demo', function() {

    console.log('demo is running');

});

setTimeout(function() {

    event.emit('demo');

}, 1000);

原理都是一个，定义事件与回调函数，然后触发事件执行回调函数。

观察者模式的具体实现(个人理解)：

var

    event = {

        on: function (eventname, callback) {

            if (!this.handler) {

                this.handler = {};

            }

            if (!this.handler[eventname]) {

                this.handler[eventname] = [];

            }

            this.handler[eventname].push(callback);

        },

        emit: function (eventName) {

            var

                handlers = this.handler[eventName];

            for (var i in handlers) {

                if (handlers.hasOwnProperty(i)) {

                    handlers[i]();

                }

            }

        }

    }

event.on('demo', function () { console.log('demo is running') });

$('#demo').click(function () {

    event.emit('demo');

})

其实原理很简单，我们的目标是什么？当然是调用函数，但是怎么调呢~多个函数怎么一起调用呢？我们可以将所有函数放在一个数组里，然后调用循环这个数据调用数据内的每一项不就达到目的了吗，这就是观察者的实现方式，数组名就是注册的事件名，数组中的每一项就是事件对应的回调函数喽~是不是so easy。

巴特西

JS设计模式之观察者模式

最新文章

热门文章