// Changes for Essential JS design patterns

// jQuery Module pattern for plugins

!function(exports, $, undefined){

    var Plugin = function(){

        // Our private API
        var priv = {},
            
            // Our public API
            Plugin = {},

            // Plugin defaults
            defaults = {};

        // Private options and methods
        priv.options = {};
        priv.method1 = function(){};
        priv.method2 = function(){};

        // Public methods
        Plugin.method1 = function(){...};
        Plugin.method2 = function(){...};

        // Public initializatio
        Plugin.init = function(options) {
            $.extend(priv.options, defaults, options);
            priv.method1();
            return Plugin;
        }

        // Return the Public API (Plugin) we want
        // to expose
        return Plugin;
    }


    exports.Plugin = Plugin;

}(this, jQuery);

and this can be used as follows:

var myPlugin = new Plugin;
myPlugin.init(/* custom options */);
myPlugin.method1();

Lazy evaluation

$(document).ready(function(){
        // The ajax request won't attempt to execute until
        // the DOM is ready
	$.ajax({
	  url: 'http://jquery.com/sample.json',
	  success: function( data ) {
	    $('.status').html('content loaded');
	    console.log( 'Data output:' + data );
	  }
	});
});

Composite pattern

// Single elements
$('#singleItem').addClass('active'); 
$('#container').addClass('active'); 

// Collections of elements
$('div').addClass('active'); 
$('.item').addClass('active'); 
$('input').addClass('active'); 

Facade

  $.get();
  $.post();
  $.getJSON();
  $.getScript();

which translate to

// $.get()
$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

// $.post
$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

// $.getJSON()
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

// $.getScript()
$.ajax({
  url: url,
  dataType: "script",
  success: success
});

Iterator pattern

$.each(['john','dave','rick','julian'], function(index, value) { 
  console.log(index + ': ' + value); 
});

$('li').each(function(index) {
  console.log(index + ': ' + $(this).text());
});

Builder Pattern

If a string is passed as the parameter to $(), jQuery examines the string to see if it looks like HTML (i.e., it has <tag ... > somewhere within the string). If not, the string is interpreted as a selector expression, as explained above. But if the string appears to be an HTML snippet, jQuery attempts to create new DOM elements as described by the HTML.

$('<div class= "foo">bar</div>');
$('<p id="test">foo <em>bar</em></p>').appendTo('body');

Prototype pattern

(function( $ ) {
  $.fn.myPlugin = function() {
    // Your plugin logic goes here
  };
})( jQuery );

$('#container').myPlugin();