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

废话不多说,想把这个demo代码奉上。各位爷!您瞧好啊~

虽然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");

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

jquery代码规范让代码越来越好看的更多相关文章

  1. 代码规范、代码复审、PSP

    作业三: 代码规范.代码复审.PSP 代码规范 代码规范的重要性 一.规范的代码可以促进团队合作  一个项目大多都是由一个团队来完成,如果没有统一的代码规范,那么每个人的代码必定会风格迥异.且不说会存 ...

  2. 个人博客作业Week2(代码规范,代码复审)

    Q:是否需要有代码规范 首先我们来搞清楚什么是“代码规范”,它和“代码风格”又有什么关系.依据个人的审美角度,我可能更喜欢在函数与函数之间空出一行,可能在命名习惯和代码注释上更加的internatio ...

  3. 作业三: 代码规范、代码复审、PSP

    分) 对于是否需要有代码规范,请考虑下列论点并反驳/支持: 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 我是个艺术家,手艺人,我有自己的规范和原则. 规范不能 ...

  4. 作业三:代码规范、代码复审、PSP

    一.代码规范 我认为我们编写的代码都需要进行规范的操作,因为如果为了图省事情或者为了减少时间去完成这个编程.在最后检验的时候就会出现一些警告,导致你这次编程的代码出现问题,当出现问题的时候你在回头去检 ...

  5. 作业三(代码规范、代码复审、PSP)

    1.代码规范: 我支持代码要有规范,理由如下. (1).艺术是一个很带有个人风格的学科,天马行空才能凸显出自己的价值.但不要忘了,会艺术的不是生下来就会艺术, 他也需要按照前辈的步骤一步一步的学习基础 ...

  6. web前端代码规范 - HTML代码规范

    Bootstrap HTML编码规范 本文转载自w3cschool. 由于bootstrap得到了世界的认可,因此,此规范用于规范html代码有一定的说服力. 交流qq群:164858883.欢迎各位 ...

  7. Python代码规范之---代码不规范,亲人两行泪

    任何语言的程序员,编写出符合规范的代码,是开始程序生涯的第一步! 关于代码规范 Python 官方提供有一系列 PEP(Python Enhancement Proposals) 文档 其中第 8 篇 ...

  8. web前端代码规范——css代码规范

    Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个 ...

  9. cocos2d c++ 代码规范(译文)

    原文在http://cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d_c++_coding_style,我觉得这个规范非常全面,写的非常好,我只捡一些我认为比 ...

随机推荐

  1. centos 6.5 安装 cx_Oracle 5.12 步骤 ,使用oracle instantclient12.1

    新建sh文件 内容如下: 以su用户执行这个文件 #!/bin/bash # INSTALL ORACLE INSTANT CLIENT # ############################# ...

  2. Unity3D优化之合并网格

    原文地址点击这里

  3. 算法笔记_057:蓝桥杯练习 最大的算式 (Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果尽量大.因为乘号和加号一共就 ...

  4. 算法笔记_049:奇偶数排序(Java)

    目录 1 问题描述 2 解决方案 2.1 一头一尾指针往中间扫描法 2.2 一前一后两个指针同时往后扫描法   1 问题描述 给定一个整数数组,请调整 数组中数的顺序,使得所有奇数位于数组的前半部分, ...

  5. <译>Flink官方文档-Flink概述

    Overview This documentation is for Apache Flink version 1.0-SNAPSHOT, which is the current developme ...

  6. windows下更换jdk运行当前jar包处理命令一则

    可在文本文档中新建以下内容 set JAVA_HOME=C:\jdk1.7.0_67set CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOMe%\lib\too ...

  7. MySQL数据库的查询缓冲机制

    MySQL数据库的查询缓冲机制 2011-08-10 11:07 佚名 火魔网 字号:T | T 使用查询缓冲机制,可以极大地提高MySQL数据库查询的效率,节省查询所用的时间.那么查询缓冲机制是怎样 ...

  8. 计算机文件基本上分为二种:二进制文件和 ASCII(也称纯文本文件)

    文本文件是可以看到的字符, 二进制文件是不可视字符,如图片. 二进制文件: 包含在 ASCII及扩展 ASCII 字符中编写的数据或程序指令的文件.计算机文件基本上分为二种:二进制文件和 ASCII( ...

  9. 前端资源管理工具sourcetree

    https://www.sourcetreeapp.com/

  10. Django中使用haystack进行全文检索时需要注意的坑

    对于haystack的配置什么的我在这里就不必说什么了,毕竟一搜一大把. 直接说重点 1 当你通过继承haystack的views来自定义django 应用的views 时,你要注意heystack ...