Question

我正在尝试学习DRY编码，并想知道如何使用更少的代码来完成这类工作。

即我有这样的事情：

var option_shipping = $('#option_shipping div.selected .tag').text(),
    option_payment = $('#option_payment div.selected .tag').text(); 

if(option_shipping.length < 1) {

    error = 1;  

    $('.option_shipping_wrap').addClass('attention');

}

if(option_payment.length < 1) {

    error = 1;

    $('.option_payment_wrap').addClass('attention');

}

这样的事情最简单的方法是什么？

Answer 1

怎么样：

function checkLengthError(obj_type) {
    var option = $('#option_'+obj_type+' div.selected .tag').text()
    if(option.length < 1) {
        error = 1;  
        $('.option_'+obj_type_'_wrap').addClass('attention');
    }
}
checkLengthError('shipping');
checkLengthError('payment');

一般来说，你应该寻找什么是重复的，什么不是。您重复对DOM对象执行的操作，但您只是切换正在操作的对象 - 因此请想一下如何“全局化”对象的引用，以便变量例如可以更改正在访问的对象，以及变量（或参数，在这种情况下）只会更改一次，以便在另一个对象上完成整个作业。

简而言之，这里只有'运费'和'付款'是不同的，所以在我的例子中我只是确保我可以将它们更改为我需要的东西并将所有内容转储到一个可以轻松访问和修改的函数中以避免当你想要改变某些东西时重复代码和重复编辑。

Answer 2

试试这个（如果每个项目都有一个option_的前缀，你甚至可以缩短这个

$(document).ready(function() {
    var arr = [ "option_shipping", "option_payment", ... ]; var error = 0;
    $.each(arr,function(index, item)
    {
        if ($('#'+item+' div.selected .tag').text().length < 1) {
                    error++;
                    $('.'+item+'_wrap').addClass('attention');
                }
    });
});

Answer 3

像这样......

function BringAttentionTo(optionName) {
    var text = $('option_' + optionName + ' div.selected .tag').text();
    if (text.length < 1) {
        $('.option_' + optionName + '_wrap').addClass('attention');
        return true;
    }
    return false;
}

if (BringAttentionTo('shipping')) error = 1;
if (BringAttentionTo('payment')) error = 1;

Answer 4

考虑使用jQuery validation plugin。在这种情况下，您必须为实际验证编写几乎没有代码，但只需定义一些规则。

Answer 5

如果你使用jQuery，你可以根据自己的需要制作一个小插件：

jQuery.fn.checkShipping = function () {
    return this.each(function () {
        var txt = jQuery(this).find('div.selected .tag').text(),
            wrapId = this.id+'_wrap';
        if (!txt.length) {
            error = 1;
            jQuery('#'+wrapId).addClass('attention');
        }
    });
};

然后你可以在任何地方调用它，并享受链接的优势：

$('#option_shipping, #option_payment').checkShipping().hide().doSomethingElse();

如何做这个简单的几乎相同的js没有那么多重复？

5 个答案: