這篇文章主要介紹了淺談Nodejs觀察者模式的相關資料,需要的朋友可以參考下
一、前言
Nodejs使用有些日子了,近來再回顧下其API、多使用新特性,以期有更高層次的掌握,本次API的總結區別於單純對英文版的漢化,會多做些擴展和自己的理解,希望對大家有所幫助,先從最核心的Events開始
Nodejs的Events實現了一種觀察者模式,其支援了Nodejs的核心機制,且http / fs / mongoose等都繼承了Events,可以添加監聽事件。這種設計模式在客戶端的元件程式設計想法中常會用到,我們先簡單了解下該模式。
首次接觸觀察者模式是在Extjs框架的Ext.util.observable源碼,那時剛接觸js,感覺這種模式很強大,也是我最早接觸到的設計模式,後來在underscore.js原始碼裡也有看到,且後者實現更簡捷、優雅,我編寫元件時也基本上是依照這種想法。
觀察者模式就是為某一物件添加一監聽事件,如on('show', callback),由該物件在符合條件如show時自行觸發,瀏覽器本身已經為dom實現了監聽機制。
如我們為input添加keyup監聽,目的是為了輸出其value
#$( 'input' ).on( 'keyup', function(){ console.log( this.value ); } );
這樣輸入內容時會自行在日誌中輸出其value。
但我們自己做一個元件如Dialog,如何監聽最常用的show / hide事件呢?
初級的做法是實例化時直接將回呼配置進去,如
var dialog = new Dialog({ content: '这里是弹出框的内容', show: function(){ console.log( '当弹框时输出此段内容' ); } });
這樣也可以用,不過顯然不夠靈活,如何將dialog做的像input那樣可隨時添加事件呢
二、觀察者模式實作
先實作Events對象,這裡提供基礎的監聽on和觸發emit,事件是以json形式壓棧在對象的_events裡
var Events = { on: function( name, callback){ this._events = this._events || {}; this._events[ name ] = this._events[ name ] || []; this._events[ name ].push( callback ); }, emit: function( name ){ this._events = this._events || {}; var args = Array.prototype.slice.call( arguments, 1 ), me = this; if( this._events[ name ] ){ $.each( this._events[ name ], function( k, v ){ v.call( me, args ); } ) } } }
再抽象化一個函數用來為物件複製屬性
function extend( source ){ var args = Array.prototype.slice.call( arguments, 1 ); for( var i = 0, parent; parent = args[i]; i++ ){ for( var prop in parent ){ source[ prop ] = parent[ prop ]; } } }
實作一個Dialog,
只實作建立; method : show / hide; event: show / hide;
看效果時,加上這段樣式
.dialog{ position: fixed; top: 50%; left: 50%; margin: -50px 0 0 -100px; width: 200px; height: 120px; background: #fff; border: 5px solid #afafaf; }
實作元件
var Dialog = function( config ){ this.config = config; this.init( this.config ); };
擴充屬性
extend( Dialog.prototype, { init: function( config ){ this.render( config ) }, render: function( config ){ this.el = $( '<p>' ).addClass( 'dialog' ); this.el.html( config.content ); $( 'body' ).append( this.el ); }, show: function( param ){ this.el.fadeIn(); this.emit( 'show', param ); }, hide: function( param ){ this.el.fadeOut(); this.emit( 'hide', param ); } }, Events );
#產生實例,並為其新增三個show及hide監聽事件
var dialog = window.dialog = new Dialog({ content: 'dialog one' }); dialog.on( 'show', function( txt ){ console.log( 'dialog show one ' + txt ); } ); //do something dialog.on( 'show', function( txt ){ console.log( 'dialog show two ' + txt ); } ); //do something dialog.on( 'show', function( txt ){ console.log( 'dialog show three ' + txt ); } ); //do something dialog.on( 'hide', function( txt ){ console.log( 'dialog hide one ' + txt ); } ); //do something dialog.on( 'hide', function( txt ){ console.log( 'dialog hide two ' + txt ); } ); //do something dialog.on( 'hide', function( txt ){ console.log( 'dialog hide three ' + txt ); } );
我們分六次新增了六個不同的show事件和hide事件。
執行 dialog.show() 時就會輸出三個對應的日誌。新增的事件保存在dialog._events裡,如圖
新增的三個show都輸出成功,事件保存在_events屬性裡
nodejs Events也是實現了這個過程。
三、結構
var Events = require( 'events' ); console.log( Events ); /* 输出如下数据,可以看出 Events指向其EventEmiter { [Function: EventEmitter] EventEmitter: [Circular], usingDomains: [Getter/Setter], defaultMaxListeners: 10, init: [Function], listenerCount: [Function] } */ var myEmitter = new Events(); console.log( myEmitter ); /* { domain: null, _events: {}, //可以看到实例本身也有_events属性,添加的监听的事件就保存在这里 _maxListeners: undefined} */ console.log( myEmitter.__proto__ ); /* { domain: undefined, _events: undefined, _maxListeners: undefined, setMaxListeners: [Function: setMaxListeners], emit: [Function: emit], addListener: [Function: addListener], on: [Function: addListener], once: [Function: once], removeListener: [Function: removeListener], removeAllListeners: [Function: removeAllListeners], listeners: [Function: listeners] } */ myEmitter.on( 'show', function( txt ){ console.log( 'one ' + txt )}) myEmitter.on( 'show', function( txt ){ console.log( 'tow ' + txt )}) myEmitter.on( 'hide', function( txt ){ console.log( 'one ' + txt )}) myEmitter.emit( 'show', 'show' ); myEmitter.setMaxListeners( 10 ); console.log( myEmitter ); /* { domain: null, _events: { show: [ [Function], [Function] ], hide: [Function] }, //添加后的事情,以json形式存放 _maxListeners: 10 } */
#四、API
其提供的method有on,是addListener的簡寫都是為實例添加監聽事件,其它屬性也都顧名思義,就簡單說明下
property _events: undefined, //以压栈形式存放on进来的事件 _maxListeners: undefined //设置最大监听数,超出提warn ---------------------------------------------------------------------------------------------------------------- method setMaxListeners: [Function: setMaxListeners], /*设置私有属性_maxListeners的值,默认Events会在当某监听事件多于10个时发现警告(见上面Events.defaultMaxListeners),以防止内存泄露,如 (node) warning: possible EventEmitter memory leak detected. 11 show listeners added. Use emitter.setMaxListeners() to increase limit. 但这只是个友好的提醒,可以通过设置最大监听数来规避这个问题 myEmitter.setMaxListeners( 20 ); */ emit: [Function: emit], /*触发监听事件 emitter.emit( event, [arg1], [arg2], ... ) 如myEmitter.on( 'show', 'prompt content' ); 参数1为事件名,参数二供on回调里的参数 */ addListener: [Function: addListener], /* 添加监听事件 emitter.addListener( event, listener ); 如 myEmitter.addListener( 'show', function( txt ){ console.log( txt ) } ); 参数一是事件名,参数二是对应的回调,回调里的参数就是 emit里的arguments.prototype.slice.call(1); */ on: [Function: addListener], /* 是addListener简写 */ once: [Function: once], /* 作用同 on,不过emit一次后就失效了 emitter.once( event, listener ); 如 myEmitter.once( 'show', function( txt ){ console.log( txt ) } ); 当myEmitter.emit执行第二次时没有输出 */ removeListener: [Function: removeListener], /* 移除指定事件的指定回调,此时回调不能再用匿名函数。 emitter.removeListener( event, listener ); 如 function show( txt ){ console.log( txt ) }; myEmitter.on( 'show', show ); console.log( myEmitter._events ); // { show: [ Function: show ] } myEmitter.removeListener( 'show', show ); console.log( myEmitter._events ); // {} */ removeAllListeners: [Function: removeAllListeners], /* 删除指定事件的所有回调 emitter.removeAllListeners( [ event ] ); 如 myEmitter.removeAllListeners( 'show' ); //删除所有show监听 myEmitter.removeAllListeners(); //删除所有监听 */ listeners: [Function: listeners] /* 查看指定监听 emitter.listeners( event ); 如 myEmitter.listeners( 'show' ); //返回一个数组 同我们前面使用的 myEmitter._events[ 'show' ] */ 另外Events类本身提供了一个方法 Events.listenerCount( emitter, event ); 获取指定实例下指定监听数 如 Event.listenerCount( myEmitter, 'show' ) ----------------------------------------------------------------------------------------------- 还有两个event newListener / remoteListener,分别应用于为实例添加( on / once )和删除( removeListener ) 操作。 emitter.on( event, listener ); emitter.on( 'newListener', function( event, listener ){ console.log( emitter.listeners( 'show' ) ); //注意,此时监听还并没有添加到 emitter.listeners console.log( arguments ); }); emitter.on( 'removeListener', function(){ console.log( emitter.listeners( 'show' ) ); console.log( arguments ); })
#五、應用
使用Events,通常就直接實例化即可,如上面API部分所例
不過,如果我們在nodejs端也實作了一個元件,如前面的Dialog,如何讓Dialog也具備Events的功能呢?可以用Extjs實作的extend方案
建立Dialog建構器
#var Dialog = function(){ //do something } //抽象apply函数,提供属性的深度复制,同上面的extend function apply( source ){ var args = Array.prototype.slice.call( arguments, 1 ); for( var i = 0, parent; parent = args[i]; i++ ){ for( var prop in parent ){ source[ prop ] = parent[ prop ]; } } } //抽象extend函数,用于实现继承 var extend = function(){ // inline overrides var io = function(o){ for(var m in o){ this[m] = o[m]; } }; var oc = Object.prototype.constructor; return function(sb, sp, overrides){ if(typeof sp == 'object'){ overrides = sp; sp = sb; sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; } var F = function(){}, sbp, spp = sp.prototype; F.prototype = spp; sbp = sb.prototype = new F(); sbp.constructor=sb; sb.superclass=spp; if(spp.constructor == oc){ spp.constructor=sp; } sb.override = function(o){ apply(sb, o); }; sbp.superclass = sbp.supr = (function(){ return spp; }); sbp.override = io; apply(sb, overrides); sb.extend = function(o){return extend(sb, o);}; return sb; }; }(); //将Events属性继承给Dialog Dialog = extend( Dialog, Events ); //为Dialog新增 method show,其内触发 event show Dialog.prototype.show = function( txt ){ this.emit( 'show', txt ); } var dialog = new Dialog(); //添加监听事件show dialog.on( 'show', function(txt){ console.log( txt )}); //执行method show时,就会触发其内定义的show events,输出 this is show dialog.show( 'this is show' );
這樣就為一個元件實作了Events機制,當呼叫method時,會觸發event
六、總結
nodejs提供了很好的監聽機制,也應用在其所有模組,其支援了nodejs最特色的I /O模式,如我們啟動http服務時會監聽其connect / close,http.request時會監聽data / end等,了解監聽機制對學習理解nodejs的基礎,也對提升程式設計思想有益。
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
#
以上是關於Nodejs觀察者模式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!