jQuery Plugin Tutorial 2 Pattern

The main jQuery object
=================================================
var jQuery = window.jQuery = window.$ = function(selector, context)
    {
       // ...
       // other internal initialization code goes here
    };   
=================================================

Internal definition of a jQuery plugin
=================================================
<script type = "text/javascript">
    (function($){ ... })(jQuery);
</script>
=================================================

jQuery Plugin Design Pattern `A`
==================================================
// plugin-name.js - define your plugin implementation pattern
(function($)
             // The $ here signifies a parameter name
             // As you can see from below, (jQuery) is
             // immediately passed as the $ param
{
    $.vari = "$.vari";
    $.fn.vari = "$.fn.vari";
    // 1.) Add a custom interface `DoSomethingLocal`
    //     Which will modify all selected elements!
    //     If you are a software engineer, think about this as
    //     a member function of the main jQuery class
    $.fn.DoSomethingLocal = function()    {
        // return the object back to the chained call flow
        return this.each(function() // This is the main processor
                                    // function that executes on
                                    // each selected element
                                    // (e.g: jQuery("div"))
        {
            // this     ~ refers to a DOM element
            // $(this)  ~ refers to a jQuery object
            // Here, the `this` keyword is a self-refence to the
            // selected object `this.vari` is `undefined` because
            // it refers to selected DOM elements. So, we can do
            // something like: var borderStyle = this.style.border;
            // While $(this).vari, or jQuery(this).vari refers
            // to `$.fn.vari`
            // You would use the $(this) object to perform
            // any desired modification to the selected elements
            // $(this) is simply a reference to the jQuery object
            // of the selected elements
            alert(this.vari);    // would output `undefined`
            alert($(this).vari); // would output `$.fn.vari`        });
    };
})(jQuery);

// pass the jQuery object to this function
// 2.) Or we can add a custom interface to the global jQuery
//     object. In this case, it makes no sense to enumerate
//     through objects with `each` keyword because this function
//     will theoretically work in the `global` scope. If you are
//     a professional software engineer, think about this
//     as a [static function]
$.DoSomethingGlobal = function(){
    // this will output this.vari = $.vari
    alert("Do Something Globally, where `this.vari` = " + this.vari);
};

// index.html - test the plugin
$(document).ready(function()
{
    $("div").DoSomethingLocal();
    $.DoSomethingGlobal();
});

There are two different types of interfaces you can add to the main jQuery object that is already defined by the framework. Please take a look at the example above where we have just added the function DoSomethingLocal and DoSomethingGlobal.
1.) DoSomethingLocal is defined as $.fn.DoSomethingLocal. You can add as many custom functions to the jQuery.fn (or simply $.fn) object as required by your plugin implementation. Any function you add to the $.fn object is assumed to work on references to an instance of an element/object that was selected. This is what the $.fn syntax means - we are simply adding a custom interface to a jQuery object that assumes selected elements.
2.) DoSomethingGlobal is applied directly to the global jQuery object as $.DoSomethingGlobal. A function attached to the jQuery framework in such way assumes that it will not work on selected elements but rather it will work in the global scope and contain practically any implementation.


jQuery Plugin Design Pattern `B`
==================================================
//It must assume that this plugin functions will not be returning a jQuery object.
// Plugin base object
$.gShuffle = function()
{
}
// Initializes plugin
$.gShuffle.initialize = function()
{
}
// Runs the plugin
$.gShuffle.run = function()
{
};
---------------------------------------------------------
<script type = "text/javascript">
    // One way to initialize plugin code
    $(document).ready(function()    { // on document loaded, it's ready, and next will do the function as
                                                          //  a event handler
        jQuery.Shuffle.initialize( "monalisa.jpg", 5, 8, 67, 1500);
        jQuery.Shuffle.run();
    }
</script>
==================================================