脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery代码规范让代码越来越好看

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

 更新时间：2017年02月03日 15:22:33   作者：单先生  
本文主要介绍了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="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">卫衣</a>
  <ul class="level2">
  <li>开襟卫衣</li>
  <li>开襟卫衣</li>
  <li>开襟卫衣</li>
  <li>开襟卫衣</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>

童鞋们。请看这段代码

 $(".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操作表格(隔行着色,高亮显示,筛选数据)

    JQuery操作表格(隔行着色,高亮显示,筛选数据)

    最近项目里对表格的操作比较多。以往我们要做一些效果的时候往往通过程序代码来实现，这个努力不值，因为JQuery是完全可以做到的，并且是客户端运行，不经过服务器处理，给用户的反应快，也减少了服务器压力
    2012-02-02
  • innerHTML与jquery里的html()区别介绍

    innerHTML与jquery里的html()区别介绍

    我原本一直以为innerHTML和jquery里的html其实是完全一样的，jquery是多此一举了，直到我遇到一次问题
    2012-10-10
  • jquery表单验证需要做些什么

    jquery表单验证需要做些什么

    jquery表单验证需要做些什么，大家知道吗？其实很简单只要做四件事情就可以顺利完成表单验证，想知道哪四件事情吗，请仔细阅读下文。
    2015-11-11
  • 基于jQuery+JSON的省市二三级联动效果

    基于jQuery+JSON的省市二三级联动效果

    本文给大家分享的是利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果，十分的简单实用，效果也非常棒，有需要的小伙伴可以参考下。
    2015-06-06
  • 基于BootStrap环境写jQuery tabs插件

    基于BootStrap环境写jQuery tabs插件

    这篇文章主要介绍了基于BootStrap环境写jQuery tabs插件的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • jquery自动切换tabs选项卡的具体实现

    jquery自动切换tabs选项卡的具体实现

    这篇文章主要介绍了jquery自动切换tabs选项卡的具体实现，有需要的朋友可以参考一下
    2013-12-12
  • Jquery事件的连接使用示例

    Jquery事件的连接使用示例

    本文以展开图片和收缩图片为例为大家介绍下Jquery事件的连接的使用方法，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-06-06
  • jquery实现全选功能效果的实现代码

    jquery实现全选功能效果的实现代码

    下面小编就为大家带来一篇jquery实现全选功能效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jquery prop的使用介绍及与attr的区别

    jquery prop的使用介绍及与attr的区别

    Prop和attr的作用类似，相同点：两者都可以获取属性值和设置属性值，下面为大家介绍下具体的使用
    2013-12-12
  • jquery ztree异步搜索（搜叶子）实践

    jquery ztree异步搜索（搜叶子）实践

    这篇文章主要介绍了jquery ztree异步搜索，即搜叶子实践，使用jquery ztree开发的树控件经常需要进行一些异步查找叶子节点的操作，感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论