这期内容当中小编将会给大家带来有关值得开发人员关注的jQuery开发技巧和心得具体有哪些,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的。
jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag,何乐而不为呢?
我们也可以使用免费的CDN服务,例如, Google来存放jQuery类库。
$('#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.。
一个非常简单的道理,约复杂的页面,加载的速度越慢。你可以使用下面代码检查一下你的页面内容:
console.log( $('*').length );
以上代码返回的数值越小,网页加载速度越快。你可以考虑通过删除无用多余的元素来优化你的代码
如果你要花一定得时间去开发一段jQuery代码,那么你可以考虑将代码变成插件。这将能够帮助你重用代码,并且能够有效的帮助你组织代码。创建一个插件代码如下:
(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);
你可以在这里阅读更多开发教程。
如果你开发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();
*/
链式的动画效果是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
HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法,可以有效的利用HTML5的属性,来自动得到数据。下面是个例子:
<p id="d1" data-role="page" data-last-value="43" data-hidden="true"
data-options='{"name":"John"}'>
</p>
为了存取数据你需要调用如下代码:
$("#d1").data("role");// "page"
$("#d1").data("lastValue");// 43
$("#d1").data("hidden");// true;
$("#d1").data("options").name;// "John";
data()的jQuery文档:data() in the jQuery docs
本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中:
// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
// if not - load the data from the server
value = load_data_from_server();
// and save it
$.jStorage.set("key",value);
}
// Use value
但是对于老的浏览器来说,这个不是个好消息。因为他们不支持。但是我们可以使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可以使得本地存储功能正常工作。
以上就上有关15个值得开发人员关注的jQuery开发技巧和心得的全部内容,亿速云全面介绍编程技术、操作系统、数据库、web前端技术等内容。
上述就是小编为大家分享的值得开发人员关注的jQuery开发技巧和心得具体有哪些了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。