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更轻量.
出处:Time Machine
责任编辑:moby
上一页 jQuery性能优化指南 [2] 下一页 jQuery性能优化指南 [4]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|