15个值得开发人员关注的jQuery开发技巧和心得

2011-11-17 15:00:41来源:gbin1.com作者:gbin1

在这篇文章中,我们将介绍15个让你的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();
*/

详细你可以查看这篇文章:

    * 如何快速创建一个AJAX的"加载"的图片效果
    *  5个在线Ajax“加载中”旋转图标生成器工具

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,处理属性值,跟踪动画变化等等。

大家可以参考这个文章:jQuery animations

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兵种分类展示效果

data()的jQuery文档:data() in the jQuery docs

15. 本地存储和jQuery

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

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

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

关键词:jQuery开发技巧