【jQuery点滴】编写高性能的jQuery代码

请记住 – jQuery只是JavaScript。不要以为它有能力来补偿你糟糕的代码。

这意味着,正如我们必须优化JavaScript for语句一样,我们必须优化jQuery的each方法。

[code=”javascript”]
// jQuery’s each method source
each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction(object);

if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) { if ( callback.apply( object[ i++ ], args ) === false ) { break; } } } // A special, fast, case for the most common use of each } else { if ( isObj ) { for ( name in object ) { if ( callback.call( object[ name ], name, object[ name ] ) === false ) { break; } } } else { for ( var value = object[0]; i < length &amp;amp;amp;&amp;amp;amp; callback.call( value, i, value ) !== false; value = object[++i] ) {} } } return object; } [/code] 糟糕的代码: [code="javascript"] someDivs.each(function() { $('#anotherDiv')[0].innerHTML += $(this).text(); }); [/code]

  1. 每一次遍历循环中都会搜寻anotherDiv 这个ID的元素
  2. 两次获取innerHTML属性
  3. 创建了一个jQuery对象,只是为了获取元素的text属性
  4. 优化的代码:
    [code=”javascript”]
    var someDivs = $(‘#container’).find(‘.someDivs’),
    contents = [];

    someDivs.each(function() {
    contents.push( this.innerHTML );
    });
    $(‘#anotherDiv’).html( contents.join(”) );
    [/code]

    这样,在each (for)方法,我们唯一要执行任务的关键是增加一个新的到一个数组…而不是查询DOM中,取代了元素两次获取innerHTML属性等。

【jQuery点滴】保证你的代码安全

在多人合作开发中一定要确保变量,对象,函数等命名不要冲突:
方法一:当别人使用了其他的js库,并该库使用了”$”变量,那么我们可以使用noConflict()方法:
[code=”javascript”]
var j = jQuery.noConflict();
// Now, instead of $, we use j.
j(‘#someDiv’).hide();

// The line below will reference some other library’s $ function.
$(‘someDiv’).style.display = ‘none’;
[/code]

方法二,把你的代码放在一个匿名函数里面,然后把jQuery作为参数传递给它,那么在这个函数体中的$是不会影响外面或者被外面影响的。
[code=”javascript”]
(function($) {
// Within this function, $ will always refer to jQuery
})(jQuery);
[/code]
方法三,通过ready方法传递$
[code=”javascript”]
jQuery(document).ready(function($) {
// $ refers to jQuery
});
// $ is either undefined, or refers to some other library’s function.
[/code]

一不小心写错了,谢谢 birdstudio和QiQiBoY指出!
或者使用简写:
[code=”javascript”]
$(function() {
// let’s get up in heeya
});
[/code]

【jQuery点滴】简写ready方法

在jQuery中监听document 是否 ready的操作:

[code=”javascript”]
$(document).ready(function() {
// let’s get up in heeya
});
[/code]

我们可以简化成:

[code=”javascript”]
$(function() {
// let’s get up in heeya
});
[/code]

我们可以看jQuery源码,可以看出上面两种写法是一样的:

[code=”javascript”]
// HANDLE: $(function)
// Shortcut for document ready
if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
[/code]

【jQuery点滴】不要滥用$(this)

如果不了解javasrcipt中基本的DOM属性和方法的话,很容易滥用jQuery对象。比如:

[code=”javascript”]

$(‘#someAnchor’).click(function() {

alert( $(this).attr(‘id’) );

});

[/code]

如果你只是通过jQ对象获取简单的dom元素的属性比如id,那么你完全可以使用js原生的方法:

[code=”javascript”]

$(‘#someAnchor’).click(function() {

alert( this.id );

});

[/code]

诸如“src,” “href,” 和“style.”等一些属性在老版本的ie中使用了getAttribute方法。

【jQuery点滴】find选择器

jQuery有非常强大的Sizzle引擎来实现选择器,jQuery做了优化,他们能很好的工作,你一般不必担心太多。然而,我们可以稍微做一些改进,将可以使你的脚本略有提高。

一般在jquery中能不要用Sizzle引擎就不要用,当然前面说了只要有可能,就尽量使用.find()方法。比如:

[code=”javascript”]

// Fine in modern browsers, though Sizzle does begin “running”

$(‘#someDiv p.someClass’).hide();

// Better for all browsers, and Sizzle never inits.

$(‘#someDiv’).find(‘p.someClass’).hide();

[/code]

上面两行代码执行的结果是完全一样的,但是下面一句的效率要比上面一句的执行效率高。
现代浏览器(除IE6,IE7)都有QuerySelectorAll支持,能允许你像CSS选择器一样获取对象,而不需要用到jQuery中的Sizzle引擎。jQuery会在使用自己的引擎之前检查是否存在这个函数。

对于IE6/IE7,就需要jQuery使用Sizzle引擎,jQuery会把你的选择器转化成一个数组,并且通过从右往左来迭代匹配。通过正则表达式匹配页面每一个元素,所以你的可以尽量减少选择器的层级,尽可能的使用最右边的选择器,比如使用ID选择器等;这个规则和我们的css的查找规则是一直的,如果你要优化css选择器也要知道这个规则:从右往左来迭代匹配!

尺度把握:

1.保持代码简单

2.尽可能的使用find()查找,使用浏览器的原生查找函数

3.尽可能使用最右边的选择器,比如ID等

【jQuery点滴】jQuery方法总是返回jQuery对象

前几天看到一篇文章《14 Helpful jQuery Tricks, Notes, and Best Practices》感觉很不错,非常时候我这种入门级的人员,所以看懂一条翻译一条,

jQuery方法总是返回jQuery对象:

所以我们可以这样写(链式调用):

[code=”javascript”]

$someDiv.attr(‘class’, ‘someClass’).hide().html(‘new stuff’);

[/code]

为了美观易读也可以这样写:

[code=”javascript”]

$someDiv

.attr(‘class’, ‘someClass’)

.hide()

.html(‘new stuff’);

[/code]

再来看下面的例子:

[code=”javascript”]

var someDiv = $(‘#someDiv’);

someDiv.hide();

[/code]

我们定义的一个元素将隐藏掉,我们可以将代码简化成:

[code=”javascript”]

var someDiv = $(‘#someDiv’).hide();

[/code]

jquery这个特性可以减少我们遍历整个DOM的次数。我们就不用一次次的去遍历整个DOM。

当然还有一种写法,比如:

[code=”javascript”]

var elem = $(‘#elem’);

elem.hide();

elem.html(‘bla’);

elem.otherStuff();

[/code]

虽然这种写法很难看,没使用点语法,但是从性能角度上说,他也是很优化的,因为他只遍历了一次dom,获取jq对象,并把值赋给了elem。在一些特殊的场合你也可以这么使用。