JQuery最佳实践及常见错误

1 使用JQuery的ready处理器

如果你的代码操作DOM，则需要DOM加载完成后再运行代码。推荐使用如下的第一种写法，第二种写法在JQuery3.x中已经不推荐使用了。

$(function () { 
    /* 你的代码 */ 
});

//或者
$(document).ready(function () { 
    /* 你的代码 */ 
});

2 用noConflict()避免冲突并定义别名

如果你的jQuery代码与其它使用$符号作为别名的类库冲突，则使用noConflict（）方法定义别名。

$jq = jQuery.noConflict();
$jq(function () {
    /* 你的代码 */ 
}

3 缓存JQuery对象及链式调用

调用jQuery选择器函数$()代价较大，反复调用效率更低。

3.1 错误的方式

//错误
$('#list li').addClass('strong');
$('#list li').css('color', 'red');

3.2 缓存JQuery对象

//正确
var $li = $('#list li');
$li.addClass('strong');
$li.css('color', 'red');

3.3 链式调用

//正确
$('#list li').addClass('strong').css('color', 'red');

4 JQuery变量命名习惯

jQuery包装变量通常以$开头，以区别于标准JavaScript对象。

//良好的命名习惯
var $li = $('#list li');

5 利用DOM原生的属性和函数

虽然jQuery的目标之一是对DOM进行抽象，但利用DOM原生的属性和函数效率更高。在不了解DOM的情况下学习jQuery的人中最常犯的错误之一就是利用jQuery访问元素的属性。

5.1 冗长而缓慢

$('img').click(function () {
    $(this).attr('src');  
});

5.2 简洁而快速

$('img').click(function () {
    this.src;  
});

6 创建元素的通用语法

6.1 创建元素通用语法方式

$('<p>', {
    text: p_text, 
    "class": 'red', 
    title: p_title, 
    id:  p_id
}).appendTo("#myDiv");

6.2 字符串拼接方式

$('<p class="red" id="'+p_id+'" title="'+p_title+'">'+p_text+'</p>').appendTo(#myDiv);

虽然上述两种方式语法正确，功能相同，但是第一种方式更好。第二种字符串拼接的方式可读性差，也更脆弱。

第一种方式对特殊字符的输入是十分强大的。但第二种方式效率较第一种方式更好一些。