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