遵循面向對象的乾燥原理

我剛剛學習如何使用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; 
     } 
    });

來源

2016-11-18 EricShock

OOP和DRY是兩個不同的原則。 – Barmar

什麼是'clix'數組？ – Barmar

歡迎來到Stack Overflow！如果（a）您的代碼按預期工作，（b）您的代碼是真實代碼，而不是示例代碼，（c）您的代碼包含在問題的正文中，則此問題可能適用於[代碼審閱] http://codereview.stackexchange.com/help）。如果您希望通過同行評議來改進代碼的所有*方面，請將其發佈在代碼評審中。 –

而不是定位特定的ID，給所有的元素相同的class。然後，您可以將處理程序綁定到該類，並使用$(this)來引用單擊的元素。而不是使用像headclix這樣的全局變量，您可以使用$(this).data()將點擊數與元素相關聯。

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

來源

2016-11-18 17:33:15 Barmar

也許它不是最好的解決辦法，但它是一個更好的辦法，這樣做的：

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

，並觸發事件爲：

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

或

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

顯然，這是一個示例代碼，總是你可以改進它。

來源

2016-11-18 17:34:46 rogelio

您可以創建一個「生成」回調函數的函數。此功能利用關閉來保持櫃檯。

您可以使此函數可定製：它可能需要不同的參數才能使回調更加可定製。此外，此參數可能具有「默認」值（例如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 
 
}));

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

來源

2016-11-18 17:57:41 acontell

遵循面向對象的乾燥原理

回答

相關問題