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

您可以使用新的$.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 3

如果我理解正确的话，这里的关键词是“工厂”。

jQuery本身就是一个工厂，但为了得到你描述的内容，你需要你的插件才能成为工厂内的工厂。这需要以某种方式编写插件。

可能最简单的方法是使用jQuery的UI小部件工厂。 Read about it here

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如何改变上下文。

在JavaScript中是否可以添加回调函数而不是覆盖它？

4 个答案: