jQuery性能优化指南

世雄

3.将jquery对象缓存起来

要养成将jquery对象缓存进变量的习惯.

永远不要这样做:

$(‘#traffic_light input.on).bind(’click‘, function(){…});

$(’#traffic_light input.on).css(‘border’, ‘3px dashed yellow’);

$(‘#traffic_light input.on).css(’background-color‘, ‘orange‘);

$(’#traffic_light input.on).fadeIn(’slow’);

最好先将对象缓存进一个变量然后再操作:

var $active_light = $(‘#traffic_light input.on’);

$active_light.bind(‘click’, function(){…});

$active_light.css(‘border’, ‘3px dashed yellow’);

$active_light.css(‘background-color’, ‘orange’);

$active_light.fadeIn(’slow’);

为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次.

缓存jquery结果,备用

如果你打算将jquery结果对象用在程序的其它部分,或者你的function会多次执行, 那么就将他们缓存到一个全局变量中.

定义一个全局容器来存放jquery结果, 我们就可以在其它函数引用它们:

// 在全局范围定义一个对象 (例如: window对象)

window.$my =

{

// 初始化所有可能会不止一次要使用的查询

head : $(‘head’),

traffic_light : $(‘#traffic_light’),

traffic_button : $(‘#traffic_button’)

};

function do_something()

{

// 现在你可以引用存储的结果并操作它们

var script = document.createElement(’script’);

$my.head.append(script);

// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.

$my.cool_results = $(‘#some_ul li’);

$my.other_results = $(‘#some_table td’);

// 将全局函数作为一个普通的jquery对象去使用.

$my.other_results.css(‘border-color’, ‘red’);

$my.traffic_light.css(‘border-color’, ‘green’);

}

4. 掌握强大的链式操作

上面的例子也可以写成这样:

var $active_light = $(‘#traffic_light input.on’);$active_light.bind(‘click’, function(){…})

.css(‘border’, ‘3px dashed yellow’)

.css(‘background-color’, ‘orange’)

.fadeIn(’slow’);

这样可以写更少的代码, 让我们的js更轻量.

上一页  [1] [2] [3] [4] [5] [6] 下一页

上一页  [1] [2] [3] [4] [5] [6]  下一页