Javascript 从一个jQuery插件触发事件并在另一个插件中捕获
我目前有两个插件,它们是根据jquery指南编写的: 从一个插件引发名称空间事件,然后在另一个插件中捕获它的最佳实践方式是什么?我在JSFIDLE中设置了这种情况的简化版本:-HTML和Javascript如下: HTML:Javascript 从一个jQuery插件触发事件并在另一个插件中捕获,javascript,jquery,jquery-plugins,Javascript,Jquery,Jquery Plugins,我目前有两个插件,它们是根据jquery指南编写的: 从一个插件引发名称空间事件,然后在另一个插件中捕获它的最佳实践方式是什么?我在JSFIDLE中设置了这种情况的简化版本:-HTML和Javascript如下: HTML: 名称空间实际上并不适用。唯一的要求是2个插件同意事件的名称。我的建议是,触发事件的插件应该有一个带有事件名称的变量。然后消费者可以使用该名称: // within your pluginTrigger plugin var eventName = "pluginTrigge
名称空间实际上并不适用。唯一的要求是2个插件同意事件的名称。我的建议是,触发事件的插件应该有一个带有事件名称的变量。然后消费者可以使用该名称:
// within your pluginTrigger plugin
var eventName = "pluginTriggerEvent";
$.fn.pluginTrigger.eventName = eventName;
// within your trigger method:
$(this).trigger(eventName);
// -------------------------------
// within your pluginBinder plugin init method:
$(this).on($.fn.pluginTrigger.eventName, methods.result);
谢谢你的建议——这似乎是一个很好的方法。
/* ===========================
Plugin that triggers event:
=========================== */
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
$("#click").bind('click.pluginTrigger', methods.trigger);
});
},
trigger : function( ) {
// TODO: Trigger to go here?
}
};
$.fn.pluginTrigger = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
/* ===========================
Plugin that handles event:
=========================== */
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
// TODO: Binding on pluginTrigger event to go here (and call methods.result method below)?
});
},
result : function( ) {
$("#result").text("Received!");
}
};
$.fn.pluginBinder = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery );
/* ===============
Initialisation
=============== */
$("#container").pluginTrigger();
$("#container").pluginBinder();
// within your pluginTrigger plugin
var eventName = "pluginTriggerEvent";
$.fn.pluginTrigger.eventName = eventName;
// within your trigger method:
$(this).trigger(eventName);
// -------------------------------
// within your pluginBinder plugin init method:
$(this).on($.fn.pluginTrigger.eventName, methods.result);