面条式的jQuery代码

$('input[name="tshirt_delivery"]:checked').parent().next().find('input[name="express_address"]').removeAttr('disabled');
    });
$('input[name="group"]').click(function(){
    if($('input[name="gendergroup"]:checked').val() == '接力組'){
        $('input[name="gendergroup"]').removeAttr('checked');
        $('.groupname_selecter').hide();
    }
});
$('input[name="payment"]').click(function(){
    if($('input[name="payment"]:checked').val()=='現在繳交報名費及籌款額'){
        $('.step-9 .js_donorsform').parent().show();
        $('.donorsform fieldset').show();
        $('.donorsform fieldset input').removeAttr('disabled');
        donationamount();
    }else{
        $('#os_form').validationEngine('hideAll');
        $('.step-9 .js_donorsform').parent().hide();
        $('.donorsform fieldset').hide();
        $('.donorsform fieldset input').attr('disabled','disabled');
        $('#DonationAmount').val('0');
        DonationAmountTMP();
    }
    $('.step-9 .donorsform-row td[class*="js_donorsform"]').html('');
    $('div.sectionwrap').css('height',$('.donorsform').parent().outerHeight());
});
$('#receive_messages_view').click(function(){
    var checked = $(this).attr('checked');
    if(checked =='checked'){
        $('input[name="receive_messages"]').eq(1).click();
    }else{
        $('input[name="receive_messages"]').eq(0).click();
    }
});

这是我见过大多数前端的写法。jQuery是个很好的工具，新手入门必学，没有框架规则，想到就用，可以很直接粗暴地实现目的。但这样的代码要是超过了一千行，让你改你会愿意吗？

改这样的代码我的感觉就像验眼，因为那是很考眼力的事，你不得不从代码中查到它对应的HTML位置，而某个HTML元素受到什么代码的影响你可能完全没有办法。这类代码的缺点就是完全跟它的影响目标脱离了视觉上的关系。并且它高度依赖HTML的结构。

我对烂代码的定义有三：1. 可读性差 2. 不可复用 3. 不可扩展。而高度依赖HTML结构就变得不可重用。HTML是个表现层，它有很大的可能被修改或者调整布局，而jQuery代码的多根面条连接着HTML的每一个元素，只要HTML的布局稍移下位，面条都断了，代码就废了，到时候你想一根根面条贴上去吗？

我建议至少让HTML元素与响应它的javascript产生一些联系，并且尽可能缩小对HTML元素的操作范围。
以下为点击显示一个DIV层的例子：

<a href="#" data-action="show" data-target="#content">show DIV</a>
<div id="content" class="hide">....</div>

$('[data-action="show"]').each(function(i, el){
    $(el).bind('click', function() {
        // 这里不用show()，我坚持认为外观是CSS的事，javascript不应该干涉
        $($(el).data('target')).removeClass('hide');
    });
});

以上的例子代码，让HTML元素与javascript产生了视觉关联，程序员很容易找到影响它的代码，而且data-action="show"可以用于更多的HTML元素，并且在data-target指定了影响目标，没有依赖于HTML结构，可视布局调整情况来修改目标参数。这并不是最好的解决方案，但总比面条代码强多了。