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广告代码
May 30 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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的面向对象编程
2006/10/09 PHP
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
django进阶之cookie和session的使用示例
2018/08/17 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
祖国在我心中演讲稿500字
2014/05/04 职场文书
法律系毕业生求职信
2014/05/28 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang