jQuery重构- DRY

Question

我有这两个函数，在我的main函数中。正如您将看到的，它们之间唯一的区别是它们如何附加/编辑html。我在想，想出两个新函数会很好，一个做前半部分，另一个做后半部分。我不确定是否可以使用jQuery，甚至是JavaScript，因为我不知道如何在这些函数中调用这些新函数，如果这有意义的话。任何帮助/指导都是很棒的！

这是第一个

$('#save').click(function(){
var title = $('#title').val();
var tags = $('#tags').val();
var notes = $('#notes').val();
var myDate = new Date();
if (title.length < 1) {
  $('.title-warn').show();
}
if (tags.length < 1) {
  $('.tags-warn').show();
}
if (notes.length < 1) {
  $('.notes-warn').show();
}
if (title.length >= 1 && tags.length >= 1 && notes.length >= 1) {
  $allNotes.prepend('<li class="note"><div><h1>' + title + '</h1><div class="date">      <h2>'+ myDate.toDateString() +'</h2><span class="btn btn-edit">Edit</span></div><h3>' + tags + '</h3><p>' + notes + '</p></div></li>');
  $allNotes.show();
  $newNote.hide();
  $('.title-warn').hide();
  $('.tags-warn').hide();
  $('.notes-warn').hide();
}
$('#title').val('');
$('#tags').val('');
$('#notes').val('');
$('#search').prop('disabled', false);
$('#search').attr("placeholder", "Search by title, tags, date, or even words/sentences in notes");
$('.btn-search').prop('disabled', false);
});

现在是第二个

$('#edit').click(function(){
var title = $('#edit-title').val();
var tags = $('#edit-tags').val();
var notes = $('#edit-notes').val();
var myDate = new Date();
if (title.length < 1) {
  $('.title-warn').show();
}
if (tags.length < 1) {
  $('.tags-warn').show();
}
if (notes.length < 1) {
  $('.notes-warn').show();
}
if (title.length >= 1 && tags.length >= 1 && notes.length >= 1) {
  $('.edited-note').html('<div><h1>' + title + '</h1><div class="date">      <h2>'+ myDate.toDateString() +'</h2><span class="btn btn-edit">Edit</span></div><h3>' + tags + '</h3><p>' + notes + '</p></div>');
  $('.allnotes').show();
  $('.edit-note').hide();
  $('.title-warn').hide();
  $('.tags-warn').hide();
  $('.notes-warn').hide();
}
$('#title').val('');
$('#tags').val('');
$('#notes').val('');
$('#search').prop('disabled', false);
$('#search').attr("placeholder", "Search by title, tags, date, or even words/sentences in notes");
$('.btn-search').prop('disabled', false);
$('.edited-note').removeClass('edited-note');
});

当然，如果任何人对我的代码的任何其他方面有任何建议，我都会受到批评！

Answer 1

你回答了你自己的问题！“正如你将看到的，它们之间唯一的不同之处在于它们如何附加/编辑html。”一次相当幼稚和机械的重构尝试可能看起来像这样，只是将所有公共代码拉到共享函数中：

function preHandler(title, tags, notes) {
    if (title.length < 1) {
        $('.title-warn').show();
    }
    if (tags.length < 1) {
        $('.tags-warn').show();
    }
    if (notes.length < 1) {
        $('.notes-warn').show();
    }

    return title.length >= 1 && tags.length >= 1 && notes.length >= 1;

}


function commonPost () {

    $('#title').val('');
    $('#tags').val('');
    $('#notes').val('');
    $('#search').prop('disabled', false);
    $('#search').attr("placeholder", "Search by title, tags, date, or even words/sentences in notes");
    $('.btn-search').prop('disabled', false);


}



$('#save').click(function(){
    var title = $('#title').val();
    var tags = $('#tags').val();
    var notes = $('#notes').val();
    var myDate = new Date();
    if  (preHandler(title, tags, notes)) {

        $allNotes.prepend('<li class="note"><div><h1>' + title + '</h1><div class="date">      <h2>'+ myDate.toDateString() +'</h2><span class="btn btn-edit">Edit</span></div><h3>' + tags + '</h3><p>' + notes + '</p></div></li>');
        $allNotes.show();
        $newNote.hide();
        $('.title-warn').hide();
        $('.tags-warn').hide();
        $('.notes-warn').hide();

    }
    commonPost();

});


$('#edit').click(function() {
    var title = $('#edit-title').val();
    var tags = $('#edit-tags').val();
    var notes = $('#edit-notes').val();
    var myDate = new Date();

    if  (preHandler(title, tags, notes)) {

        $('.edited-note').html('<div><h1>' + title + '</h1><div class="date">      <h2>'+ myDate.toDateString() +'</h2><span class="btn btn-edit">Edit</span></div><h3>' + tags + '</h3><p>' + notes + '</p></div>');
        $('.allnotes').show();
        $('.edit-note').hide();
        $('.title-warn').hide();
        $('.tags-warn').hide();
        $('.notes-warn').hide();

    }

    commonPost();
    $('.edited-note').removeClass('edited-note');

});

当只有两种情况时，它并不会真正为您赢得太多。但是，当两个以上的人都在做这样的重构时，这种重构开始收获回报。

第一次尝试可以改进(很多)。也许好心人会发帖子。但这将是一个很好的第一次尝试。

Answer 2

通常，我喜欢创建某种类型的控制器类，它为应用程序中的每个页面执行所有的UI工作。这使得测试变得非常容易，因为您可以以一种非常简单的方式调用目标方法。

我还喜欢将选择器隐藏在易于读取的变量后面，所以如果我要在几周/几个月后读取这个文件，我可以通过读取高级逻辑打算做的事情来快速提高速度。(仅供参考，在我下面的回答中，我没有这样做。实际上，我不知道editTitle应该代表什么。但这里有几个我如何将其重命名为: TaskTitle、BlogTitle等的示例。)

这些都是指导原则，但我希望我的代码总是这样写的。我建议你花点时间去读一些关于javascript设计模式、编程习惯用法等的知识。

var myApp = new app();

$(function () {
    myApp.init();
});

var app = function () {
    var editTitle = "#edit-title";
    var editTitleWarning = ".title-warn";

    var editTags = "#edit-tags";
    var editTagsWarning = ".tags-warn";

    var editNotes = "#edit-notes";
    var editNotesWarning = ".notes-warn";

    var saveButton = "#save";
    var editButton = "#edit";

    var updateUI = function (args) {
        var isSave = args.data.isSave;
        var title = $(editTitle).val();
        var tags = $(editTags).val();
        var notes = $(editNotes).val();
        var myDate = new Date();

        // (suggestion) add comment here 
        if (title.length < 1) {
            $(editTitleWarning).show();
        }

        // (suggestion) add comment here 
        if (tags.length < 1) {
            $(editTagsWarning).show();
        }

        // (suggestion) add comment here 
        if (notes.length < 1) {
            $(editNotesWarning).show();
        }

        if (isSave) {
            // add save append code here
        } else {
            // add edit html code here
        }

        // add remaining code here
    };

    this.init = function () {
        $("body")
            .on("click", saveButton, { isSave = true }, updateUI)
            .on("click", editButton, { isSave = false }, updateUI);
    };
}

Answer 3

只谈到让代码变干(而不是一般的正确架构)，我可能会将代码重写为：

​

var handler = function(prefix, htmlHandler, removeEditedNoteCls) {
    prefix = '#' + (prefix === false ? '' : (prefix + '-'));
    var list = ['title', 'tags', 'notes'],
      i = 0,
      h = {
        date: new Date
      },
      act = true;
    for (; i < list.length; i++) {
      h[list[i]] = $(prefix + list[i]).val();
      if (h[list[i]].length < 1) {
        $('.' + list[i] + '-warn').show();
        act = false;
      }
    }
    if (act) {
      htmlHandler.call(this, h);
      for (i = 0; i < list.length; i++) {
        $('.' + list[i] + '-warn').hide();
      }
    }
    for (i = 0; i < list.length; i++) {
      $('#' + list[i]).val('');
    }
    $('#search').prop('disabled', false);
    $('#search').attr("placeholder", "Search by title, tags, date, or even words/sentences in notes");
    $('.btn-search').prop('disabled', false);
    if (removeEditedNoteCls) {
      $('.edited-note').removeClass('edited-note');
    }
  },
  prepend = function(h) {
    $allNotes.prepend('<li class="note"><div><h1>' + h.title + '</h1><div class="date">      <h2>' + h.date.toDateString() + '</h2><span class="btn btn-edit">Edit</span></div><h3>' + h.tags + '</h3><p>' + h.notes + '</p></div></li>');
    $allNotes.show();
    $newNote.hide();
  },
  replace = function(h) {
    $('.edited-note').html('<div><h1>' + h.title + '</h1><div class="date">      <h2>' + h.date.toDateString() + '</h2><span class="btn btn-edit">Edit</span></div><h3>' + h.tags + '</h3><p>' + h.notes + '</p></div>');
    $('.allnotes').show();
    $('.edit-note').hide();
  };
$('#save').click(function() {
  handler('', prepend);
});
$('#edit').click(function() {
  handler('edit', replace, true);
});

​

基本上，你：

1. 不要对每个搜索变量声明重复var。使用逗号分隔同一var下的声明。虽然DRY不是什么大问题，但它使代码更短，nicer.
2. Identify重复/相似的东西，并将其压缩成：
   • 循环遍历仅包含差异的数组。在本例中，它将是接受差异作为参数的it ['title', 'tags', 'notes']；或
   • 方法的数组。在本例中，“编辑”和“保存”处理程序非常相似，这应该是将它们包装到命名方法中的第一个信号(在我的example).

中是handler

​