Question

我有这个jQuery代码：

var thumb = $($('#slider').children('.ui-slider-handle'));   
setLabelPosition();    

$('#slider').bind('slide', function (event, ui) {   
    $('#boksTimer').html((((ui.value) / 31) * 60).toFixed(0) + ' min pr. dag');
    setLabelPosition();
});


    function setLabelPosition() {
    var label = $('#boksTimer');
    label.css('top', '10px');
    label.css('left', thumb.position().left - (label.width() - thumb.width())/ 2);        
}


var thumb2 = $($('#slider2').children('.ui-slider-handle'));   
setLabelPosition2();    

$('#slider2').bind('slide', function (event, ui) {   
    $('#boksTimer2').html((((ui.value) / 31) * 60).toFixed(0) + ' min pr. dag');
    setLabelPosition2();
});


    function setLabelPosition2() {
    var label2 = $('#boksTimer2');
    label.css('top', '10px');
    label.css('left', thumb2.position().left - (label2.width() - thumb2.width())/ 2);        
}


var thumb3 = $($('#slider3').children('.ui-slider-handle'));   
setLabelPosition3();    

$('#slider3').bind('slide', function (event, ui) {   
    $('#boksTimer3').html((((ui.value) / 31) * 60).toFixed(0) + ' min pr. dag');
    setLabelPosition3();
});


    function setLabelPosition3() {
    var label3 = $('#boksTimer3');
    label.css('top', '10px');
    label.css('left', thumb3.position().left - (label3.width() - thumb3.width())/ 2);        
}

我怎样才能让它更干？

DRY =不要重复自己

Answer 1

这是我能想到的最简单的方法：

$('#slider, #slider2, #slider3').bind('slide', function (event, ui)
{
    var num = this.id.replace('slider',''),
        $label = $('#boksTimer' + num).html( (ui.value / 31 * 60).toFixed(0) + ' min pr. dag' ),
        $thumb = $(this).children('.ui-slider-handle');

    $label.css({
        top: 10,
        left: $thumb.position().left - ( $label.width() - $thumb.width() ) / 2
    });
});

那就是说，你应该考虑修改你的代码以使用类。

Answer 2

首先，您可以在函数中设置参数 - 传入参数 - 而不是仅使用不同的名称制作两个相同的函数。

function setLabelPosition(element) {        
    var label = $(element);
    label.css('top', '10px');
    label.css('left', thumb.position().left - (label.width() - thumb.width())/ 2);        
}

但我不得不说如果你在stackexchange的代码审查部分发布这个建议，你可能会得到更多有用的建议：https://codereview.stackexchange.com/

您网站中的Javascript可以增长并增长，直到它变得混乱为止。您还应该考虑使用Backbone.js，Knockout.js，Sproutcore或Dojo等组织框架。

他们都有能力帮助您将javascript组织到模型和视图中。

Answer 3

将数据与代码分开。创建可能是字典的“配置对象”，例如：

// not using javascript syntax but just describing the concept

cfg1={'name':'slider1', 'timerName':'boksTimer2',}
cfg2={'name':'slider3', 'timerName':'boksTimer3',}

function renderCfg(cfg) {

// use different cfgs here to do whatever you want

}

Answer 4

您可以用以下代码替换整个代码块：

 function bindSlider(slider, boks) {
    var boks$ = $(boks), slider$ = $(slider), thumb$ = slider$.children('.ui-slider-handle'); 
    slider$.bind('slide', function (event, ui) {   
        boks$.html((((ui.value) / 31) * 60).toFixed(0) + ' min pr. dag')
            .css({'top': '10px', 'left', thumb$.position().left - (boks$.width() - boks$.width())/ 2});
    });
}

bindSlider('#slider', '#boksTimer');
bindSlider('#slider2', '#boksTimer2');
bindSlider('#slider3', '#boksTimer3');

或者，更简洁的是这样：

$('#slider, #slider2, #slider3').bind('slide', function (event, ui) {   
    var boks$ = $("#boksTimer" + this.id.replace("slider", ""));
    boks$.html((((ui.value) / 31) * 60).toFixed(0) + ' min pr. dag')
        .css({'top': '10px', 'left', $(this).children('.ui-slider-handle').position().left - (boks$.width() - boks$.width())/ 2});
});

将DRY原则应用于此jQuery代码

4 个答案: