秉承 OOP Dry 原则答案

【问题标题】：Adhering to the OOP Dry principle秉承 OOP Dry 原则
【发布时间】：2016-11-18 17:24:44
【问题描述】：

我只是在学习如何使用 JQuery，我迷失在如何压缩我的代码并使其遵守 OOP 干燥原则。
目标是在单击一个图像时使四个图像向左移动。
我在四个语句中做到了这一点，但我想知道如何进行更模块化的制作。

如果有人能将我引向正确的方向，我将不胜感激。

var clix = [0, 0, 0, 0]

    $("#head").click(function () {
        if (headclix < 9) {
            $("#head").animate({
                left: "-=367px"
            }, 500);
            headclix += 1;
        } else {
            $("#head").animate({
                left: "0px"
            }, 500);
            headclix = 0;
        }
    });

    $("#eyes").click(function () {
        if (eyeclix < 9) {
            $("#eyes").animate({
                left: "-=367px"
            }, 500);
            eyeclix += 1;
        } else {
            $("#eyes").animate({
                left: "0px"
            }, 500);
            eyeclix = 0;
        }
    });

【问题讨论】：

OOP 和 DRY 是两个不同的原则。
clix 数组有什么用？
欢迎来到 Stack Overflow！如果 (a) 您的代码按预期工作，(b) 您的代码是真实代码，而不是示例代码，并且 (c) 您的代码包含在问题的正文中，则此问题可能适合 Code Review。如果您希望通过同行评审来改进代码的所有方面，请将其发布在 Code Review 上。
最初，我有四个变量用作计数器。因此，每次用户单击图像时，图像都会向左循环到下一个图像。我认为一个数组可以代替它们。

标签： jquery dry

【解决方案1】：

不要定位特定的 ID，而是为所有元素提供相同的 class。然后您可以将处理程序绑定到该类，并使用$(this) 来引用被单击的元素。您可以使用$(this).data() 将点击次数与元素关联起来，而不是使用像headclix 这样的全局变量。

$(".animated").click(function() {
    var clix = $(this).data("clix") || 0;
    if (clix < 9) {
        $(this).animate({
            left: "-=367px"
        }, 500).data("clix", clix + 1);
    } else {
        $(this).animate({
            left: "0px"
        }, 500).data("clix", 0);
    }
});

【讨论】：

【解决方案2】：

也许这不是最好的解决方案，但它是一种更好的方法，这样做：

var the_click_function = function(){
    //some code
}

并将事件触发为：

$("#eyes").click(the_click_function);
$("#head").click(the_click_function);
...

或

$("#head, #eyes").click(the_click_function);

显然，这是一个示例代码，您随时可以改进它。

【讨论】：

【解决方案3】：

您可以创建一个“生成”回调函数的函数。该函数利用闭包来保持计数器。

您可以使此函数可自定义：它可以采用不同的参数以使回调更可自定义。此外，此参数可能具有“默认”值（例如，jQuery 样式）。

这些只是使您的代码更可重用并避免代码重复的想法。 JS 在这方面非常灵活，并且有许多鼓励可重用性的模式和方法。

例如：

function eventCallbackGen(conf) {
  var counter = 0;
  return function() {
    var lessThanMax = counter < conf.maxCount;
    conf.$el.animate({
      left: lessThanMax ? "-=" + conf.decreasePixels + "px" : conf.startingPoint + "px"
    }, conf.animationTime);
    counter = lessThanMax ? (counter + 1) : 0;
  };
}

var $head = $("#head"),
  $eyes = $("#eyes");

$head.click(eventCallbackGen({
  $el: $head,
  maxCount: 9,
  decreasePixels: 367,
  startingPoint: 0,
  animationTime: 500
}));

$eyes.click(eventCallbackGen({
  $el: $eyes,
  maxCount: 9,
  decreasePixels: 367,
  startingPoint: 0,
  animationTime: 500
}));

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：