jQuery coding Standards and Practices

##jQuery Best Coding Practices and Standards

Always try to use a CDN to include jQuery on your page. CDN Benefits
```
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.min.js" type="text/javascript"><\/script>')</script>


```
- Advantages of Using CDN
  - CDN deliver content faster then regular hosting provider because their server are globally distributed.(data centers)
  - Files may be pre-cached. (jQuery used everywhere-someone visiting our page have already visited another page having jQuery).
  - Scalability (High Performance)
Do not load multiple jQuery version.

jQuery Variables.

Always cache your jQuery selector returned objects in variables for reuse.

Bad Pratice:

  $("#id").css("color", "green");
  $("#id").attr("title", $("#id").text());
  $("#id").fadeOut();

Good Pratice:

  var id = $("id");
  id.css("color", "green");
  id.attr("title", $("#id").text());
  id.fadeOut();

/*------------------------------------ OR ------------------------------------*/

jQuery("#id").css("color","green").attr("title,..); [chaining]

jQuery Ready Event

Usual Pratice.

  jQuery("document").ready(function(){ });
     OR
  jQuery(function() {});

Good Pratice.

  //IIFE
  (function($,window,document) {
    
      //$,window,document are now locally scoped.
    
    $(function() { //DOM is ready });
  
  }(window.jQuery,window,document));

jQuery Selectors

Use ID selector wherever possible because it used document.getElementById() method of JS.

Performance of Selectors [Demo - JSFiddle - Go to Below Link ]

Performance of Selector!
ID based selectors

jQuery("#instruction div.another").css("background-color","grey");  // used querySelectorAll() method of JS
jQuery("#instruction").find("div.another").css("background-color","grey"); // getElementById(). the getelementbytagnames(). fast.

Give Selector a Context.

  $('.another'); // SLower Traverse Entire DOM.
  $('.another', '#instruction'); // Faster . Search for another class in element having id instruction.

Don’t Descend Multiple IDs or nest when selecting an ID. ID selection only handled using document.getElementById

  $('div#inner'); //bad
  $('#outer #inner'); // bad
  $('.outer-container #inner'); // bad
  $('#inner'); // good, only calls document.getElementById();

Tomuch specifity is also bad

  var $var = jQuery('#instruction ul.list .another'); // slower ( 3 level to Traverse)
  var $var1 = jQuery('#instruction .another'); //faster ( 2 level to Traverse)

Many More- Can Refere Below Site. Refe:!

Dont Act on Empty element.

  // BAD: This runs other functions(rather extra work) before it realizes there's nothing in the selection
  $("#nosuchthing").slideUp();
   
  // GOOD
  var $mySelection = $("#nosuchthing");
  if ($mySelection.length) {
      $mySelection.slideUp();
  }

Event

Event Delegation : Attach same event to multiple element.

  // BAD, you are attaching an event to all the links under the list.
  $("#list a").on("click", myClickHandler); 
  
  // GOOD, only one event handler is attached to the parent.
  $("#list").on("click", "a", myClickHandler); 
  
  /* single event listner for parent that will fire for all the decendants matching selector */
  
  /* ------------------------------------------ 2nd example ----------------------------- */
  /* ----------- bad ----------*/
  $("#longlist li").on("mouseenter", function() {
      $(this).text("Click me!");
    });

  $("#longlist li").on("click", function() {
    $(this).text("Why did you click me?!");
  });
     
  /* ------------- good --------------*/    
  var list = $("#longlist");
  list.on("mouseenter", "li", function(){
    $(this).text("Click me!");
  });
  
  list.on("click", "li", function() {
    $(this).text("Why did you click me?!");
  });

DO NOT use anonymous functions to attach events.
- Anonymous functions are difficult to debug, maintain, test, or reuse.

    $("#myLink").on("click", function(){...}); // BAD
   
    // GOOD
    function myLinkClickHandler(){...}
    $("#myLink").on("click", myLinkClickHandler);

Use Object literals for parameters.

// BAD, 3 calls to attr()
$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); 

// GOOD, only 1 call to attr()
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

###References

mpatel3/jQuery.md

Performance of Selectors [Demo - JSFiddle - Go to Below Link ]