javascript - 重构这个 javascript 代码

Question

我有两个点击事件，几乎相似，但不完全一样。我想知道如何最好地重构它们：

  $('.remove_fields.dynamic').live('click', function(e) {
    var $this = $(this);
    var after_removal_trigger_node = $this.closest(".nested-fields").parent();
    trigger_removal_callback($this);
    e.preventDefault();
    $this.closest(".nested-fields").remove();
    trigger_after_removal_callback(after_removal_trigger_node);
  });

  $('.remove_fields.existing').live('click', function(e) {
    var $this = $(this);
    var after_removal_trigger_node = $this.closest(".nested-fields").parent();
    trigger_removal_callback($this);
    e.preventDefault();
    $this.prev("input[type=hidden]").val("1");
    $this.closest(".nested-fields").hide();
    trigger_after_removal_callback(after_removal_trigger_node);
  });

如您所知，有相当多的重叠。我想知道重构此代码的最佳/最好方法是什么。

Answer 1

在.remove_fieldsclick 函数中进行类检查。

$('.remove_fields').click(function(e) {
    var $this = $(this);
    var after_removal_trigger_node = $this.closest(".nested-fields").parent();
    trigger_removal_callback($this);
    e.preventDefault();
    if($this.hasClass("dynamic") {
        $this.closest(".nested-fields").remove();
    } else if($this.hasClass("existing")) {
        $this.prev("input[type=hidden]").val("1");
        $this.closest(".nested-fields").hide();
    }
    trigger_after_removal_callback(after_removal_trigger_node);
});

Answer 2

将选择器组合成$('.remove_fields.dynamic, .remove_fields.existing').

然后，测试是否$this有 class existing。如果是这样，运行$this.prev("input[type=hidden]").val("1");.

完毕。

Answer 3

多打扫一下：

$('.remove_fields').click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $nestedFields = $this.closest(".nested-fields");

    trigger_removal_callback($this);

    if($this.hasClass("dynamic") {
        $nestedFields.remove();
    } else if($this.hasClass("existing")) {
        $this.prev("input[type=hidden]").val("1");
        $nestedFields.hide();
    }

    trigger_after_removal_callback($nestedFields.parent());

});