jQuery 플러그인 : 콜백 기능 추가


86

플러그인 콜백 기능을 제공하려고하는데 다소 전통적인 방식으로 작동하고 싶습니다.

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

또는

myPlugin({options}, anotherFunction());

코드에서 해당 매개 변수를 어떻게 처리합니까? 하나의 완전한 엔티티로 취급됩니까? 실행 코드를 어디에 둘지 확실히 알고 있지만 코드를 실행하려면 어떻게해야합니까? 이 주제에 대한 많은 문헌을 찾을 수없는 것 같습니다.


2
두 번째 구문은 전달하는 대신 함수를 호출합니다. 당신은 제거해야합니다()
SLaks

6
개인적으로 콜백을 "options"매개 변수의 일부로 지정하는 것이 더 낫다고 생각합니다. 콜백을 제공하는 이유가 하나 이상인 경우 특히 그렇습니다.
Pointy

1
어떻게 생겼을까 요, Pointy? 답변을 제공 하시겠습니까?
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

콜백 매개 변수를 추가하는 방법 @ 데이비드, 나는이 작업을 수행 할 수$('.elem').myPlugin({ callback: function (param) { // some action } });
Jeaf 길버트

2
당신은뿐만 아니라 jQuery를 컨텍스트를 지참 @JeaffreyGilbert, 내가 할 것options.callback.call(this, param);
데이비드 헬싱

@David animateBeforeanimateAfter. 솔루션 사용 방법을 알려주십시오.?
user007 2013 년

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);
    }
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.