Плагин jQuery: добавление функции обратного вызова


86

Я пытаюсь предоставить своему плагину функцию обратного вызова, и я бы хотел, чтобы он работал несколько традиционным способом:

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

или

myPlugin({options}, anotherFunction());

Как мне обработать этот параметр в коде? Считается ли это единым целым? Я почти уверен, что знаю, где бы разместить исполняемый код, но как мне заставить этот код выполняться? Кажется, я не могу найти много литературы по этой теме.


2
Ваш второй синтаксис вызывает функцию вместо ее передачи. Вам нужно удалить()
SLaks

6
Лично я думаю, что вам лучше указать обратный вызов как часть параметра «options». Это особенно верно, если выяснится, что причин для обратного вызова больше одной.
Pointy

1
Как бы это выглядело, Пойнти? Хотите дать ответ-ответ?
dclowd9901,

Ответы:


167

Просто выполните обратный вызов в плагине:

$.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
    }
};

Вы также можете использовать обратный вызов в объекте параметров:

$.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);

};

Используйте это так:

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

Просто добавление к этому ответу. Есть сообщение, объясняющее это: jquery-howto.blogspot.com/2009/11/…
RaphaelDDL

@David Как добавить параметр обратного вызова, я хочу это сделать$('.elem').myPlugin({ callback: function (param) { // some action } });
Джеф Гилберт

2
@JeaffreyGilbert Вы также должны принести контекст jQuery, я бы сделалoptions.callback.call(this, param);
Дэвид Хеллсинг

@David Мне нужны два обратных вызова: animateBeforeи animateAfter. подскажите пожалуйста, как использовать ваше решение ??
user007

5

Не знаю, правильно ли я понял ваш вопрос. Но для второй версии: это вызовет anotherFunctionнемедленно.

По сути, ваш плагин должен быть какой-то функцией, которая выглядит так:

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

Вы должны предоставить объект функции как обратный вызов, так что либо, function(){...}либо anotherFunction(без ()).


4

Возвращение взрыва из прошлого.

Стоит отметить, что если вам передано два аргумента, например:

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

Затем вы вызываете плагин без аргумента options, но с обратным вызовом, тогда вы столкнетесь с проблемами:

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

Я использую это, чтобы сделать его немного более гибким:

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

3

Я думаю это может тебе помочь

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

Я поделился статьей о создании собственного плагина jQuery. Думаю, вам следует проверить, что http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/


1

Измените функцию вашего плагина, чтобы она принимала второй параметр. Предполагая, что пользователь передает функцию, этот параметр можно рассматривать как обычную функцию.
Обратите внимание, что вы также можете сделать обратный вызов свойством параметра options.

Например:

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

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

    ...
});

0

Пример немного запоздал, но он может быть полезен. Использование аргументов может создать такую ​​же функциональность.

$.fn.myPlugin = function() {
    var el = $(this[0]);
    var args = arguments[0] || {};
    var callBack = arguments[1];
    .....
    if (typeof callback == 'function') {
        callback.call(this);
    }
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.