浅谈Nodejs观察者模式

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

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

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{  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 = $( '<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 );

var dialog = window.dialog = new Dialog({  content: 'dialog one'});dialog.on( 'show', function( txt ){  console.log( 'dialog show one ' + txt );} );//do somethingdialog.on( 'show', function( txt ){  console.log( 'dialog show two ' + txt );} );//do somethingdialog.on( 'show', function( txt ){  console.log( 'dialog show three ' + txt );} );//do somethingdialog.on( 'hide', function( txt ){  console.log( 'dialog hide one ' + txt );} );//do somethingdialog.on( 'hide', function( txt ){  console.log( 'dialog hide two ' + txt );} );//do somethingdialog.on( 'hide', function( txt ){  console.log( 'dialog hide three ' + txt );} );

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 }*/

property_events: undefined,   //以压栈形式存放on进来的事件_maxListeners: undefined  //设置最大监听数，超出提warn----------------------------------------------------------------------------------------------------------------methodsetMaxListeners: [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' )-----------------------------------------------------------------------------------------------还有两个eventnewListener / 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 ); })

var Dialog = function(){  //do something}//抽象apply函数，提供属性的深度复制，同上面的extendfunction 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属性继承给DialogDialog = extend( Dialog, Events );//为Dialog新增 method show，其内触发 event showDialog.prototype.show = function( txt ){  this.emit( 'show', txt );}var dialog = new Dialog();//添加监听事件showdialog.on( 'show', function(txt){ console.log( txt )});//执行method show时，就会触发其内定义的show events，输出 this is showdialog.show( 'this is show' );