Einhaltung der OOP Dry-Prinzip

Question

Ich lerne gerade, wie man JQuery verwendet, und ich bin darin verloren, meinen Code zu verdichten und es dem OOP-Trockenprinzip beizubehalten.
Ziel ist es, vier Bilder nach links zu bewegen, wenn man darauf klickt.
Ich habe dies in vier Aussagen, aber ich frage mich, wie man in modularer machen gehen.

Wenn jemand als eine Idee, die mich in die richtige Richtung führen könnte, würde das geschätzt werden.

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; 
     } 
    }); 

Answer 1

Stattdessen spezifische IDs von Targeting, geben alle Elemente die gleiche class. Dann können Sie den Handler an die Klasse binden und $(this) verwenden, um auf das Element zu verweisen, auf das geklickt wurde. Und anstatt globale Variablen wie headclix zu verwenden, können Sie $(this).data() verwenden, um die Klickzahl mit dem Element zu verknüpfen.

$(".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); 
    } 
}); 

Answer 2

Vielleicht ist es nicht die beste Lösung, aber es ist eine bessere Art und Weise zu tun, tun:

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

und Feuer das Ereignis als:

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

oder

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

Offensichtlich ist dies immer ein Beispielcode s können Sie es verbessern.

Answer 3

Sie können eine Funktion erstellen, die die Callback-Funktionen "generiert". Diese Funktion nutzt die Schließung, um den Zähler zu behalten.

Sie könnten diese Funktion anpassbar machen: Es könnte verschiedene Parameter annehmen, um den Callback anpassbarer zu machen. Außerdem könnten diese Parameter "Standard" -Werte haben (zum Beispiel jQuery).

Dies sind nur Ideen, um Ihren Code wiederverwendbar zu machen und Code-Duplizierung zu vermeiden. JS ist in dieser Hinsicht sehr flexibel, und es gibt viele Muster und Möglichkeiten, Dinge zu tun, die die Wiederverwendbarkeit fördern.

Zum Beispiel:

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 
 
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>