随着丰富web应用数量的增加和用户对快速交互响应的高期望，开发人员开始使用JavaScript库快速高效地完成一些重复性任务。最流行的JavaScript库是jQuery。然而，jQuery的广泛应用带来了另一个问题：在使用JavaScript库时，有哪些最佳实践，哪些不好的实践？

背景

在本文中，我将介绍一些编写、调试和审查JavaScript代码的良好实践(至少我是这样认为的)。事实上，我选择了七个最常见的场景。

1.使用CDN及其回退地址。

CDN代表内容传递网络，这是一个缓存JavaScript文件的服务器。使用CDN后，每当新用户发起请求时，您的应用程序可以使用CDN缓存，而不是从服务器重新加载库文件。谷歌、微软和JQuery都提供CDN服务。

鉴于网络并不总是100%可靠，并且服务器可能由于某些原因而关闭，您必须确保即使发生这些情况，您的应用程序仍然可以正常运行。此时，我们需要回退地址：当应用程序找不到缓存库时，它将回退并使用服务器文件。

谷歌CDN是这样的：

script src=' http://Ajax . googleapi.com/Ajax/libs/jquery/1 . 10 . 2/jquery . min . js '/script Microsoft cdn是这样的：

脚本src=' http://Ajax . aspnetcdn.com/Ajax/jquery/jquery-1 . 9 . 0 . min . js '/脚本需要注意的是，我们没有指定http作为URL协议，而是使用了//。这是因为CDN服务器支持http和https。如果你的网站有SSL认证，你可以正常加载文件，无需修改。

此外，正如我之前提到的，我们还需要一个后备地址，以防CDN服务器出现问题。

window . jQuery | | document . write(' script src=' script/localsourceforjquery/' script ')当然也可以用Require来配置需要的jquery，不过我觉得这样也不错。

2.限制DOM交互。

用JavaScript操作DOM树会消耗性能。jQuery也是如此。因此，尽量减少与DOM的交互。当我帮助我的一个同事提高数据显示速度时，我看到他在循环中使用选择器。这是表演杀手！他写道：

containerDiv=$(' # content div ')；for(var d=0；合计行动；d){ containerDiv . append(' div span class=' brilliant runner ' ' d '/span/div ')；}有什么问题？乍一看，没有问题。另外我同事也说这个代码很开心！我真的叫了狗！当TotalActions小于50时，检测不到任何问题；然而，当它达到25，000时，速度会降低很多。原因(我也是从谷歌学到的)是DOM交互被放入了循环中。

对于这个函数，(经过多次失败的尝试)我用数组推送操作替换了循环中的直接DOM交互，然后用一个空字符串作为分隔符连接数组。最后，当然，程序变得更加流畅和高效。

var myContent=[]；for(var d=0；合计行动；d){ mycontent . push(' div span class=' brilliant runner ' ' d '/span/div ')；} containerdiv . html(my content . join(' '))；3.缓存。

jQuery最重要和最有特色的特性是它的选择器和在DOM树中查找HTML元素的方式。但是，我多次看到一些开发人员在同一个函数中多次调用同一个选择器，比如$(“# divid”)。虽然jQuery选择元素非常快，但不要每次都寻找相同的元素。因此，您可以这样缓存元素：

Var $divId=$('#divId ')那么在下面的代码中，可以使用$divId。

对于以下代码：

var f function=function(){ $(' # my div ')。toggle class(' z class ')；$('#mydiv ')。fade out(800)；} var f function 2=function(){ $(' # my div ')。addAttr(' name ')；$('#mydiv ')。法丁(400)；}我们可以这样修改，使用链式语法让它看起来更漂亮：

var mydiv=$(' # mydiv ')；var f function=function(){ my div。ToggleClass('zclass ')。fade out(800)；} var f function 2=function(){ my div . AddAttr(' name ')。法丁(400)；}不过话说回来，你也不必每次都缓存所有东西。请看下面的例子：

$('#link ')。单击(function(){ $(this))。addCLaSS(' gored ')；}在这里，我没有使用$(“# link”)或者缓存它，而是使用了$(this)。因为在这个例子中，我操作的对象是链接本身。

4.查找并过滤。

最近，当我使用find()获取jQuery对象组合时，我有些困惑。然后我发现这个操作可以用filter()方法来实现。理解两者之间的区别非常重要：

Find:将从所选元素开始，向下搜索DOM树。

Filter:是在jQuery集中查找5，end()。

在jQuery集合中做链式操作时，我有时需要回到父对象，做一些操作。例如，您正在表格的第二行应用CSS，然后您想要返回表格对象并向其添加一些样式。对行应用样式后，只需使用end()方法，就会自动返回到table对象，然后随意给它添加样式！

(译者注：find()、filter()和end()最初是大写的，但应该是小写的。)

6.物体的字面量。

当使用链语法来操作元素的CSS属性时，可以使用对象文字来提高性能。例如，这段代码：

$('#myimg ')。attr('src '，' pass ')。attr('alt '，' alt text ')；变成这样之后，不仅避免了对DOM元素的操作，也不需要多次调用相关的设置方法：

$('#myimg ')。attr({ ' src ' : ' theth '，' alt ' : ' the alt text ' })；7.好好利用CSS类。

尝试使用CSS类，而不是编写内联CSS代码。我认为没有必要说明这一点。

希望这篇文章能帮助你写出更好的jQuery应用，真正帮助到大家。