Как избежать дублирования кода в JavaScript/jQuery?

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:

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

Затем вы называете эту функцию вместо избыточного кода блока:

checkboxes.click(function() 
{ 
    doCheckboxLogic(); 
}); 

Там не много приобрел здесь, так как это один строка кода в любом случае, но это действительно помогает с инкапсулированием более сложных блоков логики

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