关于jQuery的九大使用误区

news/2024/7/10 23:49:36 标签: jquery

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

不使用最新的版本

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

jquery">不使用压缩版的jQuery

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

jquery">不使用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">孤注一掷的使用jQuery

用惯了 document.getElementById 也是不对的,为什么呢?如果只是纯粹的属性修改, 使用原始的javascript性能更好,完全没有使用jQuery对象。例如下面的例子中,浏览器还是会将jQuery对象转化为DOM节点进行操作。

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

滥用插件

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

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

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

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

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

jquery干服务器端的活">使用jQuery干服务器端的活

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

彩蛋

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


http://www.niftyadmin.cn/n/1581292.html

相关文章

putty 报server unexpectedly closed network connection错误

由于IP变了&#xff0c;再用putty访问组内的服务器时&#xff0c;竟然总是出错&#xff0c;报server unexpectedly closed network connection错误。 我公司的服务器是centos7&#xff0c;今天老大给我的服务器&#xff0c;我安装完php环境和mysql&#xff0c;吃完饭回来就连接…

Vista工具箱 v3.1

软件是为了打开VISTA强大功能而开发&#xff0c;VISTA中好多隐藏功能并不为人知&#xff0c;建立这个工具箱&#xff0c;为了方便每一个用VISTA的人&#xff0c;可对VISTA进行优化&#xff0c;修改。软件绿色&#xff0c;小巧&#xff0c;方便功能实用。打开隐藏功能48个&#…

echarts主题属性设置

theme { // 全图默认背景 backgroundColor: rgba(0,0,0,0), // 默认色板 color: [#ff7f50,#87cefa,#da70d6,#32cd32,#6495ed,#ff69b4,#ba55d3,#cd5c5c,#ffa500,#40e0d0,#1e90ff,#ff6347,#7b68ee,#00fa9a,#ffd700,#6699FF,#ff6666,#3cb371,#b8860b,#30e0e0],// 图表标题 titl…

C#基础部分之语法和基础知识

C#的入口函数Main有以下形式 无入口参数、无返回值 1publicclassHelloWorld2{34public static void Main()5{6 System.Console.Write("Hello World/n");7 System.Console.Write("Hello" System.Environment.NewLine);8 }9 }第7行的System.Environment.N…

狂风暴雨——风云突变篇:基于数据流层Namsara的ERP系统架构描述

狂风暴雨——风云突变&#xff1a;基于数据流层Namsara的ERP系统架构描述 摘要&#xff1a;简略介绍汇金百货ERP系统架构。我目前正在参与开发汇金百货ERP系统&#xff0c;主要负责数据库开发维护、系统整体框架、库存模块。报表模块、系统模块。此项目从需求开始经历了1年都&a…

Javascript网页打印大全

目录 普通打印&#xff08;整页打&#xff09;打印去掉/添加页眉页脚 使用外部控件/方法实现多功能打印 打印背景 普通打印&#xff08;整页打&#xff09; window.print(); 打印网页内部分内容&#xff08;自定义&#xff09; 用css控制 media print .a {display:block}…

【C++初阶】12. Stack(栈)和Queue(队列)

1. 栈和队列的介绍 栈的介绍 队列的介绍 2. 栈和队列的使用 最小栈 栈的压入、弹出序列 逆波兰表达式求值 拓展&#xff1a;如何从中缀变为后缀 3. 两种设计模式 设计模式目前分为26种&#xff0c;这里就只介绍两种 适配器模式迭代器模式 在日常生活中&#xff0c;我们常…

centos6.5启动nginx报错

问题&#xff1a;nginx: [emerg] socket() [::]:80 failed (97: Address family not supported by protocol) 解决方案 vim /etc/nginx/conf.d/default.conf 将 listen 80 default_server; listen [::]:80 default_server; 改为&#xff1a; listen 80; #listen [::]:8…