作为前端开发的我们经常使用一些js库,最常见的js库就是jQuey库,是最流行的库。但是我们在使用jQuery时常常出现一些问题,
每个人都会犯下错误,而最好的办法是以后不再重复。下面我就在sky8g网站跟大家
讲一讲我在web开发中总结的经验,以及注意的事项,总结了10个常见的错误。
1.能不用javascript脚本或者jQuery就不用。
1 2 3 4 | 有的时候可以通过CSS轻松完成,就不要不用考虑jQuery。 纯CSS比jQuery和js好得多。 因此,在需要时css可以代替的尽量不要使用jQuery。 现在css 3的出现更加效果多,性能佳。 |
2.不要使用最新版本的jQuery
1 2 3 | jQuery团队不断更新jQuery库,而新版本则带有大量的bug修复和性能不佳。 在旧项目中尽量不要使用新的jQuery库, 但我建议您的新项目,您可以使用最新版本的jQuery。 |
阅读 如何始终引用最新版本的jQuery
3.不要使用压缩版本的jQuery库,在开发过程中
1 2 3 4 5 6 7 8 | jQuery库(下载时)有两个版本。 1.生产(压缩版) 2。开发(未压缩版) 为了开发目的,您可以选择.js文件的开发版本,就好像您想要进行一些更改然后可以轻松完成。 但请确保在您的软件或产品投入生产时,始终使用.js文件的生产版本, 因为其大小比开发版本小5倍。这可以节省一些带宽。 |
4.没有使用Google 的CDN中加载jQuery
1 2 3 4 5 6 7 8 9 | 谷歌提供了免费服务。您是否知道Google还在其CDN(内容分发网络)上托管jQuery库,并允许任何网站免费使用它。 为什么要使用Google CDN?(中国的用户就不要使用了) 缓存:最重要的好处是缓存。 如果用户以前访问过的任何网站使用的是Google CDN中的jQuery,则会使用缓存版本。它不会再次下载。 减少负载:从Google服务器下载时,它可以减轻Web服务器的负载。 快速服务:从速度的角度来看,您也将受益匪浅。 由于谷歌在网络上有十几种不同的服务器,它将从更接近用户的服务器下载jQuery。 谷歌的CDN具有非常低的延迟,它可以比您的网络服务器更快地提供资源。 |
5.当CDN加载失败时,加载本地的jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 总是使用CDN是一种很好的方法,但有时如果CDN出现故障(虽然很少见), 但在这个世界上你永远不会知道任何事情都会发生。 因此,如果您从任何CDN加载了jQuery并且它已经关闭,那么您的jQuery代码将停止工作, 您的客户端将没有反应。 我总是建议编写代码,如果没有正确加载jQuery库那么它应该使用你的本地jQuery副本。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='Scripts/jquery.1.9.0.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> 它首先从Google CDN加载jQuery, 然后检查jQuery对象。如果jQuery没有成功加载, 那么它将从你的服务器位置引用jQuery.js文件。 在此示例中,jQuery.js是从Scripts文件夹加载的。 |
6.不提倡复杂的jQuery选择器使用
1 2 3 4 5 6 7 8 9 10 11 | 由于有许多方法可以使用选择器选择元素, 但这并不意味着所有方法都相同。 总是尝试使用ID和Element作为选择器,因为它们非常快。 甚至类选择器也比ID选择器慢。 当ID用作选择器时,jQuery在内部调用Java脚本的getElementById()方法,该方法直接映射到元素。 当Classes用作选择器时,jQuery必须进行DOM遍历。 因此,当通过jQuery执行DOM遍历时,需要更多时间来选择元素。 在速度和性能方面,最佳做法是使用ID作为选择器。 |
7.不要重复使用jQuery的选择器
1 2 3 4 5 6 7 | 看看下面的jQuery代码。选择器使用三次以进行3种不同的操作。 $("#myID").css("color", "red"); $("#myID").css("font", "Arial"); $("#myID").text("Error occurred!"); 上面代码的问题是,jQuery必须遍历3次,因为有3个不同的语句。但这可以组合成一个语句。 $("#myID").css({ "color": "red", "font": "Arial"}).text("Error occurred!"); 这将确保jQuery在选择元素时仅通过DOM遍历一次。 |
8.不知道怎么使用选择器
1 2 3 4 | 你知道选择器是如何执行的吗?您的最后选择器始终先执行。 例如,在下面的jQuery代码中, jQuery将首先找到具有类“.myCssClass”的所有元素 ,然后它将拒绝所有其他不在“p#elmID”中的元素。 |
9.不要缓存一些无关紧要的东西
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 如果在正确的位置正确使用缓存,则可以为您提供出色的性能。 在使用jQuery时,您还应该考虑缓存。 例如,如果您在jQuery中使用任何元素多次,那么您必须缓存它。见下面的代码。 $("#myID").css("color", "red"); //Doing some other stuff...... $("#myID").text("Error occurred!"); 现在在上面的jQuery代码中,带有#myID的元素被使用了两次但没有缓存。 因此,jQuery必须遍历DOM并获取元素。但是如果你已经将它保存在变量中, 那么你只需要引用变量。所以更好的方法是, var $myElement = $("#myID").css("color", "red"); //Doing some other stuff...... $myElement.text("Error occurred!"); 所以现在在这种情况下,jQuery在第二次使用时不需要遍历整个DOM树。 所以在jQuery中,缓存就像将jQuery选择器保存在变量中一样。 并在需要时使用变量引用,而不是再次搜索DOM。 |
10.不要乱使用插件
1 2 3 4 5 6 7 8 9 | jQuery的一个重要特性是使用jQuery创建的各种插件都是免费提供的。 你喜欢jQuery插件并开始在你的项目中使用它。但是在使用插件的时候你真的考虑过, 文件大小 插件的性能 浏览器兼容性 在使用任何插件之前,请始终确保它会达到您网页的性能,并且不应与您正在使用的其他插件冲突。 如果您对jQuery有任何帮助,请随时与我联系,我很乐意为您提供帮助。 |
不懂得地方请留言。