推荐设备MORE

图标设计网站

图标设计网站

行业知识

怎么注册微信小程序_jquery代码规范让代码越来越

日期:2021-01-12
我要分享
jquery代码规范让代码越来越好看       本文主要介绍了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="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 
 a href="#one" 衬衫 /a 
 li 短袖衬衫 /li 
 li 长袖衬衫 /li 
 li 短袖衬衫 /li 
 li 短袖衬衫 /li 
 /ul 
 /li 
 a href="#one" 卫衣 /a 
 li 开襟卫衣 /li 
 li 开襟卫衣 /li 
 li 开襟卫衣 /li 
 li 开襟卫衣 /li 
 /ul 
 /li 
 a href="#one" 裤子 /a 
 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"); 哈哈,你能一眼认出来我吗?

在编写一个优秀的选择器的时候,千万不要忘记给这一段代码加上注释,这很重要,无论是自己日后阅读还是与他人分享、合作开发,注释都能起到良好的效果

//注释:在一个id为table的表格的tbody中,如果每一行的一列中的checkbox没有被禁用,则把这行的背景设为红色
$("#table tbody tr:has(td:has(:checkbox:enabled))").css("background","red");

通过类似的有意义的注释,能够培养良好的编码习惯和风格,提高开发效率。

----------------------------------------------------------更新---------------------------------------------------------

(1)jQuery对象和DOM对象的相互转换

在jQuery对象和DOM对象相互转换之前,先约定好定义变量的风格,如果获取的对象是jQuery对象,那么在变量面前加上$

例如:

var $variable = jQuery对象

如果获取的DOM对象;

var varible = DOM对象;

以上是jQuery编写的规范。希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!