jquery - jQuery - 改进代码并消除重复

Question

我对各种 jQuery 方法进行了一系列调用，我只是想知道是否有办法清理此代码，将其转换为我将选择器传递给的函数，或者任何其他可以使代码更易于管理的方法/可维护。我所拥有的是一个非常长的代码行列表，这些代码行有很多重复：

...
$('#boxcolor').on('change', function() {
    $('header').css('background-color', $('#boxcolor').val());
});
$('#color').on('change', function(){
    $('header').css('color',$('#color').val());
});
$('#size').keyup(function() {
    $('header').css('font-size', $('#size').val() + 'px');    
});
...

任何建议都会很棒，谢谢。

Answer 1

只是我的建议：

var header = $('header');

$('#boxcolor').change({
    property: 'background-color'
}, handler );

$('#color').change({
    property: 'color'
}, handler );

$('#size').keyup({
    property: 'font-size',
    unit: 'px'
}, handler );

function handler( e ) {
    header.css( e.data.property, $( this ).val() + ( e.data.unit || "" ) );
}

Answer 2

我没有看到很多可以重构的东西，但是，如果你总是选择标题，你可以这样做：

var changeHeaderStyles = function() {
   var header = $('header');
   //use a clousure here to only get the header once
   return function(cssObject) {
       $header.css(cssObject);
   }
}(); 

//Then..
$('#size').keyup(function() {
    changeHeaderStyles({ 'font-size': $('#size').val() + 'px' });    
});

因此，您可以一次更改多个样式，并且可以清楚地阅读正在发生的事情。

希望能帮助到你