快捷導(dǎo)航

node.js如何自定義實(shí)現(xiàn)一個(gè)EventEmitter

更新時(shí)間：2021年07月16日 15:48:47 作者：loveStarBoys

我們了解到，Node采用了事件驅(qū)動(dòng)機(jī)制，而EventEmitter就是Node實(shí)現(xiàn)事件驅(qū)動(dòng)的基礎(chǔ)，本文主要介紹了node.js自定義實(shí)現(xiàn)EventEmitter，感興趣的可以了解一下

前言

最近做了商品批發(fā)的需求，需要針對(duì)不同的商戶選擇對(duì)應(yīng)的批發(fā)商品回顯到原來(lái)的界面。由于該項(xiàng)目的代碼是公司古董級(jí)別（這種代碼都是程序猿的痛），解決問(wèn)題的時(shí)候都是小心翼翼的。為了避免這種問(wèn)題減少外部依賴，手動(dòng)封裝事件派發(fā)的函數(shù)。

一、是什么

我們了解到，Node采用了事件驅(qū)動(dòng)機(jī)制，而EventEmitter就是Node實(shí)現(xiàn)事件驅(qū)動(dòng)的基礎(chǔ)
在EventEmitter的基礎(chǔ)上，Node幾乎所有的模塊都繼承了這個(gè)類，這些模塊擁有了自己的事件，可以綁定／觸發(fā)監(jiān)聽(tīng)器，實(shí)現(xiàn)了異步操作
Node.js 里面的許多對(duì)象都會(huì)分發(fā)事件，比如 fs.readStream 對(duì)象會(huì)在文件被打開(kāi)的時(shí)候觸發(fā)一個(gè)事件
這些產(chǎn)生事件的對(duì)象都是 events.EventEmitter 的實(shí)例，這些對(duì)象有一個(gè) eventEmitter.on() 函數(shù)，用于將一個(gè)或多個(gè)函數(shù)綁定到命名事件上

二、nodejs中EventEmitter使用方法

Node的events模塊只提供了一個(gè)EventEmitter類，這個(gè)類實(shí)現(xiàn)了Node異步事件驅(qū)動(dòng)架構(gòu)的基本模式——觀察者模式
在這種模式中，被觀察者(主體)維護(hù)著一組其他對(duì)象派來(lái)(注冊(cè))的觀察者，有新的對(duì)象對(duì)主體感興趣就注冊(cè)觀察者，不感興趣就取消訂閱，主體有更新的話就依次通知觀察者們

const EventEmitter = require('events')
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter()
function callback() {
    console.log('觸發(fā)了event事件！')
}
myEmitter.on('event', callback)
myEmitter.emit('event')
myEmitter.removeListener('event', callback);

三、實(shí)現(xiàn)過(guò)程

基本代碼如下所示：

//事件派發(fā)機(jī)制
(function() {
    var EventDispatcher = function() {
        var EventDispatcherClosure = function() {

        };
        EventDispatcherClosure.prototype = {
            /**
             * 注冊(cè)事件
             * @param {Object} key
             * @param {Object} fn
             */
            on: function(key, fn) {
                //獲取當(dāng)前的事件對(duì)象
                var curEvents = this._getCurEvents(key);
                //先檢查該事件是否已經(jīng)注冊(cè)過(guò)了
                var flag = false;
                for (var i = 0, len = curEvents.length; i < len; i++) {
                    if (curEvents[i].name == fn.name) {
                        //已經(jīng)出現(xiàn)過(guò)了,以最新注冊(cè)的函數(shù)為主
                        flag = true;
                        curEvents[i] = fn;
                        break;
                    }
                }
                if (!flag) {
                    curEvents[curEvents.length] = fn;
                }
                this._register(key, curEvents);
            },
            /**
             * 派發(fā)事件
             * @param {Object} key
             * @param {Object} data
             */
            dispatch: function(key) {
                //獲取當(dāng)前的事件對(duì)象
                var curEvents = this._getCurEvents(key);
                var shouldDispatch = true;
                for (var i = 0, len = curEvents.length; shouldDispatch && i < len; i++) {
                    try {
                        //獲取參數(shù)
                        var args = [];
                        for (var j = 1, len1 = arguments.length; j < len1; j++) {
                            args.push(arguments[j]);
                        }
                        shouldDispatch = curEvents[i].apply({}, args);
                    } catch (e) {
                        shouldDispatch = false;
                    }
                }
                return shouldDispatch;
            },
            remove: function(key) {
                if (this._getCurEvents(key)) {
                    delete EventDispatcherClosure.events[key];
                }
            },
            /**
             * 根據(jù)key獲取事件列表
             * @param {Object} key
             */
            _getCurEvents: function(key) {
                return EventDispatcherClosure.events[key] || [];
            },
            /**
             * 注冊(cè)時(shí)間
             * @param {Object} key
             * @param {Object} events
             */
            _register: function(key, events) {
                EventDispatcherClosure.events[key] = events;
            },
        };
        EventDispatcherClosure.events = {};
        return {
            create: function() {
                return new EventDispatcherClosure();
            }
        };
    };
    window.EventDispatcher = new EventDispatcher().create();
})();

首先定義一個(gè)全局變量的匿名函數(shù)，然后將全局變量掛在window上面，這樣可以讓我們?cè)陂_(kāi)發(fā)過(guò)程中的調(diào)用。在匿名函數(shù)的原型鏈上面添加事件分發(fā)、事件監(jiān)聽(tīng)、事件刪除等方法。

事件分發(fā)的調(diào)用

EventDispatcher.dispatch("test", obj)

事件監(jiān)聽(tīng)

EventDispatcher.on("test", function callback(obj) {
})

事件刪除

EventDispatcher.on("test")

代碼封裝的比較簡(jiǎn)單

到此這篇關(guān)于node.js如何自定義實(shí)現(xiàn)一個(gè)EventEmitter的文章就介紹到這了,更多相關(guān)node實(shí)現(xiàn)EventEmitter內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: