Question

如何将自定义事件添加到命名空间的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 );

Answer 1

来自jQuery Docs

提供回调功能

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

如果您的插件是由事件驱动的，那么为每个事件提供回调功能可能是个好主意。此外，您可以创建自己的自定义事件，然后为这些事件提供回调。在这个图库插件中，添加一个＆＃34; onImageShow＆＃34;回调。

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 );
}

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

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

1 个答案: