jquery中有哪些代碼規(guī)范

 
 
 
 
 



 
 
  襯衫
  
  
短袖襯衫
  
長(zhǎng)袖襯衫
  
短袖襯衫
  
短袖襯衫
  
 
 
  衛(wèi)衣
  
  
開襟衛(wèi)衣
  
開襟衛(wèi)衣
  
開襟衛(wèi)衣
  
開襟衛(wèi)衣
  
 
 
  褲子
  
  
短袖襯衫
  
褲子襯衫
  
短袖襯衫
  
褲子襯衫
  
 
 

童鞋們。請(qǐng)看這段代碼

 $(".level1>a").click(function () {
  $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
  return false;
  });

請(qǐng)問你第一眼看著個(gè)你能一下子看明白是怎么回事嗎？

哪怕是開發(fā)過幾年的大神。也不能一眼就看出來這行代碼要干啥。就是因?yàn)檫@行代碼太長(zhǎng)了。每讀一次都要自講前面的串聯(lián)起來看。毫無美感，閱讀性。

雖然jQuery做到了行為和內(nèi)容的分離，但jQuery代碼也應(yīng)該擁有良好的層次結(jié)構(gòu)機(jī)規(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;
  });

將每一次對(duì)象執(zhí)行的動(dòng)作分割成單獨(dú)一行。這樣可讀性就大大提高了。

但也不要隨意分割，隨意分割那你還不如分割呢。所以總結(jié)了，以下三點(diǎn)

1.對(duì)于同一個(gè)對(duì)象不超過3個(gè)操作的，可以直接寫成一行

  $(this).addClass("current").show();

2.對(duì)于同意對(duì)象的較多操作建議，每行寫一個(gè)操作

 $(this).addClass("current")
  .show()
  .fadeTo("mouseover")
  .fadeTo("fast",1)
  .unbind("click")
  .click(function(){
  //do something
  });

3.對(duì)于多個(gè)對(duì)象的少量操作，可以每一個(gè)對(duì)象寫一行，如果涉及子元素，可以考慮適當(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ù)雜的問題用一行選擇器就可以輕松解決，但是很容易寫出來下面的代碼

$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");哈哈，你能一眼認(rèn)出來我嗎？

在編寫一個(gè)優(yōu)秀的選擇器的時(shí)候，千萬不要忘記給這一段代碼加上注釋，這很重要，無論是自己日后閱讀還是與他人分享、合作開發(fā)，注釋都能起到良好的效果

//注釋：在一個(gè)id為table的表格的tbody中，如果每一行的一列中的checkbox沒有被禁用，則把這行的背景設(shè)為紅色
$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");

通過類似的有意義的注釋，能夠培養(yǎng)良好的編碼習(xí)慣和風(fēng)格，提高開發(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中有哪些代碼規(guī)范了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。