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 (十) jQueryUI常用功能实战
Feb 23 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 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实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
pandas取出重复数据的方法
2019/07/04 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python 从attribute到property详解
2020/03/05 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
教学质量评估实施方案
2014/03/17 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
Python实现批量自动整理文件
2022/03/16 Python