JavaScript에서는 덮어 쓰지 않고 콜백 함수에 추가 할 수 있습니까?

Question

내가이 권리를 말하고 있는지 나는 모른다. 그래서 나는 단지 예를 들어 설명함으로써 질문 할 것이다.

onShowEdit 콜백을 사용하여 jQuery 플러그인을 작성했다고 가정 해 보겠습니다.

나중에 내 플러그인을 사용하고 다른 기본 기능/이벤트에 방법의 무리 추가

$('.editable_module:not(.custom)').editable({ 
    onShowEdit: function(el){ 
     initRequired(); 
     $(':radio, :checkbox', el).prettyCheckboxes(); 
     initDatePickers(); 
     initChosen(); 
     initMaskedInputs(); 
     $('.dynamic_box.tabs').dynamicBoxTabs(); 
     $('.trigger_dynamic_box').triggerDynamicBox('true'); 
    } 
}); 

그래서

지금은 기본/기본 요소가을 (.editable_module는) 그 플러그인을 호출하고 몇 가지 방법이있다/모든 인스턴스에서 사용될 함수.

내 질문은 '일회성'일종의 거래 (이 콜백/이벤트에 동작을 추가해야하지만 일반적으로 사용되는 것은 아님)에 대해 뭔가를 추가해야 할 때가되었습니다. 이 콜백/이벤트를 덮어 쓰지 않고 확장하거나 추가 할 수 있습니까? 내 말은, 내가 가서이 할 수있는 알고

$('#new_selector').editable({ 
    onShowEdit: function(el){ 
     initRequired(); 
     $(':radio, :checkbox', el).prettyCheckboxes(); 
     initDatePickers(); 
     initChosen(); 
     initMaskedInputs(); 
     $('.dynamic_box.tabs').dynamicBoxTabs(); 
     $('.trigger_dynamic_box').triggerDynamicBox('true'); 

     //ADD SOME NEW STUFF HERE 
    } 
}); 

을하지만 정말 내 유일한 옵션이다?

모든 입력/제안에 대해 미리 감사드립니다.

Answer 1

다음과 같이 jQuery의 자체 이벤트 시스템을 고려할 수 있습니다. http://jsfiddle.net/VQqXM/1/. $.fn 함수에서이를 쉽게 통합 할 수 있습니다. 함수 리터럴 대신 객체의 속성으로 적절한 함수를 전달하기 만하면됩니다.

$("input").on("foo", function() { 
    alert(1); 
}); 

// later 

$("input").on("foo", function() { 
    alert(2); 
}); 

// later 

$("input").trigger("foo"); // alerts 1 and 2 

당신은 단순히 .on/.off가 풀릴 이벤트를 바인딩하는 데 사용할 수 있으며, .trigger으로 그들 모두를 트리거합니다. 또한 jQuery는 이미 사용 된 이벤트를 사용하지 않도록 이벤트 이름 중 namespacing을 지원합니다.

Answer 2

내가 정확하게 질문을 이해한다면 여기에서 핵심 단어는 "공장"입니다.

jQuery 자체는 공장이지만 설명하는 것을 얻으려면 플러그인도 공장 내 공장이어야합니다. 그렇게하려면 플러그인을 특정 방식으로 작성해야합니다.

아마도 가장 쉬운 방법은 jQuery의 UI 위젯 팩토리를 사용하는 것입니다. Read about it here.

Answer 3

당신은, 당신은 편집 가능한 플러그인에 아무것도 추가 할 필요없이 해고 무슨 콜백 변경할 수 있습니다이 설정으로 새로운 $.Callbacks() 방법

var $onShowEditCBObj = $.Callbacks(); 
function onShowEditHandler() { 
    $onShowEditCBObj.fire(); 
} 
$('#new_selector').editable({ 
    onShowEdit: onShowEditHandler 
}); 
// add default event to callbacks obj 
$onShowEditCBObj.add(function(){ 
    initRequired(); 
    $(':radio, :checkbox', el).prettyCheckboxes(); 
    initDatePickers(); 
    initChosen(); 
    initMaskedInputs(); 
    $('.dynamic_box.tabs').dynamicBoxTabs(); 
    $('.trigger_dynamic_box').triggerDynamicBox('true'); 
}); 
// add a one time method to the callbacks obj 
function oneTimeEvent() { 
    alert("worky"); 
    $onShowEditCBObj.remove(oneTimeEvent); 
} 
$onShowEditCBObj.add(oneTimeEvent) 

를 사용할 수 있습니다.

편집 : 나는 당신이 플러그인을 작성했다는 것을 몰랐습니다. 이를 염두에두고 pimvdb의 대답은 개발자가 특정 방식으로 코드를 작성하도록 요구하는 것보다 튼튼합니다.

Answer 4

onShowEdit에 대해 별도의 함수를 정의해야합니다.

var myOnShowEdit = function(el, extra_fn) { 
    //standard functionality goes here 
    if (typeof extra_fn==='function') extra_fn(); //support for extra stuff 
} 
$('.editable_module:not(.custom)').editable({ 
    onShowEdit: function(el) { 
     myOnShowEdit(el); 
    } 
}); 
$('#new_selector').editable({ 
    onShowEdit: function(el) { 
     myOnShowEdit(el, function(){console.log('hi');}); 
    } 
}); 

이렇게하면 표준 기능 외에도 필요한 기능을 공정하게 추가 할 수 있습니다. this이 컨텍스트를 어떻게 바꿀 수 있는지 알고 있어야합니다.