jQuery 开发者应该注意的9个错误


Posted in Javascript onMay 03, 2012

jQuery is so easy to use that sometimes we just forget that it's not CSS. While using CSS, we don't have to give much thought to performance, because it's so fast that it's not worth the effort to optimize it. But when it comes to the real world, jQuery can drive developers crazy with performance issues. Sometimes you lose precious milliseconds without even noticing it. Also, it's so easy to forget about some functions and we keep using the old (and not-so-good) ones.

Let's take a look at a few of the most-common-and-easiest-to-fix mistakes while using jQuery in your projects.

1. You aren't using the latest jQuery version
Each version update means higher performance and several bug fixes. The current stable release is 1.7.2, and I'm pretty sure you know about plenty of sites developed using 1.6 and below. Ok, ok, you can't just update every old site for every jQuery update (unless your client is paying you to do so) but you should at least start using it for your new projects. So, forget about this local copy and just grab the latest release every time you start a new project.

2. You aren't using a CDN-hosted copy of jQuery
How many unique visitors you`ve got last month? I bet the number is still under 1 billion, right?
So you'd better use Google's copy of jQuery instead of yours. If your user still has the cached file of Google's website (or from many other sites that uses its CDN) his browser will just get the cached version, improving a lot your website's performance. You can use it by copying & pasting this HTML:

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

3. You aren't using a fallback for CDN version
I know I said Google is awesome and stuff, but they can fail. So, every time you rely upon external sources, make sure you have a local fallback. I've seen this snippet in the HTML5 boilerplate source code and just found it amazing. You should use it too:

<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. You aren't chaining stuff
While doing common operations, you don't need to call the element every time you want to manipulate it. If you're doing several manipulations in a row, use chaining, so jQuery won't need to get the element twice.

Instead of this:

$(“#mydiv”).hide();
$(“#mydiv”).css(“padding-left”, “50px”);

Use this:

$(“#mydiv”).hide().css(“padding-left”, “50px”);

5. You aren't caching stuff
This is one of the most important performance tips. If you'll call an element at least twice, you should cache it. Caching is just saving the jQuery selector in a variable, so when you need to call it again you'll just reference the variable and jQuery won't need to search the whole DOM tree again to find your element.

/* you can use it this way because almost every jQuery function returns
the element, so $mydiv will be equal to $(“#mydiv”); also it's good to
use the $mydiv so you know it's a jQuery caching var */

var $mydiv = $(“#mydiv”).hide();
[.. lot of cool stuff going on here …]
$mydiv.show();

6. You aren't using pure js
Specially for attributes modification, we have several built in methods to get stuff done with pure javascript. You can even “convert” jQuery objects back to DOM nodes to use them with simpler methods, like this:

$mydiv[0].setAttribute('class', 'awesome'); //you can convert jQuery objects to DOM nodes using $jqObj[0]

7. You aren't checking plugins before including in your site
You know, jQuery is not the hardest thing in the world to code. But good JS (and jQuery), that is pretty hard. The bad news is that while you aren't a good programmer, you'll have to rely on trial and error to find out what is good and what isn't. A few points you must be aware of while including a plugin in your project:

File Size (the easiest to check!) ? if a tooltip plugin is bigger than jQuery source, something is really wrong;
Performance ? You can try it with firebug and others. They give you easy to understand charts to you'll know when something is out of place;
Cross-browsing ? Test, at least on IE7, but Chrome, Firefox, Safari and Opera are good ones to try also
Mobile ? Don't forget that everything is getting mobile. See if the plugin works, or at least doesn't crash your mobile browser
8. You aren't open to remove jQuery
Sometimes it's just better to remove it and use simple ol' CSS. Actually if you want, for instance, an opacity hover, or transition can be done with CSS along with good browser support. And there's no way jQuery can beat plain CSS.

9. You are using jQuery for server side tasks
I know that masking and validating are good, but don't rely just on jQuery for those. You need to recheck everything on the server side. That is especially important if you are thinking about using AJAX. Also, make sure everything will work with JS disabled.

So, it's your turn!

Do you have anything you think should be on this list? Share your thoughts!

About the Author

Javascript 相关文章推荐
Javascript常考语句107条收集
Mar 09 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
js编写三级联动简单案例
Dec 21 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
jQuery Ajax请求状态管理器打包
May 03 #Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 #Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 #Javascript
统计jQuery中各字符串出现次数的工具
May 03 #Javascript
JQuery插件Style定制化方法的分析与比较
May 03 #Javascript
拉动滚动条加载数据的jquery代码
May 03 #Javascript
基于jquery的固定表头和列头的代码
May 03 #Javascript
You might like
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
关于PHP实现异步操作的研究
2013/02/03 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
Python遍历目录的4种方法实例介绍
2015/04/13 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Elasticsearch 聚合查询和排序
2022/04/19 Python