jquery - 在 jQuery 中创建插件的自定义事件

Question

我正在开发一个名为popup. 这是我的第一个 jQuery 插件，所以我尝试按照 jQuery 网站上的教程进行操作。我想实现一些我在他们的参考资料中没有找到的东西：一个onOkay( function(e){ });事件。我希望开发人员能够像这样调用这个事件处理程序：

$("#message").popup().onOkay(function( e ) {
    // some code here
});

我该怎么做才能实现这样的代码？

Answer 1

基本上，您需要将一个函数传递给您的插件并将其用作回调。下面是一些简单的伪代码来展示一个例子：

plugin_func = function( params, callback ){
    // Do some awesome stuff with params
    var callback_arguments = 'foo' + params;
    callback( callback_arguments );
}

现在你用这样的回调函数调用这个函数：

plugin_func('bar', function( response ){ 
    console.log( response );
});

---

如果您需要使用回调操作范围，甚至还有另一种使用回调的方法：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

callback.apply( thisScope, [ array_of_args_passed_to_callback ]

Answer 2

如果它只是一个事件处理程序，让您的插件触发该事件，那么您可以像任何其他事件一样绑定到事件处理程序。

$.fn.myPlugin = function(){
    return this.each(function(){
        var $self = $(this);

        ... generate markup and show popup ...
        okbtn.on('click',function(e){
            e.preventDefault();
            if ( $self.triggerHandler("mypluginok") ) {
                // do your plugin stuff
            } 
        });

    });
};

$("#someel").myPlugin().on("mypluginok",function(){
    console.log("Ok button pressed!")
    // return false; // this would prevent the plugin's click handling
})

不建议添加额外的方法，例如onOkay如果其他插件也定义了一个onOkay方法，可能与其他插件冲突$.fn。