面条式的jQuery代码

2024年1月14日 174次阅读 来源: 猫之良品 
$('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构造，可视规划调解状况来修正目的参数。这并非最好的解决方案，但总比面条代码强多了。

    原文作者：猫之良品
    原文地址: https://segmentfault.com/a/1190000004309896
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞