最近學了jQuery,感覺這個jQuery是真的挺不錯的，果然像他說的那樣，少些多做！剛一入手感覺真是不錯。但是寫多了，就會發現這個代碼一行居然能寫那么長。而且可讀性還不好。 有幸自己買了一本鋒利的jQuery這本書。我就整理了下。到底在實際應用中怎么讓自己的jQurey的代碼看起來可讀性強，而且還有美感。 我就用了了本書中的一個小例子。來教教大家代碼應該怎么寫菜好看！
廢話不多說，想把這個demo代碼奉上。各位爺！您瞧好啊~
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>菜單欄</title> <style> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 280px; background-color: red; margin: 50px auto; border: 1px solid #000; } .box .menu{ width: 100%; height: 100%; background-color: gold; list-style: none; } .box .menu>.level1{ width: 100%; height: auto; line-height: 40px; list-style: none; } .box .menu>.level1>a.current{ background-color: green; color: #0a0a0a; text-decoration: none; } .box .menu>.level1>a{ display: inline-block; background-color: gray; width: 100%; text-align: center; text-decoration: none; } .box .menu>.level1>.level2{ width: 100%; height: 160px; background-color: white; display: none; float: left; } .box .menu>.level1:nth-of-type(1)>.level2{ display: block; } .box .menu>.level1>.level2 li{ width: 100%; height: 40px; list-style: none; background-color: gainsboro; text-align: center; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script> $(function () { $(".level1>a").click(function () { $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide(); return false; }); }); </script></head><body><div class="box"> <ul class="menu"> <li class="level1"> <a href="#one" class="current">襯衫</a> <ul class="level2"> <li>短袖襯衫</li> <li>長袖襯衫</li> <li>短袖襯衫</li> <li>短袖襯衫</li> </ul> </li> <li class="level1"> <a href="#one">衛衣</a> <ul class="level2"> <li>開襟衛衣</li> <li>開襟衛衣</li> <li>開襟衛衣</li> <li>開襟衛衣</li> </ul> </li> <li class="level1"> <a href="#one">褲子</a> <ul class="level2"> <li>短袖襯衫</li> <li>褲子襯衫</li> <li>短袖襯衫</li> <li>褲子襯衫</li> </ul> </li> </ul></div></body></html>童鞋們。請看這段代碼
$(".level1>a").click(function () { $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide(); return false; });請問你第一眼看著個你能一下子看明白是怎么回事嗎？
哪怕是開發過幾年的大神。也不能一眼就看出來這行代碼要干啥。就是因為這行代碼太長了。每讀一次都要自講前面的串聯起來看。毫無美感，閱讀性。
雖然jQuery做到了行為和內容的分離，但jQuery代碼也應該擁有良好的層次結構機規范，這樣才能進一步改善代碼的可讀性和可維護性。
所以代碼應該寫出這種樣式
$(".level1>a").click(function () { $(this).addClass("current") .next().show() .parent().siblings().children("a").removeClass("current") .next().hide(); return false; });將每一次對象執行的動作分割成單獨一行。這樣可讀性就大大提高了。
但也不要隨意分割，隨意分割那你還不如分割呢。所以總結了，以下三點
1.對于同一個對象不超過3個操作的，可以直接寫成一行
$(this).addClass("current").show();
2.對于同意對象的較多操作建議，每行寫一個操作
$(this).addClass("current") .show() .fadeTo("mouseover") .fadeTo("fast",1) .unbind("click") .click(function(){ //do something });3.對于多個對象的少量操作，可以每一個對象寫一行，如果涉及子元素，可以考慮適當的縮進，例如demo中的代碼
$(this).addClass("current") .childer("li").show().end().siblings().removeClass() .children("a").hide(); 還要強調一點，就是要為代碼添加注釋；
jQuery 以其強大的選擇器著稱，有時候很復雜的問題用一行選擇器就可以輕松解決，但是很容易寫出來下面的代碼
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red"); 哈哈，你能一眼認出來我嗎？
在編寫一個優秀的選擇器的時候，千萬不要忘記給這一段代碼加上注釋，這很重要，無論是自己日后閱讀還是與他人分享、合作開發，注釋都能起到良好的效果
//注釋：在一個id為table的表格的tbody中，如果每一行的一列中的checkbox沒有被禁用，則把這行的背景設為紅色
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");
通過類似的有意義的注釋，能夠培養良好的編碼習慣和風格，提高開發效率。
----------------------------------------------------------更新---------------------------------------------------------
（1）jQuery對象和DOM對象的相互轉換
在jQuery對象和DOM對象相互轉換之前，先約定好定義變量的風格，如果獲取的對象是jQuery對象，那么在變量面前加上$
例如：
var $variable = jQuery對象
如果獲取的DOM對象；
var varible = DOM對象；
以上是jQuery編寫的規范。希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
