位置: 编程技术 - 正文
7个jQuery最佳实践(jquery技巧)
编辑：rootadmin推荐整理分享7个jQuery最佳实践(jquery技巧)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery实现,jquery常用的5个方法,jquery技巧,jquery有哪些,jquery实例,jquery常用的5个方法,jquery实战,jquery实战,内容如对您有帮助，希望把文章链接给更多的朋友！
随着富网络应用（rich web applications）数量的增长，以及用户对快速交互响应的高期望，开发者开始使用JavaScript库来快速高效的完成一些重复性的工作。这其中最流行的JavaScript库就是jQuery。但是jQuery的大量应用却带来了另外一个问题：在使用JavaScript库的时候，有哪些最佳实践，又有哪些不好的实践呢？
背景
在这篇文章中，我会给大家介绍在编写、调试和审查JavaScript代码的时候一些好的实践（至少我是这么认为的）。事实上，我选择了其中7个最常见的场景。
1、使用CDN及其回退地址（fallback）
CDN代表内容传递网络（Content Delivery Network），是一个缓存了JavaScript文件的服务器。使用CDN之后，每当一个新用户发起请求的时候，你的应用程序可以使用CDN缓存，而不用从你的服务器上重新加载库文件。Google、Microsoft和JQuery都提供CDN服务。
鉴于网络并不总是%可靠，服务器也可能因为一些原因宕机，你必须要确保即使这些事情发生，你的应用程序依然能正常运行。这时候我们就要用到回退地址：当应用程序无法找到缓存库的时候，它就会回退回来，使用服务器文件。
Google CDN 是这样的：
Microsoft CDN是这样的：
需要注意的是，我们没有指定URL协议为http而是使用的//。这是因为CDN服务器支持http和https，如果你的网站拥有SSL认证，你无须修改就可以正常加载文件。
另外，就像我之前提到的那样，我们还需要一个回退地址，以防CDN服务器出现问题。
当然，你也可以用Require来配置需要的jQuery，不过我觉得就这样也不错。
2、限制DOM交互
用JavaScript操作DOM树是存在性能消耗的。jQuery也一样。所以，尽量减少与DOM的交互吧。当我帮助我一个同事提高数据显示速度的时候，我看见他在一个循环里面使用了选择器。这简直是性能杀手！他是这样写的：
有什么问题呢？咋一看没啥问题。而且我的同事也说这段代码跑得很欢乐呢！我真是哔了狗了！当TotalActions小于时，察觉不到任何问题；但是其达到的时候，速度便降低了很多，原因（我也是google到的）就是DOM交互放到了循环当中。
对于这个功能，（多次尝试失败之后）我将循环中的直接DOM交互替换成了一个数组的push操作，然后用一个空字符串作为分隔符将数组连接（join）起来。最后，程序当然变得更加流畅和高效了。
3、缓存
jQuery最重要也是最有特色的地方，就是它的选择器以及在DOM树中查找HTML元素的方式。但是，我多次看到，一些开发者在同一个函数中，多次调用相同的选择器，比如 $(“#divid”)。尽管jQuery选择元素非常快，但也不要每次都去查找相同的元素吧。所以，你可以像这样缓存的你元素：
然后在接下来的代码中，就可以用$divId了。
对于下面的代码：
我们可以对它做这样的修改，并且使用链式语法，使其看起来更加漂亮：
但是话又说回来，你也不用每次把所有东西都缓存起来。看下面的例子：
在这里，我既没有用 $(“#link”)，或者将其缓存起来，而是使用的$(this)。因为在这个例子中，我操作的对象就是这个链接本身。
4、find 和 filter
最近，在使用find()来获取jQuery对象结合的时候，我产生了一些困惑。然后我发现，这个操作可以替换为用filter()方法来实现。理解这两者的区别非常重要：
find: 将会从选定的元素开始，一直向下查找DOM树
filter: 是在jQuery集合当中查找5、end()
当在jQuery集合中进行链式操作的时候，我有时候需要回到父对象去进行一些操作。比如你正在一个表格的第二行应用CSS，然后希望回到表格对象，对其添加一些样式。在你对行应用完样式之后，只要使用end()方法，你就会自动回到表格对象，然后随意的对其添加样式吧！
（译者注：find()、filter()和end()原文是大写，其实应该是小写）
6、对象字面量
当你通过链式语法来操作元素的CSS属性的时候，你可以使用对象字面量方式来提升性能。比如这段代码：
变成下面这样之后，不仅避免了操作DOM元素，而且还不用多次调用相关的设置方法：
7、善用CSS类
尽可能使用CSS类而不要写内联CSS代码。我想这一点就不需要举例说明了吧。
希望这篇文章能够帮助你编写更好的jQuery应用程序，真正的帮助到大家。
基于jQuery实现点击最后一行实现行自增效果的表格 现在任何事务都追求效率和人性化，当然网页效果也是如此，如果一个可以编辑数据的表格，编辑到最后一行的时候，点击可以自动添加一行，这样算
jQuery版本升级踩坑大全 背景--------------------------------------------------------------------------------jQuery想必各个web工程师都再熟悉不过了，不过现如今很多网站还采用了很古老的jQuery版
基于jQuery1.9版本如何判断浏览器版本类型 在jquery.1.9以前的版本，可以使用$.browser很轻松的判断浏览器的类型和版本，但是在1.9中和以后的版本中，$.browser已经被删除，下面就介绍一下如何实现
标签: jquery技巧
本文链接地址:https://www.jiuchutong.com/biancheng/379293.html 转载请保留说明！上一篇：实例详解jQuery Mockjax 插件模拟 Ajax 请求(MATLAB图像处理实例详解)
下一篇：jQuery.ajax实现根据不同的Content-Type做出不同的响应
