SharePoint Journey: Best Practices for jQuery Developers

Friday, November 10, 2017

Best Practices for jQuery Developers

Following are some of the best practices that you could follow while working with jQuery:

Plugins:
- Please avoid unnecessary use of plugins
- If a plugin is being used, respect the authors work and ensure that the plugin file is reused with the license comments intact
- If you are writing a reusable functionality in the code, always move it into a jQuery plugin format, to be reused across the site

Coding:
- Use jQuery CDN (google or Microsoft or jQuery) as much as possible for script registration, if its fine with clients. To be on the safer side, you could have a fallback code as well:
  <!– Grab Google CDN jQuery. fall back to local if necessary –>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js“></script>

<script>!window.jQuery && document.write(‘<script src=”js/jquery-1.4.2.min.js”><\/script>’)</script>

Avoid unnecessary upgrades of jQuery, unless there are features, which you require or some plugins require. Stick to one version from the beginning. (ex. 1.5.1)
Avoid writing event handler attributes (onclick etc.), instead use live or bind methods to attach the respective event handlers.
Avoid mixing javascript code with jQuery code.
Cache any jQuery selector, if reused in multiple statements.
Ex. Avoid $(“#x”).val(); $(“#x”).attr(“align”,”right”); Use var $x = $(“#x”); $x.val();$x.attr(“align”,”right”);
Ensure that you place ready function in your code. $(document).ready(function(){});
Use find method, instead of building a complex jQuery selector.

//Fine in modern browsers, though Sizzle does begin “running”

$(‘#someDiv p.someClass’).hide();

// Better for all browsers, and Sizzle never inits.

$(‘#someDiv’).find(‘p.someClass’).hide();

Avoid misusing $(this).
Ex. Use this.id instead of $(this).attr(‘id’)
Keep your code safe, by using noConflict() method or by passing jQuery.
Ex. (function($){})(jQuery); or by wrapping it in a ready method.
Avoid declaring new jQuery selectors within foreach, instead declare them outside and reuse it inside the loop.
Use $.ajax instead of $.get or $.getJSON, because internally they call $.ajax.
Use JSON formats for communications.
Ensure that you move your jQuery codes to a separate javascript file, instead of inline scripts.
Compress javascript files for better performance.
Combine multiple css() calls or attr() calls into one. In case of attributes, you could also pass them as shown below:

$(‘</a>’, {

    id : ‘myId’,

    className : ‘myClass’,

    href : ‘mytest.html’

});

Debugging:
- Use Developer Toolbars and Inspectors to debug your code from client side. You do not need to perform deployments and builds to debug your jQuery code(s).