jQuery 开发者应该注意的9个错误 |
|
本文标签：错误 jQuery is so easy to use that sometimes we just forget that its not CSS. While using CSS, we dont have to give much thought to performance, because its so fast that its 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, its so easy to forget about some functions and we keep using the old (and not-so-good) ones. Lets take a look at a few of the most-common-and-easiest-to-fix mistakes while using jQuery in your projects. 1. You arent using the latest jQuery version Each version update means higher performance and several bug fixes. The current stable release is 1.7.2, and Im pretty sure you know about plenty of sites developed using 1.6 and below. Ok, ok, you cant 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 arent 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 youd better use Googles copy of jQuery instead of yours. If your user still has the cached file of Googles website (or from many other sites that uses its CDN) his browser will just get the cached version, improving a lot your websites 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 arent 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. Ive 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 arent chaining stuff While doing common operations, you dont need to call the element every time you want to manipulate it. If youre doing several manipulations in a row, use chaining, so jQuery wont 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 arent caching stuff This is one of the most important performance tips. If youll 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 youll just reference the variable and jQuery wont 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 its good to use the $mydiv so you know its a jQuery caching var */ var $mydiv = $(“#mydiv”).hide(); [.. lot of cool stuff going on here …] $mydiv.show(); 6. You arent 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 arent 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 arent a good programmer, youll have to rely on trial and error to find out what is good and what isnt. 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 youll 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 – Dont forget that everything is getting mobile. See if the plugin works, or at least doesnt crash your mobile browser 8. You arent open to remove jQuery Sometimes its 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 theres 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 dont 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, its your turn! Do you have anything you think should be on this list? Share your thoughts! About the Author |
