关于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 也是不对的,为什么呢?如果只是纯粹的属性修改, 使用原始的javascript性能更好,完全没有使用jQuery对象。例如下面的例子中,浏览器还是会将jQuery对象转化为DOM节点进行操作。

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

滥用插件

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

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

性能评估:图个方便不在乎性能?真的吗?

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

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

使用jQuery干服务器端的活

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

彩蛋

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

猜你喜欢

转载自blog.csdn.net/flitrue/article/details/52734905