如何将自定义事件添加到 jQuery 插件模式中

Posted 2023-05-09

【中文标题】如何将自定义事件添加到 jQuery 插件模式中

【英文标题】：How can I add custom events into jQuery plugin pattern

【发布时间】：2015-04-04 17:18:55

【问题描述】：

如何将自定义事件添加到命名空间的 jQuery 插件模式？我想添加类似这样的自定义事件：

$.myNamespace.myPluginName.trigger( 'myEvent' );

通常，我使用这样的模式（原始模式是here）：

$.myNamespace.myPluginName( '#myDiv' );

这是模式：

;(function ( $ ) 
    if (!$.myNamespace) 
        $.myNamespace = ;
    

    $.myNamespace.myPluginName = function ( el, myFunctionParam, options ) 
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data( "myNamespace.myPluginName" , base );

        base.init = function () 
            base.myFunctionParam = myFunctionParam;

            base.options = $.extend(,
            $.myNamespace.myPluginName.defaultOptions, options);

            // Put your initialization code here
        ;

        // Sample Function, Uncomment to use
        // base.functionName = function( paramaters )
        //
        // ;
        // Run initializer
        base.init();
    ;

    $.myNamespace.myPluginName.defaultOptions = 
        myDefaultValue: ""
    ;

    $.fn.mynamespace_myPluginName = function
        ( myFunctionParam, options ) 
        return this.each(function () 
            (new $.myNamespace.myPluginName(this,
            myFunctionParam, options));
        );
    ;

)( jQuery );

【参考方案1】：

来自jQuery Docs

提供回调功能

什么是回调？ – 回调本质上是一个稍后调用的函数，通常由事件触发。它作为参数传递，通常传递给组件的初始调用，在本例中为 jQuery 插件。

如果您的插件是由事件驱动的，那么为每个事件提供回调功能可能是个好主意。另外，您可以创建自己的自定义事件，然后为这些事件提供回调。在这个画廊插件中，添加一个“onImageShow”回调可能是有意义的。

var defaults = 

    // We define an empty anonymous function so that
    // we don't need to check its existence before calling it.
    onImageShow : function() ,

    // ... rest of settings ...

;

// Later on in the plugin:

nextButton.on( "click", showNextImage );

function showNextImage() 

    // Returns reference to the next image node
    var image = getNextImage();

    // Stuff to show the image here...

    // Here's the callback:
    settings.onImageShow.call( image );

我们不是通过传统方式（添加括号）启动回调，而是在 image 的上下文中调用它，这将是对 image 节点的引用。这意味着您可以通过回调中的 this 关键字访问实际的图像节点：