欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ě)菜好看!

廢話不多說(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ù))

    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-02
  • innerHTML與jquery里的html()區(qū)別介紹

    innerHTML與jquery里的html()區(qū)別介紹

    我原本一直以為innerHTML和jquery里的html其實(shí)是完全一樣的,jquery是多此一舉了,直到我遇到一次問(wèn)題
    2012-10-10
  • jquery表單驗(yàn)證需要做些什么

    jquery表單驗(yàn)證需要做些什么

    jquery表單驗(yàn)證需要做些什么,大家知道嗎?其實(shí)很簡(jiǎn)單只要做四件事情就可以順利完成表單驗(yàn)證,想知道哪四件事情嗎,請(qǐng)仔細(xì)閱讀下文。
    2015-11-11
  • 基于jQuery+JSON的省市二三級(jí)聯(lián)動(dòng)效果

    基于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插件

    這篇文章主要介紹了基于BootStrap環(huán)境寫(xiě)jQuery tabs插件的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-07-07
  • jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn)

    jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn)

    這篇文章主要介紹了jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn),有需要的朋友可以參考一下
    2013-12-12
  • Jquery事件的連接使用示例

    Jquery事件的連接使用示例

    本文以展開(kāi)圖片和收縮圖片為例為大家介紹下Jquery事件的連接的使用方法,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助
    2013-06-06
  • jquery實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼

    jquery實(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
  • jquery prop的使用介紹及與attr的區(qū)別

    jquery prop的使用介紹及與attr的區(qū)別

    Prop和attr的作用類(lèi)似,相同點(diǎn):兩者都可以獲取屬性值和設(shè)置屬性值,下面為大家介紹下具體的使用
    2013-12-12
  • jquery ztree異步搜索(搜葉子)實(shí)踐

    jquery ztree異步搜索(搜葉子)實(shí)踐

    這篇文章主要介紹了jquery ztree異步搜索,即搜葉子實(shí)踐,使用jquery ztree開(kāi)發(fā)的樹(shù)控件經(jīng)常需要進(jìn)行一些異步查找葉子節(jié)點(diǎn)的操作,感興趣的小伙伴們可以參考一下
    2016-02-02

最新評(píng)論