关于jQuery的九大使用误区

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

不使用最新的版本

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

不使用压缩版的jQuery

很多人认为没压缩的JQuery比压缩的大不了几k，没必要非得用min版的，但是如果你的服务器访问量大的话，1~2k大小的文件产生的带宽就是很大的。

不使用CDN-hosted的jQuery

很多人喜欢Download到自己的服务器上，然后调用。似乎潜意识里文件放在自己手里比较有安全感。但大部分时候，除非你特别牛，自己的服务器比不过CDN服务器。如果流量小，可能没有什么影响，但如果流量一旦大了，性能方面的影响就非常突出了，这时，你完全可以考虑CDN服务器嘛，这对于网站的性能有很大的帮助!
Bootstrap中文网提供的开源项目免费 CDN 服务就是一个不错的选择。

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

使用了CDN-hosted版本但没有考虑备份措施

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

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>');
</script>

忘记链式写法

我们在进行一些普通操作时，如果多使用链式操作方式，可以提高性能，不用多次加载元素，有时候链式写法带来的性能改善是相当可观的。例如：

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

忘记缓存

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

var $myMxria = $("#mydiv").hide();
$myMxria.show();

孤注一掷的使用jQuery

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

$mydiv[0].setAttribute('class', 'awesome');

滥用插件

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

文件大小：超过10k的大小就得反复考虑一下哦

性能评估：图个方便不在乎性能？真的吗？

跨浏览器支持： 看看你的客户在用什么浏览器

移动支持： 确认插件是可以在Mobile环境下运作正常的

使用jQuery干服务器端的活

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

彩蛋

这里留一个彩蛋，我只总结了九大误区，剩下一个等待你来总结。