快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

jquery中有哪些代码规范

这期内容当中小编将会给大家带来有关jquery中有哪些代码规范,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

创新互联公司是一家企业级云计算解决方案提供商,超15年IDC数据中心运营经验。主营GPU显卡服务器,站群服务器,服务器托管雅安,海外高防服务器,服务器机柜,动态拨号VPS,海外云手机,海外云服务器,海外服务器租用托管等。




 
 菜单栏
 
 
 



 
 
  衬衫
  
  
  • 短袖衬衫
  •   
  • 长袖衬衫
  •   
  • 短袖衬衫
  •   
  • 短袖衬衫
  •          卫衣      
  • 开襟卫衣
  •   
  • 开襟卫衣
  •   
  • 开襟卫衣
  •   
  • 开襟卫衣
  •          裤子      
  • 短袖衬衫
  •   
  • 裤子衬衫
  •   
  • 短袖衬衫
  •   
  • 裤子衬衫
  •       

    童鞋们。请看这段代码

     $(".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中有哪些代码规范了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


    本文名称:jquery中有哪些代码规范
    URL网址:http://6mz.cn/article/pjjphs.html

    其他资讯