15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】


Posted in Javascript onMay 25, 2016

本文总结述了15个值得开发人员关注的jQuery开发技巧和心得。非常精辟实用!分享给大家供大家参考,具体如下:

在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢!

1. 尽量使用最新版本的jQuery类库

jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag,何乐而不为呢?
我们也可以使用免费的CDN服务,例如, Google来存放jQuery类库。

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

2. 使用简单的选择器

直到最近,返回DOM元素的方式都是解析选择器字符串,JavaScript循环和内建的javascript API,例如, getElementbyId(),getElementsByTagName(),getElementsByClassName()三种方式的整合使用。但是现代浏览器都开始支持querySelectorAll(),这个方法能够理解CSS查询器,而且能带来显著的性能提升。

然而,我们应该避免使用复杂的选择器返回元素。更不用说很多用户使用老版本的浏览器,强迫jQuery去处理DOM树。这个方式非常慢。

$('li[data-selected="true"] a')  // Fancy, but slow
$('li.selected a')  // Better
$('#elem')  // Best

选择id是最快速的方式。如果你需要使用class名称, 那么你最好带上tag名称,这样会更快些。特别是在老浏览器和移动设备上。

访问DOM是javascript应用最慢的方式 ,因此尽量少使用。使用变量去保存选择器,这样会使用cache来保存。性能更好。

var buttons = $('#navigation a.button');
// Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');

另外一个值得做的是jQuery给了你很多的额外便利选择器 ,例如,:visible,:hidden,:animated还有其它,这些不是合法的CSS3选择器。结果是你使用这些类库就不能有效地利用 querySelectorAll() 方法。为了弥补这个问题,你需要先选择元素,再过滤,如下:

$('a.button:animated');  // Does not use querySelectorAll()
$('a.button').filter(':animated');  // Uses it

3. 数组方式使用jQuery对象

运行选择器的结果是一个jQuery对象。然而,jQuery类库让你感觉你正在使用一个定义了index和长度的数组。

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');
// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
  console.log(buttons[i]);  // A DOM element, not a jQuery object
}
// We can even slice it:
var firstFour = buttons.slice(0,4);

如果性能是你关注的,那么使用简单for或者while循环来处理,而不是$.each(),这样能使你的代码更快。

检查长度也是一个检查你的collection是否含有元素的方式。

if(buttons){ // This is always true
  // Do something
}
if(buttons.length){ // True only if buttons contains elements
  // Do something
}

4. 选择器属性

jQuery提供了一个属性,这个属性显示了用来做链式的选择器。

$('#container li:first-child').selector
// #container li:first-child
$('#container li').filter(':first-child').selector
// #container li.filter(:first-child)

虽然上面的例子针对同样的元素,选择器则完全不一样。第二个实际上是非法的,你不可以使用它来创建一个对象。只能用来显示filter方法是用来缩小collection。

5. 创建一个空的jQuery对象

创建一个新的jQuery空间能极大的减小开销。有时候,你可能需要创建一个空的对象,然后使用add()方法添加对象。

var container = $([]);
container.add(another_element);

这也是quickEach方法的基础,你可以使用这种更快的方式而非each()。

6. 选择一个随机元素

上面我提到过,jQuery添加它自己的选择器过滤。除了类库,你可以添加自己的过滤器。只需要添加一个新的方法到$.expr[':']对象。一个非常棒的使用方式是Waldek Mastykarz的博客中提到的:创建一个用来返回随机元素的选择器。你可以修改下面代码:

(function($){
  var random = 0;
  $.expr[':'].random = function(a, i, m, r) {
    if (i == 0) {
      random = Math.floor(Math.random() * r.length);
    }
    return i == random;
  };
})(jQuery);
// This is how you use it:
$('li:random').addClass('glow');

7. 使用CSS Hooks

CSS hooks API是提供开发人员得到和设置特定的CSS数值的方法。使用它,你可以隐藏浏览器特定的执行并且使用一个统一的界面来存取特定的属性。

$.cssHooks['borderRadius'] = {
    get: function(elem, computed, extra){
      // Depending on the browser, read the value of
      // -moz-border-radius, -webkit-border-radius or border-radius
    },
    set: function(elem, value){
      // Set the appropriate CSS3 property
    }
};
// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

更好的在于,人们已经创建了一个支持CSS hooks类库

8. 使用自定义的删除方法

你可能听到过jQuery的删除插件,它能够允许你给你的动画添加特效。唯一的缺点是你的访问者需要加载另外一个javascript文件。幸运的是,你可以简单的从插件拷贝效果,并且添加到jQuery.easing对象中,如下:

$.easing.easeInOutQuad = function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
};
// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

9. $.proxy()

使用callback方法的缺点之一是当执行类库中的方法后,context被设置到另外一个元素,例如:

<div id="panel" style="display:none">
  <button>Close</button>
</div>

执行下面代码:

$('#panel').fadeIn(function(){
  // this points to #panel
  $('#panel button').click(function(){
    // this points to the button
    $(this).fadeOut();
  });
});

你将遇到问题,button会消失,不是panel。使用$.proxy方法,你可以这样书写代码:

$('#panel').fadeIn(function(){
  // Using $.proxy to bind this:
  $('#panel button').click($.proxy(function(){
    // this points to #panel
    $(this).fadeOut();
  },this));
});

这样才正确的执行。$.proxy方法接受两个参数,你最初的方法,还有context。这里阅读更多$.proxy in the docs.。

10. 判断页面是否太过复杂

一个非常简单的道理,约复杂的页面,加载的速度越慢。你可以使用下面代码检查一下你的页面内容:

console.log( $('*').length );

以上代码返回的数值越小,网页加载速度越快。你可以考虑通过删除无用多余的元素来优化你的代码

11. 将你的代码转化成jQuery插件

如果你要花一定得时间去开发一段jQuery代码,那么你可以考虑将代码变成插件。这将能够帮助你重用代码,并且能够有效的帮助你组织代码。创建一个插件代码如下:

(function($){
  $.fn.yourPluginName = function(){
    // Your code goes here
    return this;
  };
})(jQuery);

你可以在这里阅读更多开发教程。

12.  设置全局AJAX为缺省

如果你开发ajax程序的话,你肯定需要有”加载中“之类的显示告知用户,ajax正在进行,我们可以使用如下代码统一管理,如下:

// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
  url      : '/ajax/',
  dataType  : 'json'
});
$.ajaxStart(function(){
  showIndicator();
  disableButtons();
});
$.ajaxComplete(function(){
  hideIndicator();
  enableButtons();
});
/*
  // Additional methods you can use:
  $.ajaxStop();
  $.ajaxError();
  $.ajaxSuccess();
  $.ajaxSend();
*/

13. 在动画中使用delay()方法

链式的动画效果是jQuery的强大之处。但是有一个忽略了的细节就是你可以在动画之间加上delays,如下:

// This is wrong:
$('#elem').animate({width:200},function(){
  setTimeout(function(){
    $('#elem').animate({marginTop:100});
  },2000);
});
// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

jQuery动画帮了我们大忙,否则我们得自己处理一堆的细节,设置timtout,处理属性值,跟踪动画变化等等。

14. 合理利用HTML5的Data属性

HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法,可以有效的利用HTML5的属性,来自动得到数据。下面是个例子:

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"
  data-options='{"name":"John"}'>
</div>

为了存取数据你需要调用如下代码:

$("#d1").data("role"); // "page"
$("#d1").data("lastValue"); // 43
$("#d1").data("hidden"); // true;
$("#d1").data("options").name; // "John";

如果你想看看实际的例子,请参考这篇教程:

HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果:https://3water.com/article/85050.htm

15. 本地存储和jQuery

本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中:

localStorage.someData = "This is going to be saved across page refreshes and browser restarts";

但是对于老的浏览器来说,这个不是个好消息。因为他们不支持。但是我们可以使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可以使得本地存储功能正常工作。

以上是我们介绍的15个jQuery的开发技巧。希望本文所述对大家jQuery程序设计有所帮助。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 #Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 #Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 #Javascript
js提交form表单,并传递参数的实现方法
May 25 #Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 #Javascript
动态设置form表单的action属性的值的简单方法
May 25 #Javascript
Angularjs过滤器使用详解
May 25 #Javascript
You might like
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php头像上传预览实例代码
2017/05/02 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
python实现斐波那契递归函数的方法
2014/09/08 Python
Python中的with...as用法介绍
2015/05/28 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Python实现全排列的打印
2018/08/18 Python
python对于requests的封装方法详解
2019/01/03 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
护士感人事迹
2014/05/01 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python