快捷導(dǎo)航

jquery代碼規(guī)范讓代碼越來(lái)越好看

更新時(shí)間：2017年02月03日 15:22:33 作者：?jiǎn)蜗壬?

本文主要介紹了jquery的代碼規(guī)范。具有很好的參考價(jià)值，下面跟著小編一起來(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ě)菜好看！

廢話(huà)不多說(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)，就是要為代碼添加注釋?zhuān)?/p>

jQuery 以其強(qiáng)大的選擇器著稱(chē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)不要忘記給這一段代碼加上注釋?zhuā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)似的有意義的注釋?zhuān)軌蚺囵B(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í)也希望多多支持腳本之家！

您可能感興趣的文章: