成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

面條式的jQuery代碼

wuyumin / 1962人閱讀

摘要：并且它高度依賴的結(jié)構(gòu)。這并不是最好的解決方案，但總比面條代碼強(qiáng)多了。

$("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()=="現(xiàn)在繳交報(bào)名費(fèi)及籌款額"){
        $(".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();
    }
});

這是我見(jiàn)過(guò)大多數(shù)前端的寫法。jQuery是個(gè)很好的工具，新手入門必學(xué)，沒(méi)有框架規(guī)則，想到就用，可以很直接粗暴地實(shí)現(xiàn)目的。但這樣的代碼要是超過(guò)了一千行，讓你改你會(huì)愿意嗎？

改這樣的代碼我的感覺(jué)就像驗(yàn)眼，因?yàn)槟鞘呛芸佳哿Φ氖?，你不得不從代碼中查到它對(duì)應(yīng)的HTML位置，而某個(gè)HTML元素受到什么代碼的影響你可能完全沒(méi)有辦法。這類代碼的缺點(diǎn)就是完全跟它的影響目標(biāo)脫離了視覺(jué)上的關(guān)系。并且它高度依賴HTML的結(jié)構(gòu)。

我對(duì)爛代碼的定義有三：1. 可讀性差 2. 不可復(fù)用 3. 不可擴(kuò)展。而高度依賴HTML結(jié)構(gòu)就變得不可重用。HTML是個(gè)表現(xiàn)層，它有很大的可能被修改或者調(diào)整布局，而jQuery代碼的多根面條連接著HTML的每一個(gè)元素，只要HTML的布局稍移下位，面條都斷了，代碼就廢了，到時(shí)候你想一根根面條貼上去嗎？

我建議至少讓HTML元素與響應(yīng)它的javascript產(chǎn)生一些聯(lián)系，并且盡可能縮小對(duì)HTML元素的操作范圍。
以下為點(diǎn)擊顯示一個(gè)DIV層的例子：

show DIV

....
$("[data-action="show"]").each(function(i, el){
    $(el).bind("click", function() {
        // 這里不用show()，我堅(jiān)持認(rèn)為外觀是CSS的事，javascript不應(yīng)該干涉
        $($(el).data("target")).removeClass("hide");
    });
});

以上的例子代碼，讓HTML元素與javascript產(chǎn)生了視覺(jué)關(guān)聯(lián)，程序員很容易找到影響它的代碼，而且data-action="show"可以用于更多的HTML元素，并且在data-target指定了影響目標(biāo)，沒(méi)有依賴于HTML結(jié)構(gòu)，可視布局調(diào)整情況來(lái)修改目標(biāo)參數(shù)。這并不是最好的解決方案，但總比面條代碼強(qiáng)多了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91601.html

相關(guān)文章

  • jQuery老矣，尚能飯否

    摘要：后現(xiàn)代的已經(jīng)到了暮年，該退出瀏覽器的舞臺(tái)了嗎體積過(guò)大很多人詬病體積很大，占用資源很多，但是讓我們來(lái)看一下最新的的大小。因?yàn)檫@就是個(gè)人寫代碼能力的問(wèn)題了。。。。隨著時(shí)代的發(fā)展，的市場(chǎng)占有率是越來(lái)越少，以后會(huì)不會(huì)完全被拋棄，這我不知道。 作者：陳大魚頭 github： KRISACHAN 發(fā)展歷程 write less, do more -- John Resig ? 在2005年8...

    韓冰 評(píng)論0 收藏0

  • 兩行代碼的故事

    摘要：第一行代碼完全能看懂，就是用選擇指定的元素，代碼最后加了，是因?yàn)橛眠x擇器得到的結(jié)果是數(shù)組。好了，短短的兩行代碼，花了自己一上午才研究清楚，也是蠻有意思的，哈哈。 今天上午閑來(lái)無(wú)事，就想著把 前端相關(guān)資源匯總 這篇文章中收集的鏈接整理一下，看到 《jQuery === 面條式代碼？》 這篇文章的時(shí)候，感覺(jué)里面的代碼挺有意思 ，于是就一邊讀文章，一邊照著敲代碼。 敲到文章第一節(jié)中一段 JS...

    AlphaWallet 評(píng)論0 收藏0

  • 成為一個(gè)PHP專家：缺失的環(huán)節(jié)

    摘要：為了成為一個(gè)專家，他必須先成為中級(jí)者。它非常適合于急于求成或者沒(méi)有太多技術(shù)的人，但掌握絕對(duì)無(wú)法使你成為一個(gè)專業(yè)的開(kāi)發(fā)者它使用意大利面條式的編碼，教你的是不合適的設(shè)計(jì)原則。 這一篇文章是Becoming a PHP Professional系列 4 篇博文中的第 1 篇。 當(dāng)瀏覽各類與PHP相關(guān)的博客時(shí)，比如Quora上的問(wèn)題，谷歌群組，簡(jiǎn)訊和雜志，我經(jīng)常注意到技能的等級(jí)分化。問(wèn)題都類...

    cooxer 評(píng)論0 收藏0

  • 設(shè)計(jì)架構(gòu)

    摘要：先來(lái)看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設(shè)計(jì)方案，希望具有參考價(jià)值。，和都是常見(jiàn)的軟件架構(gòu)設(shè)計(jì)模式，它通過(guò)分離關(guān)注點(diǎn)來(lái)改進(jìn)代碼的組織方式。 如何無(wú)痛降低 if else 面條代碼復(fù)雜度 相信不少同學(xué)在維護(hù)老項(xiàng)目時(shí)，都遇到過(guò)在深深的 if else 之間糾纏的業(yè)務(wù)邏輯。面對(duì)這樣的一團(tuán)亂麻，簡(jiǎn)單粗暴地繼續(xù)增量修改常常只會(huì)讓復(fù)雜度越來(lái)越高，可讀性越來(lái)越差，有沒(méi)...

    graf 評(píng)論0 收藏0

  • Web技術(shù)的前世今生（二）

    摘要：前言我是，如果你還不認(rèn)識(shí)我，不妨先看看技術(shù)的前世今生一平靜的生活已經(jīng)有一段日子了。傳送門技術(shù)的前世今生一技術(shù)的前世今生三 前言：我是JavaScript，如果你還不認(rèn)識(shí)我，不妨先看看《Web技術(shù)的前世今生（一）》 平靜的生活已經(jīng)有一段日子了。 這一天，HTML大哥面露不悅地走過(guò)來(lái)問(wèn)我： Js，你是打算和我們分家嗎？ 大哥，您這說(shuō)的哪里話，我什么地方做的不對(duì)么？我一臉茫然地回答道。 哼，...

    Stardustsky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<