应用DRY原则这个jQuery代码

我有这样的jQuery代码：应用DRY原则这个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 =不要重复自己

来源

2012-01-25 Rails beginner

这味道像[代码评论]（http://codereview.stackexchange.com/）... – cheeken

它应该做什么？ – j08691

我只是有一堆像这样的滑块：http://jsfiddle.net/z3xV3/50/ 7 –

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

$('#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 
    }); 
});

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

来源

2012-01-25 01:33:44

@Railsbeginner - 我不明白你想说什么。我发布的代码应该适用于所有的滑块。 –

您的'this.id.slice（-1）'不适用于不以数字结尾的ID。你可以做'var num = this.id.replace（'slider'，''）;' – 2012-01-25 01:47:56

@amnotiam - 这就是为什么我使用了'parseInt'，所以我确信它是一个数字;但我忘了我会得到'NaN'。我更新了我的答案。谢谢。 –

原因之一是，你可以在你的功能设置参数 - 在参数传递 - 而不是仅仅使两个不同名称的相同的功能。

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组织到模型和视图中。

来源

2012-01-25 01:28:25 PhillipKregg

不在元。在codereview上。 –

是 - 发布太快了。修正了，谢谢。 – PhillipKregg

从代码中分离数据。创建“配置对象”可能是字典，如：

// 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 

}

来源

2012-01-25 01:35:50 Sid

做了这样的投票，不要做任何解释。不能帮助海报或任何人不知道原因 – Sid

你可以用这个代替整个代码块：

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

来源

2012-01-25 02:09:20 jfriend00

应用DRY原则这个jQuery代码

回答

相关问题