[翻译]25招改善你的jQuery - [2]

目录

  1. 从Google Code加载jQuery
  2. 使用备忘单
  3. 整合所有的脚本并缩减它们
  4. 使用Firebug出色的控制台日志工具
  5. 通过缓存最小化选择操作
  6. 最小化DOM操作
  7. 处理DOM插入操作时，将需要的内容包装在一个元素中
  8. 尽可能使用IDs而不是classes
  9. 给选择器提供上下文
10. 正确使用方法链
11. 学会正确使用效果
12. 了解事件代理
13. 利用classes存储状态
14. 更好的方法是利用jQuery内置的data()方法存储状态
15. 写你自己的选择器
16. 精简你的HTML并在页面加载后修改它
17. 为了速度和SEO方面的考虑，延迟加载内容
18. 使用jQuery提供的工具函数
19. 使用noConflict重命名jQuery对象
20. 如何得知图片已加载完毕
21. 总是使用最新版本
22. 如何检查元素是否存在
23. 给你的HTML属性增加JS类
24. 返回'false'以防止默认行为
25. ready事件的简写

16. 精简你的HTML并在页面加载后修改它

这个标题可能没有多大意思，但是这个技巧可能理顺你的代码、减小代码体积和页面的下载时间、有助优化你的搜索引擎。请看下面的例子：

<div class="fieldOuter">
    <div class="inner">
        <div class="field">
            This is field number 1</div>
    </div>
    <div class="errorBar">
        <div class="icon">
            <img src="icon.png" alt="icon" /></div>
        <div class="message">
            <span>This is an error message</span></div>
    </div>
</div>
<div class="fieldOuter">
    <div class="inner">
        <div class="field">
            This is field number 2</div>
    </div>
    <div class="errorBar">
        <div class="icon">
            <img src="icon.png" alt="icon" /></div>
        <div class="message">
            <span>This is an error message</span></div>
    </div>
</div>

上面是一个HTML的具体例子，为了解释目的做了少量修改。我相信你也会认为这段代码相当的丑陋。如果类似代码很长的话，你最终会形成一个相当长且丑陋的页面。因此你可以像下面这样处理它：

<div class="field">This is field 1</div>
<div class="field">This is field 2</div>
<div class="field">This is field 3</div>
<div class="field">This is field 4</div>
<div class="field">This is field 5</div>

所有你要做的就是在页面加载完成之后通过jQuery的操作将丑陋的HTML添加回去：

$(document).ready(function() {   
    $('.field').before('<div class="fieldOuter"><div class="inner">');   
    $('.field').after('</div><div class="errorBar"><div class="icon">   
        <img src="icon.png" alt="icon" /></div><div class="message">   
        <span>This is an error message</span></div></div></div>');   
});

这样做并不总是可取的，在页面加载后的一瞬间你将会看到页面的闪动，但是在特定情况下你有很多重复的HTML内容，这时通过这个方法你可以显著的减小页面代码体积，减少无关且重复的标记能使你的SEO从中受益。

17. 为了速度和SEO方面的考虑，延迟加载内容

另外还有一个方法可以提升页面加载速度，理顺Spiders搜索的HTML内容，通过在页面加载之后使用AJAX请求晚加载其他内容，这样用户就可以马上开始浏览，让Spider看到你想要它们进行索引的内容。

我们已经在自己的网站上使用了这个技术。本页面上部的紫色按钮会弹出三个表格，方位与Google地图，这会使我们页面大小增加两倍。因此我们仅需要把这些HTML内容放入一个静态页面中，在页面加载完成之后通过load()函数加载它：

$('#forms').load('content/headerForms.html', function() {   
    // Code here runs once the content has loaded   
    // Put all your event handlers etc. here.               
}); 

我不会在页面上随处使用这个技巧。对此，你必须权衡考虑。你需要有额外的页面请求，而且页面上的部分内容不能立即呈现给用户，但是正确的使用这个技巧对优化会很有帮助。

18. 使用jQuery提供的工具函数

jQuery不仅仅有闪光的效果。jQuery作者也提供了一些相当实用的方法，这填补了JacaScript的一些缺陷。
http://docs.jquery.com/Utilities

尤其，提供一些常见的数组函数的浏览器支持是一个补丁。jQuery提供了迭代、过滤、克隆、合并和从数组中去除重复项的方法。

其他常用的函数包括得到下拉框中的选择项。用传统的JavaScript方法，你就必须使用getElementById得到select元素，然后通过遍历它的子元素找出被选中的元素。而jQuery提供了相当容易使用的方法：

$('#selectList').val(); 

花时间浏览官方网站上的jQuery文档与一些不常用的方法上是很值得的。

19. 使用noConflict重命名jQuery对象

 

大多数JavaScript框架都使用$符号作为缩写，当在同一个页面使用多个JS框架时，页面很容易发生冲突。幸运的是有一个简单的方法。noConflict()函数交回$的控制权并允许你设置成自己的变量名：

var $j = jQuery.noConflict();   
$j('#myDiv').hide(); 

 

 

 

 

 

20. 如何得知图片已加载完毕

 

这也一个没有很好文档说明的问题（至少在我查找时没看到），但是在创建照片库、旋转灯笼效果等方面，它是相当常见的需求。而这在jQuery中很容易实现。

所有你要做的就是在IMG上使用.load()方法，在其中添加一个回调函数。下面的例子改变了一个图片src的属性同事附加上一个简单的load函数：

$('#myImage').attr('src', 'image.jpg').load(function() {   
    alert('Image Loaded');   
}); 

你应该可以发现一旦图片加载完毕就会弹出一个alert。

21. 总是使用最新版本

jQuery仍在不断的更新，它的作者John Resig一直在寻找提高jQuery性能的方法。

jQuery当前的版本是1.2.6，John已经宣称他正在写一个新的选择器引擎Sizzle，这可能会显著的提高选择器性能（在Firefox中提升了4倍），因此我们应当保持最新版本。

【译注】
这是去年年底写的文章，而目前最新版本是v.1.3.2。

22. 如何检查元素是否存在

你不必检查元素是否在页面上存在就可以使用它，因为如果没有在DOM中找到合适的元素，jQuery什么也不会做。可是当我们需要检查元素是否被选择了，或是有多少项被选择了，你可以使用length属性：

if ($('#myDiv).length) {   
    // your code   
} 

简单之极。

23. 给你的HTML属性增加JS类

我是从Karl Swedberg那学到这个技巧，过去学习jQuery时一直在看他的书。

他最近在我以前的文章留下了对该用法的评论，基本原则如下示之。

首先，在jQuery加载之后你可以使用方法将"JS"类添加到HTML标签中：

$('HTML').addClass('JS');  

因为这仅仅发生在javascript有效的时候，如果用户打开JavaScript开关，那么你可以使用它给元素添加上CSS风格：

.JS #myDiv{display:none;}  

因此，这意味着在JavaScript打开时我们可以隐藏内容，然后在需要时使用jQuery显示这些内容（比如在用户点击时收缩或展开内容），同时在关闭JavaScript（以及搜索Spiders）时会看到所有内容。我将在晚些时候使用这个技巧。

可以在这里看到他的所有文章。

24. 返回'false'以防止默认行为

这是很明显的，也可能不是。如果你有这样的习惯：

<a href="#" class="popup">Click me!</a>  

然后添加上如下的事件处理：

$('popup').click(function(){   
    // Launch popup code   
});  

你在长页面使用上述方法时，它可能可以正常工作。有些时候你会注意到在点击链接后锚点会跳转到页面上部。

所有你要做的就是阻止它的默认行为，或者实际上你可以把"return false;"添加到任何事件的默认行为上。像这样：

$('popup').click(function(){   
    // Launch popup code   
    return false;   
}); 

 

25. ready事件的简写

一个小技巧但是通过使用$(document).ready()的简写，你可以少输入几个字符。
取代：

$(document).ready(function (){   
    // your code   
});  

你可以简写成：

$(function (){   
    // your code   
});  

如果你喜欢这篇文章，请digg一下。 

【译注】

翻译完毕！