I am trying to tackle two fairly massive concepts through JavaScript and jQuery, the first being object-oriented programming and the second being how to build robust modular plugins with an OOP approach. So far I've learned it's hard. Here is an example plugin I built, that I somewhat based my much larger project on; any opinions you guys have on my approach would be awesome.;(function($, window, document, undefined) {  use strict;  $.fn.myPlugin = function(opts) {  var settings = $.extend({},{ color  : 'blue', normal : 'black' }, opts);  var proto  = {    show : function () { $(this.self).css( color, this.settings.color ); },    hide : function () { $(this.self).css( color, this.settings.normal); },    log  : function () { console.log(this); }  }  return this.each(function(id, elem) {    if (!$.data(elem, 'parent')) // Base parent object                                                                                                                                                                                      $.data(elem, 'parent', Object.create(proto, {        'settings' : { value        : settings,                       writable     : true,                       enumerable   : true,                       configurable : true        }      }));      $(elem).children('span').each(function(idx, elmx) {        if (!$.data(elmx, 'child')) // Child obj w/ delegation from parent                                                                                                                                                                        $.data(elmx, 'child', Object.create($.data(elem, 'parent'), {            'foo'  : { value        : 'bar',                       writable     : true,                       enumerable   : true,                       configurable : true            },            'self' : { value        : elmx,                       writable     : false,                       enumerable   : true,                       configurable : false            }          }));        $(elmx).hover(          function() {            $.data(elmx, 'child').log();            $.data(elmx, 'child').show();          }, function() {            $.data(elmx, 'child').hide();          });        });      });  };}(jQuery, window, document));Here is where the code is running, basically all it does is search for <span> tags inside of the <p> tags the plugin is instantiated on and highlights them with a given user setting or the defaults. It shows the use of delegation for inheritance and very basic event management (no callbacks as of yet) 
jQuery plugin to highlight text spans in various colors
javascript;jquery;object oriented;plugin
The chief characteristics of this plugin appear to be :it is an exercise in a form of classical inheritance, by which methods bound to an element are inherited by selected child elements.methods are defined as properties of an object bound to DOM elements with jquery.data. These methods are intended(?) for private use (within the plugin) but are ultimately accessible by user code.the child elements (spans) will retain a relationship with their original parent after being moved elsewhere within the DOM. the selection of first child spans is hardcoded.All of which is interesting and potentially useful, but rather odd in some regards. [1]: is successfully and concisely coded.[2]: could be regarded as subverting jQuery. As it stands, the plugin leverages jQuery to provide an alternative way to bind methods to DOM elements, whereas we would normally expect a jQuery plugin to expose public methods via the jQuery interface and/or have private functions for internal use. [3]: could be inconsequential, useful, or a total annoyance, depending on the role of the plugin in the context of a wider application.[4]: you could consider a mechanism for user code to override the default selection of .children('span'), eg by passing a selector in the options hash.Out of interest, a more conventional jQuery plugin to achieve the same ends (with some extra features) might look something like this :;(function($) {    use strict;    // Private Members    var pluginName = 'myPlugin_1';    // Public Methods    var methods = {        init: function(options) {            return this.each(function(i, el) {                var settings = { color: 'blue', normal: 'black', selector: '>span' };                $.extend(settings, options || {});                $(el).on('mouseenter.' + pluginName, settings.selector, function(e) {                    console.log(settings);                    $(e.target).css( 'color', settings.color );                }).on('mouseleave.' + pluginName, settings.selector, function(e) {                    $(e.target).css( 'color', settings.normal );                });            });        },        destroy: function () {            return this.off('.' + pluginName);        }    };    // Supervisor    $.fn[pluginName] = function( method ) {        if ( methods[method] ) {            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));        } else if ( typeof method === 'object' || !method ) {            return methods.init.apply( this, arguments );        } else {            $.error( 'Method ' + method + ' does not exist in jQuery.' + pluginName );        }    };}(jQuery));Note: No inheritance is necessary here. The same effect is achieved through closure of the init method.Sample calls$('.p1').myPlugin({ color: 'blue' }); // exactly as in the question, using the default selector `>span` .$('.p2').myPlugin({ color: 'red', selector: '>span.a' }); // to select first level spans with class=a.$('.p2').myPlugin({ color: 'green', selector: '>span.b' }); // to select first level spans with class=b.