摘要:并且它高度依賴的結構。這并不是最好的解決方案,但總比面條代碼強多了。
$("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結構,可視布局調整情況來修改目標參數。這并不是最好的解決方案,但總比面條代碼強多了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91601.html
摘要:后現代的已經到了暮年,該退出瀏覽器的舞臺了嗎體積過大很多人詬病體積很大,占用資源很多,但是讓我們來看一下最新的的大小。因為這就是個人寫代碼能力的問題了。。。。隨著時代的發展,的市場占有率是越來越少,以后會不會完全被拋棄,這我不知道。 作者:陳大魚頭 github: KRISACHAN 發展歷程 write less, do more -- John Resig ? 在2005年8...
摘要:第一行代碼完全能看懂,就是用選擇指定的元素,代碼最后加了,是因為用選擇器得到的結果是數組。好了,短短的兩行代碼,花了自己一上午才研究清楚,也是蠻有意思的,哈哈。 今天上午閑來無事,就想著把 前端相關資源匯總 這篇文章中收集的鏈接整理一下,看到 《jQuery === 面條式代碼?》 這篇文章的時候,感覺里面的代碼挺有意思 ,于是就一邊讀文章,一邊照著敲代碼。 敲到文章第一節中一段 JS...
摘要:為了成為一個專家,他必須先成為中級者。它非常適合于急于求成或者沒有太多技術的人,但掌握絕對無法使你成為一個專業的開發者它使用意大利面條式的編碼,教你的是不合適的設計原則。 這一篇文章是Becoming a PHP Professional系列 4 篇博文中的第 1 篇。 當瀏覽各類與PHP相關的博客時,比如Quora上的問題,谷歌群組,簡訊和雜志,我經常注意到技能的等級分化。問題都類...
摘要:前言我是,如果你還不認識我,不妨先看看技術的前世今生一平靜的生活已經有一段日子了。傳送門技術的前世今生一技術的前世今生三 前言:我是JavaScript,如果你還不認識我,不妨先看看《Web技術的前世今生(一)》 平靜的生活已經有一段日子了。 這一天,HTML大哥面露不悅地走過來問我: Js,你是打算和我們分家嗎? 大哥,您這說的哪里話,我什么地方做的不對么?我一臉茫然地回答道。 哼,...
閱讀 1634·2021-09-22 15:25
閱讀 1512·2021-09-07 10:06
閱讀 3190·2019-08-30 15:53
閱讀 1095·2019-08-29 13:12
閱讀 3385·2019-08-29 13:07
閱讀 734·2019-08-28 18:19
閱讀 2277·2019-08-27 10:57
閱讀 989·2019-08-26 13:29