淺談Nodejs觀察者模式
更新時間：2015年10月13日 08:58:58 投稿：hebedich
這篇文章主要介紹了淺談Nodejs觀察者模式的相關資料,需要的朋友可以參考下
一、前言
Nodejs使用有些日子了，近來再回顧下其API、多使用新特性，以期有更高層次的掌握，本次API的總結區(qū)別于單純對英文版的漢化，會多做些擴展和自己的理解，希望對大家有所幫助，先從最核心的Events開始
Nodejs的Events實現(xiàn)了一種觀察者模式，其支持了Nodejs的核心機制，且http / fs / mongoose等都繼承了Events，可以添加監(jiān)聽事件。這種設計模式在客戶端的組件編程思想里經(jīng)常會用到，我們先簡單了解下該模式。
首次接觸 觀察者模式是在Extjs框架的 Ext.util.observable源碼，那時剛接觸js，感覺這種模式很強大，也是我最早接觸到的設計模式，后來在 underscore.js 源碼里也有看到，且后者實現(xiàn)更簡捷、優(yōu)雅，我編寫組件時也基本是按照這種思想。
觀察者模式就是為某一對象添加一監(jiān)聽事件，如on('show', callback)，由該對象在符合條件如show時自行觸發(fā)，瀏覽器本身已經(jīng)為dom實現(xiàn)了監(jiān)聽機制。
如我們?yōu)閕nput添加keyup監(jiān)聽，目的是為了輸出其value
$( 'input' ).on( 'keyup', function(){
console.log( this.value );
} );
這樣輸入內(nèi)容時會自行在日志中輸出其value。
但我們自己做一個組件如Dialog，如何監(jiān)聽最常用的show / hide事件呢?
初級的做法是實例化時直接將回調(diào)配置進去，如
var dialog = new Dialog({
content: '這里是彈出框的內(nèi)容',
show: function(){
console.log( '當彈框時輸出此段內(nèi)容' );
}
});
這樣也可以用，不過顯然不夠靈活，如何將dialog做的像input那樣可隨時添加事件呢
二、觀察者模式實現(xiàn)
首先實現(xiàn)Events對象，這里提供基礎的監(jiān)聽on和觸發(fā)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 );
} )
}
}
}
再抽象一個函數(shù)用于為對象復制屬性
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 ];
}
}
}
實現(xiàn)一個Dialog，
僅實現(xiàn)創(chuàng)建; 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;
}
實現(xiàn)組件
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 = $( '<div>' ).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監(jiān)聽事件
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事件。
當執(zhí)行 dialog.show() 時就會輸出三條對應的日志。添加的事件保存在 dialog._events里，如圖
添加的三個show都輸出成功，事件保存在_events屬性里
nodejs Events也是實現(xiàn)了這一過程。
三、結構
var Events = require( 'events' );
console.log( Events );
/*
輸出如下數(shù)據(jù)，可以看出 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屬性，添加的監(jiān)聽的事件就保存在這里
_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的簡寫都是為實例添加監(jiān)聽事件，其它屬性也都顧名思義，就簡單說明下
property
_events: undefined, //以壓棧形式存放on進來的事件
_maxListeners: undefined //設置最大監(jiān)聽數(shù)，超出提warn
----------------------------------------------------------------------------------------------------------------
method
setMaxListeners: [Function: setMaxListeners],
/*設置私有屬性_maxListeners的值，默認Events會在當某監(jiān)聽事件多于10個時發(fā)現(xiàn)警告(見上面Events.defaultMaxListeners)，以防止內(nèi)存泄露，如
(node) warning: possible EventEmitter memory leak detected. 11 show listeners added. Use emitter.setMaxListeners() to increase limit.
但這只是個友好的提醒，可以通過設置最大監(jiān)聽數(shù)來規(guī)避這個問題
myEmitter.setMaxListeners( 20 );
*/
emit: [Function: emit],
/*觸發(fā)監(jiān)聽事件
emitter.emit( event, [arg1], [arg2], ... )
如myEmitter.on( 'show', 'prompt content' );
參數(shù)1為事件名，參數(shù)二供on回調(diào)里的參數(shù)
*/
addListener: [Function: addListener],
/*
添加監(jiān)聽事件
emitter.addListener( event, listener );
如 myEmitter.addListener( 'show', function( txt ){ console.log( txt ) } );
參數(shù)一是事件名，參數(shù)二是對應的回調(diào)，回調(diào)里的參數(shù)就是 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執(zhí)行第二次時沒有輸出
*/
removeListener: [Function: removeListener],
/*
移除指定事件的指定回調(diào)，此時回調(diào)不能再用匿名函數(shù)。
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],
/*
刪除指定事件的所有回調(diào)
emitter.removeAllListeners( [ event ] );
如
myEmitter.removeAllListeners( 'show' ); //刪除所有show監(jiān)聽
myEmitter.removeAllListeners(); //刪除所有監(jiān)聽
*/
listeners: [Function: listeners]
/*
查看指定監(jiān)聽
emitter.listeners( event );
如 myEmitter.listeners( 'show' ); //返回一個數(shù)組
同我們前面使用的 myEmitter._events[ 'show' ]
*/
另外Events類本身提供了一個方法
Events.listenerCount( emitter, event ); 獲取指定實例下指定監(jiān)聽數(shù)
如 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' ) ); //注意，此時監(jiān)聽還并沒有添加到 emitter.listeners
console.log( arguments );
});
emitter.on( 'removeListener', function(){
console.log( emitter.listeners( 'show' ) );
console.log( arguments );
})
五、應用
使用Events，通常就直接實例化即可，如上面API部分所例
不過，如果我們在nodejs端也實現(xiàn)了一個組件，如前面的Dialog，如何讓Dialog也具備Events的功能呢？可以用Extjs實現(xiàn)的 extend方案
創(chuàng)建Dialog構建器
var Dialog = function(){
//do something
}
//抽象apply函數(shù)，提供屬性的深度復制，同上面的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函數(shù)，用于實現(xiàn)繼承
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，其內(nèi)觸發(fā) event show
Dialog.prototype.show = function( txt ){
this.emit( 'show', txt );
}
var dialog = new Dialog();
//添加監(jiān)聽事件show
dialog.on( 'show', function(txt){ console.log( txt )});
//執(zhí)行method show時，就會觸發(fā)其內(nèi)定義的show events，輸出 this is show
dialog.show( 'this is show' );
這樣就為一個組件實現(xiàn)了Events機制，當調(diào)用method時，會觸發(fā)event
六、總結
nodejs提供了很好的監(jiān)聽機制，并且也應用在其所有模塊，其支持了nodejs最特色的I/O模式，如我們啟動http服務時會監(jiān)聽其 connect / close，http.request時會監(jiān)聽 data / end等，了解監(jiān)聽機制對學習理解nodejs的基礎，也對提升編程思想有益。
相關文章
這篇文章主要介紹了Node.js 中如何收集和解析命令行參數(shù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了node.js中的path.delimiter方法使用說明,本文介紹了path.delimiter的方法說明、語法、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
這篇文章主要為大家介紹了前端需知nodejs?express中間件使用及定義詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
最近在用Node寫一個實時聊天小應用,其中就用到了單元測試，所以死下面這篇文章主要給大家介紹了關于Node.js利用斷言模塊assert進行單元測試的方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
Nodejs做文本數(shù)據(jù)處理實現(xiàn)詳解
這篇文章主要為大家介紹了Nodejs做文本數(shù)據(jù)處理實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
Nodejs基于LRU算法實現(xiàn)的緩存處理操作示例
這篇文章主要介紹了Nodejs基于LRU算法實現(xiàn)的緩存處理操作,結合具體實例形式分析了LRU算法的原理、功能以及nodejs使用LRU算法實現(xiàn)緩存處理操作的相關實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了詳解Node.js模板引擎Jade入門，Jade是Node.js的一個模板引擎，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了NodeJs 文件系統(tǒng)操作模塊fs使用方法,需要的朋友可以參考下2018-11-11
nodejs使用Sequelize框架操作數(shù)據(jù)庫的實現(xiàn)
這篇文章主要介紹了nodejs使用Sequelize框架操作數(shù)據(jù)庫的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
node.js的exports、module.exports與ES6的export、export default深入詳解
這篇文章主要給大家介紹了關于node.js中的exports、module.exports與ES6中的export、export default到時是什么的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-10-10