JQuery最佳实践
2014-08-10 08:42
330 查看
翻译自:http://stackoverflow.com/questions/1229259/jquery-pitfalls-to-avoid
1. 将相同的选择器赋值给局部变量或使用链式写法。
l Bad:
$('#button').click(function() {
$('#label').method();
$('#label').method2();
$('#label').css('background-color', 'red');
});
l Good:
$('#button').click(function() {
var$label = $('#label');
$label.method();
$label.method2();
$label.css('background-color', 'red');
});
l Better:
$('#button').click(function() {
$("#label").method().method2().css("background-color", "red");
});
2. 使用上下文提高查询速度。
l Bad:
//默认情况下将搜索全部文档对象下class 为myClass的元素。
$(‘.myClass’);
l Good:
var ct = $('#myContainer');
//将从myContainer子元素下搜索class 为myClass的元素
$('.myClass', ct);
3. 尽量使用命名的function,便于代码的复用。
l Bad:
//Avoid
$('#div').click(
function(){
//do something
});
l Good:
//Do do
function divClickFn (){
//do something
}
$('#div').click( divClickFn );
4. 建议:
l 避免滥用documentready
l 仅在代码初始化中使用documentready
l 将documentready中的方法提取到外部,以便代码重用。
5. 在使用$.ajax的使用进行使用success替代complete
6. 拥有回调的动画事件的链式写法:
l Bad:此写法remove()方法将在fadeOut()方法完成之前调用,破换掉淡出动画。
$("p").click(function(e) {
$(this).fadeOut("slow").remove();
});
l Good:
$("p").click(function(e){
$(this).fadeOut("slow",
function(){
$(this).remove();
});
});
7. 尽量少用插件,便于维护和升级。
8. 当不确定是否已绑定事件情况下可以使用:unbind(‘click’).bind(‘click’)
9. 建议:
l 尽量考虑使用选择器替代循环查找
l 使用Firebug之类工具调试
10. 避免上下文中标识符混淆:
l Bad:目的是两次使用被点击对象进行处理。
$( "#first_element").click(
function( event)
{
$(this).method( );
//referring to first_element
$(".listOfElements").each(
function()
{
$(this).someMethod( );
// here 'this' is not referring first_elementanymore.
})
});
l Good:
$( "#first_element").click(
function( event)
{
$(this).method( );
//referring to first_element
var $that =
this;
$(".listOfElements").each(
function()
{
$that.someMethod( ); // here 'that' is referring to first_elementstill.
})
});
11. 使用find检索加快搜索:
l Bad:
$("#form.text").this();
$("#form.int").that();
$("#form.choice").method();
l Good:
$("#form")
.find(".text").this().end()
.find(".int").that().end()
.find(".choice").method();
12. 尽量在.each()中缓存$(this),如下:
$(selector).each(function () {
var eachOf_X_loop = $(this);
})
13. 事件拷贝:使用如下方式将不会拷贝原有的绑定事件,可以通过clone(true)来拷贝事件。
$("selector").html($("another-selector").html());
14. 使用暂存创建的html元素来替代过多直接使用的.html(),.append(),.prepend()等。
l Bad:
var $parent = $('#parent');
var iterations =
10;
for (var i =
0; i < iterations; i++){
var $div = $('<div class="foo-' + i+
'" />');
$parent.append($div);
}
l Good:
var $parent = $('#parent');
var iterations =
10;
var html = '';
for (var i =
0; i < iterations; i++){
html += '<divclass="foo-' + i +
'"></div>';
}
$parent.append(html);
以下翻译自http://stackoverflow.com/tags/jquery/info的BestPractices and Commonly Made Mistakes
15. 使用jquery一定要有$(document).ready
16. 若使用的$符号与其他框架冲突,可使用$.noConflict();或给jQuery起别称。
17. 尽可能的暂存你检索的对象以及使用链式写法。
18. 变量命名转换,在JQuery中使用以$开始区分变量与标准对象。如:var $this = $(this);
19. 获取DOM对象的属性及方法:
l Bad:
$('img').click(function() {
$(this).attr('src');
//Bad!
});
l Good:
$('img').click(function() {
this.src; //Much, much better
});
20. 更易读更简洁的创建元素形式:
$('<p>', {
text: 'Thisis a ' + variable,
"class": 'blue slider',
title: variable,
id: variable + i
}).appendTo(obj);
1. 将相同的选择器赋值给局部变量或使用链式写法。
l Bad:
$('#button').click(function() {
$('#label').method();
$('#label').method2();
$('#label').css('background-color', 'red');
});
l Good:
$('#button').click(function() {
var$label = $('#label');
$label.method();
$label.method2();
$label.css('background-color', 'red');
});
l Better:
$('#button').click(function() {
$("#label").method().method2().css("background-color", "red");
});
2. 使用上下文提高查询速度。
l Bad:
//默认情况下将搜索全部文档对象下class 为myClass的元素。
$(‘.myClass’);
l Good:
var ct = $('#myContainer');
//将从myContainer子元素下搜索class 为myClass的元素
$('.myClass', ct);
3. 尽量使用命名的function,便于代码的复用。
l Bad:
//Avoid
$('#div').click(
function(){
//do something
});
l Good:
//Do do
function divClickFn (){
//do something
}
$('#div').click( divClickFn );
4. 建议:
l 避免滥用documentready
l 仅在代码初始化中使用documentready
l 将documentready中的方法提取到外部,以便代码重用。
5. 在使用$.ajax的使用进行使用success替代complete
6. 拥有回调的动画事件的链式写法:
l Bad:此写法remove()方法将在fadeOut()方法完成之前调用,破换掉淡出动画。
$("p").click(function(e) {
$(this).fadeOut("slow").remove();
});
l Good:
$("p").click(function(e){
$(this).fadeOut("slow",
function(){
$(this).remove();
});
});
7. 尽量少用插件,便于维护和升级。
8. 当不确定是否已绑定事件情况下可以使用:unbind(‘click’).bind(‘click’)
9. 建议:
l 尽量考虑使用选择器替代循环查找
l 使用Firebug之类工具调试
10. 避免上下文中标识符混淆:
l Bad:目的是两次使用被点击对象进行处理。
$( "#first_element").click(
function( event)
{
$(this).method( );
//referring to first_element
$(".listOfElements").each(
function()
{
$(this).someMethod( );
// here 'this' is not referring first_elementanymore.
})
});
l Good:
$( "#first_element").click(
function( event)
{
$(this).method( );
//referring to first_element
var $that =
this;
$(".listOfElements").each(
function()
{
$that.someMethod( ); // here 'that' is referring to first_elementstill.
})
});
11. 使用find检索加快搜索:
l Bad:
$("#form.text").this();
$("#form.int").that();
$("#form.choice").method();
l Good:
$("#form")
.find(".text").this().end()
.find(".int").that().end()
.find(".choice").method();
12. 尽量在.each()中缓存$(this),如下:
$(selector).each(function () {
var eachOf_X_loop = $(this);
})
13. 事件拷贝:使用如下方式将不会拷贝原有的绑定事件,可以通过clone(true)来拷贝事件。
$("selector").html($("another-selector").html());
14. 使用暂存创建的html元素来替代过多直接使用的.html(),.append(),.prepend()等。
l Bad:
var $parent = $('#parent');
var iterations =
10;
for (var i =
0; i < iterations; i++){
var $div = $('<div class="foo-' + i+
'" />');
$parent.append($div);
}
l Good:
var $parent = $('#parent');
var iterations =
10;
var html = '';
for (var i =
0; i < iterations; i++){
html += '<divclass="foo-' + i +
'"></div>';
}
$parent.append(html);
以下翻译自http://stackoverflow.com/tags/jquery/info的BestPractices and Commonly Made Mistakes
15. 使用jquery一定要有$(document).ready
16. 若使用的$符号与其他框架冲突,可使用$.noConflict();或给jQuery起别称。
17. 尽可能的暂存你检索的对象以及使用链式写法。
18. 变量命名转换,在JQuery中使用以$开始区分变量与标准对象。如:var $this = $(this);
19. 获取DOM对象的属性及方法:
l Bad:
$('img').click(function() {
$(this).attr('src');
//Bad!
});
l Good:
$('img').click(function() {
this.src; //Much, much better
});
20. 更易读更简洁的创建元素形式:
$('<p>', {
text: 'Thisis a ' + variable,
"class": 'blue slider',
title: variable,
id: variable + i
}).appendTo(obj);
相关文章推荐
- JQuery最佳实践-简单图片导航插件jquery.imgNav.js
- JQuery最佳实践-xMarquee插件V1.0
- JQuery最佳实践(转)
- jQuery最佳实践
- jQuery最佳实践
- 本周ASP.NET英文技术文章推荐[02/17 - 02/23]:AJAX、History、jQuery、最佳实践、LINQ、Visual Studio、JavaScript、IIS
- JQuery最佳实践—-看完绝对提升你的代码质量
- jQuery最佳实践
- jQuery最佳实践
- Jquery最佳实践
- JQuery最佳实践-JQuery自定义事件的应用
- jquery性能最佳实践
- JQuery最佳实践:JQuery自定义事件的应用
- jQuery最佳实践
- 14个非常有用的jquery技巧,注意事项和最佳实践
- JQuery最佳实践-imgSlide插件V1.0
- JQuery最佳实践-精妙的自定义事件
- jquery提升性能最佳实践小结
- 【转】jQuery最佳实践
- jQuery最佳实践