干燥 jQuery FizzBu​​zz 练习

Question

我遇到了一个问题，我无法将重复的代码行保存到变量中并且不确定原因。除此之外，我试图将新表设置在当前表的旁边，而不是在它的下方或上方，但我无法操纵 DOM 来反映这一点。任何和所有的帮助将不胜感激。

(function($) {
$.fn.fizzBuzz = function() {
 var newTable = $(this).clone();
 var myTable = $(this.children().last().children());
 // var newTableValues = newTable.children().last().children()[i].firstChild.innerHTML;
 // var parseData = (parseInt(myTable[i].firstChild.innerHTML)

 for (var i = 0; i < myTable.length; i++) {

  if (parseInt(myTable[i].firstChild.innerHTML) % 15 === 0) {
    newTable.children().last().children()[i].firstChild.innerHTML  = "FizzBuzz";

  } else if (parseInt(myTable[i].firstChild.innerHTML) % 3 === 0) {
    newTable.children().last().children()[i].firstChild.innerHTML = "Fizz";

  } else if (parseInt(myTable[i].firstChild.innerHTML) % 5 === 0) {
    newTable.children().last().children()[i].firstChild.innerHTML = "Buzz";

  } else {
    newTable.children().last().children()[i].firstChild.innerHTML = "Uncool";
 }
  newTable.insertAfter('div');
}
}
})(jQuery)

$(".fizzer").fizzBuzz();

jsfiddle

Answer 1

(function($) {
    $.fn.fizzBuzz = function() {
        var newTable = $(this).clone();
        $("tr > td", newTable).each(function(i, e) {
            var i = parseInt(e.innerHTML, 10);
            var f = (i % 3 == 0 ? "Fizz" : "") + (i % 5 == 0 ? "Buzz" : "");
            e.innerHTML = f ? f : "Uncool";
        });
    return newTable;
}
})(jQuery);

var newTable = $(".fizzer").fizzBuzz();
$("#main").append(newTable);

没有比这更干燥的了。
(1) 您的新表是现有表的副本。克隆现有表后，不要管它。

(2) 如果可以的话，避免所有的 children/last/etc 内容；尽可能使用 CSS 选择器。

(3) 如果您依赖于从 JSON 或 HTML 中读取数字，请始终通过 parseInt() 运行它

(4) jQuery 有很多有用的工具来遍历 DOM 对象，这些工具比你能写的任何东西都好，主要是因为你不写任何东西就不会引入错误。学习 each() 和 map() 如何节省您的时间和挫败感，而不是您的 for() 循环。了解 jQuery.each() 和 Array.each() 之间的区别，尤其是它们的 .map() 等价物。

(5) 通过使用带有 CSS 选择器的 jQuery 的“each”函数，我可以访问我关心的确切目标。我能够分析它并替换它的内容（这一切都发生在副本中）。

(6) 因为我正在构建一个新的 DOM 对象，而不是在函数中对其进行操作，所以我返回它，并让用户决定将它放在哪里。

(7) 除非我需要特定的文档来帮助未来的维护人员理解代码，否则我声明的唯一变量是那些我多次使用的变量。

(8) newTable 的两个实例是完全独立的。我的 fizzBu​​zz 函数内部的那个是作用域的，不会影响外部的，反之亦然。始终使用var。