jquery代碼規(guī)范讓代碼越來越好看
最近學(xué)了jQuery,感覺這個jQuery是真的挺不錯的，果然像他說的那樣，少些多做！剛一入手感覺真是不錯。但是寫多了，就會發(fā)現(xiàn)這個代碼一行居然能寫那么長。而且可讀性還不好。 有幸自己買了一本鋒利的jQuery這本書。我就整理了下。到底在實際應(yīng)用中怎么讓自己的jQurey的代碼看起來可讀性強，而且還有美感。 我就用了了本書中的一個小例子。來教教大家代碼應(yīng)該怎么寫菜好看！
廢話不多說，想把這個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">衛(wèi)衣</a>
<ul class="level2">
<li>開襟衛(wèi)衣</li>
<li>開襟衛(wèi)衣</li>
<li>開襟衛(wèi)衣</li>
<li>開襟衛(wèi)衣</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;
});
請問你第一眼看著個你能一下子看明白是怎么回事嗎？
哪怕是開發(fā)過幾年的大神。也不能一眼就看出來這行代碼要干啥。就是因為這行代碼太長了。每讀一次都要自講前面的串聯(lián)起來看。毫無美感，閱讀性。
雖然jQuery做到了行為和內(nèi)容的分離，但jQuery代碼也應(yīng)該擁有良好的層次結(jié)構(gòu)機規(guī)范，這樣才能進(jìn)一步改善代碼的可讀性和可維護(hù)性。
所以代碼應(yīng)該寫出這種樣式
$(".level1>a").click(function () {
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("current")
.next().hide();
return false;
});
將每一次對象執(zhí)行的動作分割成單獨一行。這樣可讀性就大大提高了。
但也不要隨意分割，隨意分割那你還不如分割呢。所以總結(jié)了，以下三點
1.對于同一個對象不超過3個操作的，可以直接寫成一行
$(this).addClass("current").show();
2.對于同意對象的較多操作建議，每行寫一個操作
$(this).addClass("current")
.show()
.fadeTo("mouseover")
.fadeTo("fast",1)
.unbind("click")
.click(function(){
//do something
});
3.對于多個對象的少量操作，可以每一個對象寫一行，如果涉及子元素，可以考慮適當(dāng)?shù)目s進(jìn)，例如demo中的代碼
$(this).addClass("current")
.childer("li").show().end()
.siblings().removeClass()
.children("a").hide();
還要強調(diào)一點，就是要為代碼添加注釋；
jQuery 以其強大的選擇器著稱，有時候很復(fù)雜的問題用一行選擇器就可以輕松解決，但是很容易寫出來下面的代碼
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red"); 哈哈，你能一眼認(rèn)出來我嗎？
在編寫一個優(yōu)秀的選擇器的時候，千萬不要忘記給這一段代碼加上注釋，這很重要，無論是自己日后閱讀還是與他人分享、合作開發(fā)，注釋都能起到良好的效果
//注釋：在一個id為table的表格的tbody中，如果每一行的一列中的checkbox沒有被禁用，則把這行的背景設(shè)為紅色
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");
通過類似的有意義的注釋，能夠培養(yǎng)良好的編碼習(xí)慣和風(fēng)格，提高開發(fā)效率。
----------------------------------------------------------更新---------------------------------------------------------
（1）jQuery對象和DOM對象的相互轉(zhuǎn)換
在jQuery對象和DOM對象相互轉(zhuǎn)換之前，先約定好定義變量的風(fēng)格，如果獲取的對象是jQuery對象，那么在變量面前加上$
例如：
var $variable = jQuery對象
如果獲取的DOM對象；
var varible = DOM對象；
以上是jQuery編寫的規(guī)范。希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
JQuery操作表格(隔行著色,高亮顯示,篩選數(shù)據(jù))
最近項目里對表格的操作比較多。以往我們要做一些效果的時候往往通過程序代碼來實現(xiàn)，這個努力不值，因為JQuery是完全可以做到的，并且是客戶端運行，不經(jīng)過服務(wù)器處理，給用戶的反應(yīng)快，也減少了服務(wù)器壓力2012-02-02
innerHTML與jquery里的html()區(qū)別介紹
我原本一直以為innerHTML和jquery里的html其實是完全一樣的，jquery是多此一舉了，直到我遇到一次問題2012-10-10
jquery表單驗證需要做些什么，大家知道嗎？其實很簡單只要做四件事情就可以順利完成表單驗證，想知道哪四件事情嗎，請仔細(xì)閱讀下文。2015-11-11
本文給大家分享的是利用jQuery插件，通過讀取JSON數(shù)據(jù)，實現(xiàn)無刷新動態(tài)下拉省市二（三）級聯(lián)動效果，十分的簡單實用，效果也非常棒，有需要的小伙伴可以參考下。2015-06-06
基于BootStrap環(huán)境寫jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫jQuery tabs插件的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了jquery自動切換tabs選項卡的具體實現(xiàn)，有需要的朋友可以參考一下2013-12-12
本文以展開圖片和收縮圖片為例為大家介紹下Jquery事件的連接的使用方法，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
jquery實現(xiàn)全選功能效果的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query實現(xiàn)全選功能效果的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
Prop和attr的作用類似，相同點：兩者都可以獲取屬性值和設(shè)置屬性值，下面為大家介紹下具體的使用2013-12-12
這篇文章主要介紹了jquery ztree異步搜索，即搜葉子實踐，使用jquery ztree開發(fā)的樹控件經(jīng)常需要進(jìn)行一些異步查找葉子節(jié)點的操作，感興趣的小伙伴們可以參考一下2016-02-02