|
2. Always use the minified version
of jQuery. The size of minified version (1.3) is 18KB as compared to 114 Kb of
regular version.
Following are the tools
available for minifying the application specific JavaScript files
1) YUI: http://developer.yahoo.com/yui/compressor/
2) Jsobf : http://timwhitlock.info/blog/2008/09/07/jsfmt-and-jsobf-available-for-download/
3) Jsmin : http://www.crockford.com/javascript/jsmin.html
Note: There are many more
similar tools available in the market.
3. Consider loading the jQuery
framework files from the content delivery network provided by Google, Microsoft,
Yahoo or jQuery as it offers several benefits
1) It will ascertain that your
application uses latest version of the jQuery framework.
2) Reduce Latency: It
reduces the load on your application server and saves bandwidth.
3) Caching: It improves the
response time of your page and jQuery framework loads faster.
4) If multiple sites are using the
jQuery framework from CDN then the same cached version of the jQuery framework
gets used.
The Location of CDN for jQuery can be found at below
location
Microsoft: http://www.asp.net/ajaxlibrary/CDNjQueryUI185.ashx
Google: http://code.google.com/apis/libraries/devguide.html#jquery
With version jQuery 1.4 onwards we have also get an
ability to mention the failover location of the CDN so that in case if the
external link of jQuery does not work the file still gets loaded from the
internal server.
4. Always follow unobtrusive way
of programming the JavaScript code .i.e. Use a set of principles for writing
accessible, maintainable JavaScript. jQuery supports unobtrusive way of Java
script programming. (To know more about Unobtrusive JavaScript refer following
URL: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
)
1) Build a site with plain HTML
and follow XHTML standards.
2) Add Css classes in a separate
style sheet file and apply the visual design uniformly to the entire site.
3) Add an external JavaScript file
to the website to provide enhanced site behavior and user experience.
5. jQuery (document).ready()
executes as soon as the DOM is ready. There are multiple ways of coding for this
event. The short hand way of using same code is $(function() . You can
have multiple instances of this function across js files and all of them will
get executed when the document is ready.
6. Like any other programming
language always define and follow the programming standards for jQuery
scripting.
7. Do not write inline client side
code (scripts) in the aspx pages. JavaScript or jQuery code should always be
written in the .js file and it should be linked in the (aspx or) master page of
the application.
8. If you are using the same
selector multiple times they do cache it.
9. Use jQuery method chaining
feature for shorter and clean code.
10. Scripts should be referenced in the
end of the page (before closing the body tag) for better user experience during
page load.
11. Be careful while using the eval()
function available in JavaScript. This function is considered to be unsafe (code
injection) and performance intensive.
12. Register and initialize the events
properly in jQuery. Always use .live based event declaration for DOM elements.
Normal events don’t fire when the parts of pages are loaded using the Ajax
calls.
13. Many times we have some requirement
to store some miscellaneous data in DOM structure. Normally we tend to use the
attributes tag and add custom attributes to the elements to store the data. But,
this is illegal. jQuery provides a way to store state data in DOM which is
stored as Data. This can be done as
1) SET:
$(‘.SelectorID’).data(‘Key’, value);
2) GET: var temp =
$(‘.SelectorID’).data(‘Key’);
3) Remove:
$().removeData(element) can be used to remove the element
14. On click of link on few pages we
observe that the page scrolls up to the top of the page. This problem can be
fixed using simple jQuery trick. Following code overrides the default behavior
and retains the cursor position.
Sample Code:
$('#close').click(function(e){
return false;
});
Instead of “ return false “ we can also use
e.preventDefault();
15. Consider the usage of client side
templates for UI where possible as it helps to prevent duplication of scripts,
thus reducing the lines of code. Also remember that there could be some risks
while using client side templates like
1) Security threat – injection
attacks.
2) Assumption of the computing
power of the client machine
Check out following link for jQuery’s Client side
templating engine: http://plugins.jquery.com/project/jqote2
16. Consider using JSON object for
passing server side data to client (browsers). jQuery has got few inbuilt
methods that help in parsing the Json objects. This will reduce the amount of
data that gets passed from server to client.
17. Always link the Css file in the top
of HTML page in the body tag.
18. Always follow the single
responsibility design principles while writing the scripts. Any jQuery function
that we write should be independently testable. This makes the code
maintainable, testable and reusable.
19. Manage your jQuery code properly.
Always have different sections in the .js file for Constants declarations,
common utility functions, independent reusable functions, event declaration and
initialization blocks, ajax call related global reusable functions etc.
20. For making ajax calls follow a
standard common template and reuse it across the application. The template
should have provision for request type, Get or post, URL, request data, request
format, Success and Failure event declarations and guard functionality
implementation. Sample code:
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
21. Do not write long jQuery functions
which are difficult to understand. If the function goes beyond 15-20 lines
consider breaking it into 2 small functions, follow single responsibility
principal.
22. Use the correct jQuery selectors
consistently in all functions.
23. Use CSS classes in the HTML code
for different elements and reference CSS class name wherever required from the
jQuery code to access the set of similar elements.
24. Do not hardcode literals in the
reusable jQuery functions /code.
25. jQuery is extensible. Try
converting the reusable block of code into JQuery plugins if possible. Always
check if any of the existing plug-in already available on the JQuery site can be
reused. If using readymade code blocks, always understand the complete code
before using it as is. If the code does not satisfy exact requirements you may
want to write new plug-in for the requirement. There is a large library of
JQuery plug-ins available in the market.
|