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 相关文章推荐
jQuery 使用手册(一)
Sep 23 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
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
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
js word表格动态添加代码
2010/06/07 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
对Python中type打开文件的方式介绍
2018/04/28 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python列表推导式操作解析
2019/11/26 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
大学军训感言400字
2014/03/11 职场文书
协议书的格式
2014/04/23 职场文书
委托公证书格式
2015/01/26 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
运输公司工作总结
2015/08/11 职场文书
运动会广播稿300字
2015/08/19 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP