$( '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 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 );
} );
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
----------------------------------------------------------------------------------------------------------------
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 );
})
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' );
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有