關於Nodejs觀察者模式的介紹-js教程-PHP中文網

這篇文章主要介紹了淺談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

$( &#39;input&#39; ).on( &#39;keyup&#39;, function(){
   console.log( this.value );
} );

登入後複製

這樣輸入內容時會自行在日誌中輸出其value。

但我們自己做一個元件如Dialog，如何監聽最常用的show / hide事件呢?

初級的做法是實例化時直接將回呼配置進去，如

var dialog = new Dialog({
  content: &#39;这里是弹出框的内容&#39;,
  show: function(){
    console.log( &#39;当弹框时输出此段内容&#39; );
  }
});

登入後複製

這樣也可以用，不過顯然不夠靈活，如何將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 = $( &#39;<p>&#39; ).addClass( &#39;dialog&#39; );
    this.el.html( config.content );
    $( &#39;body&#39; ).append( this.el );
  },

  show: function( param ){
    this.el.fadeIn();
    this.emit( &#39;show&#39;, param );
  },

  hide: function( param ){
    this.el.fadeOut();
    this.emit( &#39;hide&#39;, param );
  }

}, Events );

登入後複製

#產生實例，並為其新增三個show及hide監聽事件

var dialog = window.dialog = new Dialog({
  content: &#39;dialog one&#39;
});

dialog.on( &#39;show&#39;, function( txt ){
  console.log( &#39;dialog show one &#39; + txt );
} );

//do something

dialog.on( &#39;show&#39;, function( txt ){
  console.log( &#39;dialog show two &#39; + txt );
} );

//do something

dialog.on( &#39;show&#39;, function( txt ){
  console.log( &#39;dialog show three &#39; + txt );
} );

//do something

dialog.on( &#39;hide&#39;, function( txt ){
  console.log( &#39;dialog hide one &#39; + txt );
} );

//do something

dialog.on( &#39;hide&#39;, function( txt ){
  console.log( &#39;dialog hide two &#39; + txt );
} );

//do something

dialog.on( &#39;hide&#39;, function( txt ){
  console.log( &#39;dialog hide three &#39; + txt );
} );

登入後複製

我們分六次新增了六個不同的show事件和hide事件。
執行 dialog.show() 時就會輸出三個對應的日誌。新增的事件保存在dialog._events裡，如圖

關於Nodejs觀察者模式的介紹

新增的三個show都輸出成功，事件保存在_events屬性裡

nodejs Events也是實現了這個過程。

三、結構

var Events = require( &#39;events&#39; );
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( &#39;show&#39;, function( txt ){ console.log( &#39;one &#39; + txt )})
myEmitter.on( &#39;show&#39;, function( txt ){ console.log( &#39;tow &#39; + txt )})
myEmitter.on( &#39;hide&#39;, function( txt ){ console.log( &#39;one &#39; + txt )})
myEmitter.emit( &#39;show&#39;, &#39;show&#39; );
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( &#39;show&#39;, &#39;prompt content&#39; );
 参数1为事件名，参数二供on回调里的参数
 */

addListener: [Function: addListener],
 /*
添加监听事件
emitter.addListener( event, listener );
如 myEmitter.addListener( &#39;show&#39;, 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( &#39;show&#39;, function( txt ){ console.log( txt ) } );
当myEmitter.emit执行第二次时没有输出
 */

removeListener: [Function: removeListener],
 /*
移除指定事件的指定回调，此时回调不能再用匿名函数。
emitter.removeListener( event, listener );
如 
function show( txt ){ console.log( txt ) };
myEmitter.on( &#39;show&#39;, show );
console.log( myEmitter._events ); 
// { show: [ Function: show ] }
myEmitter.removeListener( &#39;show&#39;, show );  
 console.log( myEmitter._events ); 
// {}
 */

removeAllListeners: [Function: removeAllListeners],
 /*
 删除指定事件的所有回调
 emitter.removeAllListeners( [ event ] );
 如 
  myEmitter.removeAllListeners( &#39;show&#39; );   //删除所有show监听
  myEmitter.removeAllListeners();   //删除所有监听
 */

listeners: [Function: listeners]
/*
查看指定监听
emitter.listeners( event );
如 myEmitter.listeners( &#39;show&#39; ); //返回一个数组
同我们前面使用的 myEmitter._events[ &#39;show&#39; ]
*/

另外Events类本身提供了一个方法
Events.listenerCount( emitter, event ); 获取指定实例下指定监听数
如 Event.listenerCount( myEmitter, &#39;show&#39; )

-----------------------------------------------------------------------------------------------

还有两个event
newListener / remoteListener，分别应用于为实例添加（ on / once ）和删除( removeListener ) 操作。
emitter.on( event, listener );
emitter.on( &#39;newListener&#39;, function( event, listener ){
  console.log( emitter.listeners( &#39;show&#39; ) );   //注意，此时监听还并没有添加到 emitter.listeners
  console.log( arguments );  
 });

 emitter.on( &#39;removeListener&#39;, function(){
  console.log( emitter.listeners( &#39;show&#39; ) );
  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 == &#39;object&#39;){
      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( &#39;show&#39;, txt );
}

var dialog = new Dialog();

//添加监听事件show
dialog.on( &#39;show&#39;, function(txt){ console.log( txt )});

//执行method show时，就会触发其内定义的show events，输出 this is show
dialog.show( &#39;this is show&#39; );

登入後複製

這樣就為一個元件實作了Events機制，當呼叫method時，會觸發event

六、總結

nodejs提供了很好的監聽機制，也應用在其所有模組，其支援了nodejs最特色的I /O模式，如我們啟動http服務時會監聽其connect / close，http.request時會監聽data / end等，了解監聽機制對學習理解nodejs的基礎，也對提升程式設計思想有益。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！