面条式的jQuery代码

wuyumin 发布于2019-08-22 11:00 / 1911人阅读

摘要：并且它高度依赖的结构。这并不是最好的解决方案，但总比面条代码强多了。

$("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层的例子：

show 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结构，可视布局调整情况来修改目标参数。这并不是最好的解决方案，但总比面条代码强多了。

GPU云服务器云服务器 jquery代码 jquery菜单代码 jquery代码优化 jquery分页代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91601.html

jQuery老矣，尚能饭否

摘要：后现代的已经到了暮年，该退出浏览器的舞台了吗体积过大很多人诟病体积很大，占用资源很多，但是让我们来看一下最新的的大小。因为这就是个人写代码能力的问题了。。。。随着时代的发展，的市场占有率是越来越少，以后会不会完全被抛弃，这我不知道。作者：陈大鱼头 github： KRISACHAN 发展历程 write less, do more -- John Resig 在2005年8...

韩冰 2019-05-22 19:25 评论0 收藏0
两行代码的故事

摘要：第一行代码完全能看懂，就是用选择指定的元素，代码最后加了，是因为用选择器得到的结果是数组。好了，短短的两行代码，花了自己一上午才研究清楚，也是蛮有意思的，哈哈。今天上午闲来无事，就想着把前端相关资源汇总这篇文章中收集的链接整理一下，看到《jQuery === 面条式代码？》这篇文章的时候，感觉里面的代码挺有意思，于是就一边读文章，一边照着敲代码。敲到文章第一节中一段 JS...

AlphaWallet 2019-08-22 13:48 评论0 收藏0
成为一个PHP专家：缺失的环节

摘要：为了成为一个专家，他必须先成为中级者。它非常适合于急于求成或者没有太多技术的人，但掌握绝对无法使你成为一个专业的开发者它使用意大利面条式的编码，教你的是不合适的设计原则。这一篇文章是Becoming a PHP Professional系列 4 篇博文中的第 1 篇。当浏览各类与PHP相关的博客时，比如Quora上的问题，谷歌群组，简讯和杂志，我经常注意到技能的等级分化。问题都类...

cooxer 2019-07-01 14:09 评论0 收藏0
设计架构

摘要：先来看一张系统前后端架构模型图。一种接口的约定本文用于定义一种统一的接口设计方案，希望具有参考价值。，和都是常见的软件架构设计模式，它通过分离关注点来改进代码的组织方式。如何无痛降低 if else 面条代码复杂度相信不少同学在维护老项目时，都遇到过在深深的 if else 之间纠缠的业务逻辑。面对这样的一团乱麻，简单粗暴地继续增量修改常常只会让复杂度越来越高，可读性越来越差，有没...

graf 2019-06-24 17:56 评论0 收藏0
Web技术的前世今生（二）

摘要：前言我是，如果你还不认识我，不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三前言：我是JavaScript，如果你还不认识我，不妨先看看《Web技术的前世今生（一）》平静的生活已经有一段日子了。这一天，HTML大哥面露不悦地走过来问我： Js，你是打算和我们分家吗？大哥，您这说的哪里话，我什么地方做的不对么？我一脸茫然地回答道。哼，...

Stardustsky 2019-08-30 15:55 评论0 收藏0