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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
编写兼容IE和FireFox的脚本
May 18 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 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
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
使用node.js 制作网站前台后台
2014/11/13 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python实现简单字典树的方法
2016/04/29 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python实现自动解数独小程序
2019/01/21 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python模块内置属性概念及实例
2021/02/18 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
空乘英文求职信
2014/04/13 职场文书
学校志愿者活动总结
2014/06/27 职场文书
大学开学感言
2015/08/01 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB