使用JQuery的9个误区

最新推荐文章于 2022-10-08 20:11:54 发布

itbaohuziji

最新推荐文章于 2022-10-08 20:11:54 发布

阅读量114

点赞数

文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/itbaohuziji/article/details/84226986

版权

使用JQuery的9个误区
作者：夜飞羽来源：mxria.com 时间：2012-05-16

JQuery是如此容易使用以至于我们有时候忘记了CSS的存在。我们在使用CSS时，几乎不去考虑性能，因为它已经是快得不值得再去做什么优化上的努力。但现实世界中，JQuery会导致令开发人员发疯的性能问题。有时你会毫无知觉地就损失那么几毫秒。我们也很容易忘记的一些功能并继续使用一些旧的（和不那么好的）的功能。以下是使用JQuery过程容易犯的9个错误，看看是不是你也曾遇到过？

JQuery

1.不使用最新的版本

如今的稳定版本是1.7.2，你看看你的机器是不是最新的？可能你不会把已经做好的网站再去更新一把，毕竟这个工作量可能没人给你付费，但新的开发项目呢？千万别忘记了使用最新的版本哦，毕竟每个版本更新肯定会在功能或性能上有所提升，或者修复了几个Bug，但有时惰性让人不想再去研究新版本的变化，因此，提醒你别忘记了在新项目用新的一定比旧版本要好。

2.不使用CDN-hosted的JQuery

很多人喜欢Download到自己的服务器上，然后调用。似乎潜意识里文件放在自己手里比较有安全感。但大部分时候，除非你特别牛，自己的服务器比不过CDN服务器。如果流量小，可能没有什么影响，但如果流量一旦大了，性能方面的影响就非常突出了，这时，你完全可以考虑CDN服务器嘛，比如google的Copy，这对于网站的性能有很大的帮助!
你只需要调用时采用如下：

1	`<script type=` `"text/javascript"` `src=` `"//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"` `></script>`

3.使用了CDN-hosted版本但没有备份措施

尽管我们相信Google很牛逼，不会出问题，但别忘记了你在天朝，一切皆有可能！因此，在html代码中加上本地服务器版本的容灾计划还是很有必要的，也非常简单：

 
         <script src= 
         "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" 
         ></script>  
        
         <script>window.jQuery || document.write( 
         '<script src="js/libs/jquery-1.7.2.min.js"><\/script>' 
         )</script>

4. 忘记链式写法

我们在进行一些普通操作时，如果多使用链式操作方式，可以提高性能，不用多次加载元素。例如

 
         $(“ 
         #mydiv”).hide();  
        
         $(“ 
         #mydiv”).css(“padding-left”, “50px”);  
        
         JQuery会获取元素2次  
        
         $(“ 
         #mydiv”).hide().css(“padding-left”, “50px”);

一次搞定，有时候链式写法带来的性能改善是相当可观的哦

5.忘记缓存

这是跟性能相关的重要提示：别忘记缓存！如果页面中调用了某个元素至少2次，你就应该考虑缓存了。通过一个变量就可以在JQuery中缓存选择器。当第二次使用该选择器时，只需引用该变量即可。这样做的好处就是JQuery不用再次遍历搜索整个DOM树去寻找你选择的元素。例如

 
         var 
         $myMxria = $(“ 
         #mydiv”).hide();  
        
         //......  
        
         $myMxria.show();

6.干嘛不使用原始的JS？

用惯了$，大家就基本忽略document.getElementById了，但不得不说，滥用$也是不对的，为什么呢？如果只是纯粹的属性修改，使用原始的javascript性能更好，完全没有使用JQuery对象。例如下面的例子中，浏览器还是会将JQuery对象转化为DOM节点进行操作。

1	`$mydiv[0].setAttribute(` `'class'` `,` `'awesome'` `);` `//这种写法有点性能上不划算。`

7.未作检查的滥用插件

如今，JQuery流行起来也带来无数插件，精彩的、雷人的各种插件很多。我们很喜欢追随潮流，用些时髦玩意儿。但事实上，很多插件需要我们认真评估，看看到底是不是适合你的项目，或者说你真的需要吗？有没有考虑以下因素呢？

文件大小：超过10k的大小就得反复考虑一下哦
性能评估：图个方便不在乎性能？真的吗？
跨浏览器支持：看看你的客户在用什么浏览器，别忘记了古老的IE6可是依然风采依旧哦
移动支持：确认插件是可以在Mobile环境下运作正常的

8 不用JQuery

不用不行吗？干嘛一定要用呢？很多时候我们可能根本没有想过这个问题，首先想到的可能是用Jquey好像很容易实现啊！这个误区真的很普遍，你有一把快刀砍到底的习惯吗？

9 使用JQuery干服务器端的活

JQuery太好了，太强大了，似乎一切都可以在前端搞定！于是，我们又会进入一个误区：类似有效性检查和数据验证的活，忽略了在服务端的重要性。很多业务逻辑能在前端处理的就一古脑在前端处理，过犹不及的悲剧就此发生！千万要记住，前端浏览器里啥事都可能发生！！！禁用JS、某个不兼容问题、伪造数据、攻击行为，这些都不是开发者能100%掌控到的，所以，服务端的活千万别因为JQuery的强大而放松警惕！

以上供参考，看看你有无走进误区?