Question

首先，一点免责声明：我不是使用javaScript / jQuery的高手，尽管我已经处理过很多次了。最近，我有时发现自己被强制制作冗余代码，即重复不同事件的代码行，因为我不知道如何以更有效的方式做到这一点。一个小例子是在检查页面中是否选中任何复选框后启用按钮。这可以在页面加载时或在选择任何复选框后完成：

var checkboxes = $("input[type='checkbox']");

$('#nextfl').attr("disabled", !checkboxes.is(":checked"));

checkboxes.click(function()
{
    $('#nextfl').attr("disabled", !checkboxes.is(":checked"));
});

我不认为这可以使用bind或on函数来解决，例如，因为它引用了与同一元素无关的事件。我相信它必须存在一个简单的解决方案，但正如我之前所说的，我在JS / jQ方面经验不足，并且有一些类似的情况，我重复了几十行代码，当然至少是糟糕的做法。

Answer 1

您始终可以使用javascript：

将冗余代码拆分为多个函数

The following web applications were stopped (reloaded, undeployed), but their
classes from previous runs are still loaded in memory, thus causing a memory
leak (use a profiler to confirm):
/mmkms-v1
/mmkms-v1
/mmkms-v1`

然后调用该函数代替冗余代码块：

function doCheckboxLogic () {
    $('#nextfl').attr("disabled", !checkboxes.is(":checked"));
    // and any other logic that needs to be done
}

这里获得的内容并不多，因为无论如何它都是一行代码，但这确实有助于封装更复杂的逻辑块

Answer 2

在这种情况下，最佳做法是将常用逻辑提取到自己的函数中，可以根据需要调用它。试试这个：

$(function() {
    var $checkboxes = $("input[type='checkbox']");

    function checkState() {
        $('#nextfl').attr("disabled", !$checkboxes.is(":checked"));
    }

    $checkboxes.click(checkState); // run the function on click of a checkbox
    checkState(); // run it on load of the page
});

如何避免JavaScript / jQuery中的重复代码？

2 个答案: