JQuery Plugin: 添加回调功能

我试图给我的插件回调功能,我希望它以一种比较传统的方式运行:

myPlugin({options}, function() {
/* code to execute */
});

或者

myPlugin({options}, anotherFunction());

如何在代码中处理该参数?它是否被视为一个完整的实体?我很确定我知道应该把执行代码放在哪里,但是如何让代码执行呢?我似乎找不到很多关于这个主题的文献。

63967 次浏览

Change your plugin function to take a second parameter. Assuming that the user passes a function, that parameter can be treated as a regular function.
Note that you can also make the callback a property of the options parameter.

For example:

$.fn.myPlugin = function(options, callback) {
...


if(callback)        //If the caller supplied a callback
callback(someParam);


...
});

Just execute the callback in the plugin:

$.fn.myPlugin = function(options, callback) {
if (typeof callback == 'function') { // make sure the callback is a function
callback.call(this); // brings the scope to the callback
}
};

You can also have the callback in the options object:

$.fn.myPlugin = function() {


// extend the options from pre-defined values:
var options = $.extend({
callback: function() {}
}, arguments[0] || {});


// call the callback and apply the scope:
options.callback.call(this);


};

Use it like this:

$('.elem').myPlugin({
callback: function() {
// some action
}
});

I don't know if I understand your question correctly. But for the second version: This would call anotherFunction immediately.

Basically your plugin should be some kind of function that looks like this:

var myPlugin = function(options, callback) {
//do something with options here
//call callback
if(callback) callback();
}

You have to provide a function object as callback, so either function(){...} or anotherFunction (without () ).

Bringing back a blast from the past.

Worth noting that if you have two arguments passed, for example:

$.fn.plugin = function(options, callback) { ... };

Then you call the plugin without the options argument but with a callback then you'll run into issues:

$(selector).plugin(function() {...});

I use this to make it a little more flexible:

if($.isFunction(options)) { callback = options }

An example bit late, but it can be useful. Using arguments can create the same functionality.

$.fn.myPlugin = function() {
var el = $(this[0]);
var args = arguments[0] || {};
var callBack = arguments[1];
.....
if (typeof callback == 'function') {
callback.call(this);
}
}

I think this might help you

// Create closure.
(function( $ ) {
  

// This is the easiest way to have default options.
 

var settings = $.extend({
// These are the defaults.
 

onready: function(){},
 

//Rest of the Settings goes here...
}, options );
 

// Plugin definition.
$.fn.hilight = function( options ) {
 

//Here's the Callback
settings.onready.call(this);
 

//Your plugin code goes Here
};
  

// End of closure.
  

})( jQuery );

I had shared a article about Creating your Own jQuery Plugin.I think you should check that http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/