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类型转换示例
Apr 29 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
Rust中的Struct使用示例详解
Aug 14 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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php函数连续调用实例分析
2015/07/30 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
js left,right,mid函数
2008/06/10 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
Array.filter中如何正确使用Async
2020/11/04 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python统计单词出现的次数
2018/04/04 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
尊师重教主题班会
2015/08/14 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js