jquery代码规范让代码越来越好看

最近学了jQuery,感觉这个jQuery是真的挺不错的,果然像他说的那样,少些多做!刚一入手感觉真是不错。但是写多了,就会发现这个代码一行居然能写那么长。而且可读性还不好。  有幸自己买了一本锋利的jQuery这本书。我就整理了下。到底在实际应用中怎么让自己的jQurey的代码看起来可读性强,而且还有美感。  我就用了了本书中的一个小例子。来教教大家代码应该怎么写菜好看!

废话不多说,想把这个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="https://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> <ul> <li> <a href="#one">衬衫</a> <ul> <li>短袖衬衫</li> <li>长袖衬衫</li> <li>短袖衬衫</li> <li>短袖衬衫</li> </ul> </li> <li> <a href="#one">卫衣</a> <ul> <li>开襟卫衣</li> <li>开襟卫衣</li> <li>开襟卫衣</li> <li>开襟卫衣</li> </ul> </li> <li> <a href="#one">裤子</a> <ul> <li>短袖衬衫</li> <li>裤子衬衫</li> <li>短袖衬衫</li> <li>裤子衬衫</li> </ul> </li> </ul> </div> </body> </html>

童鞋们。请看这段代码

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

请问你第一眼看着个你能一下子看明白是怎么回事吗?

哪怕是开发过几年的大神。也不能一眼就看出来这行代码要干啥。就是因为这行代码太长了。每读一次都要自讲前面的串联起来看。毫无美感,阅读性。

虽然jQuery做到了行为和内容的分离,但jQuery代码也应该拥有良好的层次结构机规范,这样才能进一步改善代码的可读性和可维护性。

所以代码应该写出这种样式

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

将每一次对象执行的动作分割成单独一行。这样可读性就大大提高了。

但也不要随意分割,随意分割那你还不如分割呢。所以总结了,以下三点

1.对于同一个对象不超过3个操作的,可以直接写成一行

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

2.对于同意对象的较多操作建议,每行写一个操作

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

3.对于多个对象的少量操作,可以每一个对象写一行,如果涉及子元素,可以考虑适当的缩进,例如demo中的代码

$(this).addClass("current") .childer("li").show().end() .siblings().removeClass() .children("a").hide();

还要强调一点,就是要为代码添加注释;

jQuery 以其强大的选择器著称,有时候很复杂的问题用一行选择器就可以轻松解决,但是很容易写出来下面的代码

$("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red"); 哈哈,你能一眼认出来我吗?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwgsjd.html