jQueryプラグイン:コールバック機能の追加


86

プラグインのコールバック機能を提供しようとしていますが、従来の方法で動作させたいと考えています。

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

または

myPlugin({options}, anotherFunction());

コードでそのパラメーターを処理するにはどうすればよいですか?それは1つの完全なエンティティとして扱われますか?実行コードをどこに配置するかはわかっていると確信していますが、コードを実行するにはどうすればよいですか?私はそのトピックに関する多くの文献を見つけることができないようです。


2
2番目の構文は、関数を渡す代わりに関数を呼び出します。()
SLaks 2010年

6
個人的には、「options」パラメーターの一部としてコールバックを指定する方がよいと思います。これは、コールバックを提供する理由が1つ以上あることが明らかになった場合に特に当てはまります。
とがった2010年

1
ポインティ、そのようなものはどのように見えますか?答えを提供する気ですか-答え?
dclowd9901 2010年

回答:


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 } });
Jeaf Gilbert 2012

2
@JeaffreyGilbert jQueryコンテキストも持参する必要があります。そうしますoptions.callback.call(this, param);
David Hellsing

@デビッド私はと呼ばれる2つのコールバックを、欲しいanimateBeforeanimateAfter。ソリューションの使い方を教えてください??
user007 2013年

5

私はあなたの質問を正しく理解しているかどうかわかりません。しかし、2番目のバージョンの場合:これはanotherFunctionすぐに呼び出されます。

基本的に、プラグインは次のような関数である必要があります。

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

関数オブジェクトをコールバックとして提供する必要があるため、function(){...}またはanotherFunction(なし())のいずれかです。


4

過去からの爆発を取り戻す。

たとえば、2つの引数が渡された場合は、注意が必要です。

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

プラグイン関数を変更して、2番目のパラメーターを取ります。ユーザーが関数を渡すと仮定すると、そのパラメーターは通常の関数として扱うことができます。
コールバックを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);
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.