快捷導(dǎo)航

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

更新時(shí)間：2017年02月03日 15:22:33 作者：單先生

本文主要介紹了jquery的代碼規(guī)范。具有很好的參考價(jià)值，下面跟著小編一起來看下吧

最近學(xué)了jQuery,感覺這個(gè)jQuery是真的挺不錯(cuò)的，果然像他說的那樣，少些多做！剛一入手感覺真是不錯(cuò)。但是寫多了，就會(huì)發(fā)現(xiàn)這個(gè)代碼一行居然能寫那么長。而且可讀性還不好。有幸自己買了一本鋒利的jQuery這本書。我就整理了下。到底在實(shí)際應(yīng)用中怎么讓自己的jQurey的代碼看起來可讀性強(qiáng)，而且還有美感。我就用了了本書中的一個(gè)小例子。來教教大家代碼應(yīng)該怎么寫菜好看！

廢話不多說，想把這個(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>長袖襯衫</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>

童鞋們。請(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)檫@行代碼太長了。每讀一次都要自講前面的串聯(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ī)范。希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: