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


Posted in Javascript onFebruary 03, 2017

最近学了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编写的规范。希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
经验几则 推荐
Sep 05 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
Javascript for in的缺陷总结
Feb 03 #Javascript
canvas绘制七巧板
Feb 03 #Javascript
JS对象是否拥有某属性如何判断
Feb 03 #Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 #Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 #Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 #Javascript
几种tab切换详解
Feb 03 #Javascript
You might like
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python批量爬取下载抖音视频
2019/06/17 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
浅谈django 重载str 方法
2020/05/19 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
学前班评语大全
2014/05/04 职场文书
党员群众路线承诺书
2014/05/20 职场文书
十佳少年事迹材料
2014/12/25 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python