Object Oriented vs Not jQuery & JS

I have taken a widget/ plugin that I wrote yesterday and just now it has been re-written in an object oriented format. It is certainly more code to write it the OO way, so please let me know also how to analyze the performance of each example of the same widget below:

Please keep in mind that I use data-attr selectors because of their descriptive nature and the fact that it separates style and functionality by not binding its functionality to .class selectors. Yes, I understand ID's are faster. I use a ~ before the = when querying these selectors because I like to leave the data-function or data -widget attr's open to the addition of new functionality (E.G. $('data-function="accordion jsondataset").. in this format javascript will not pick up the jsondataset attribute unless a ~ is added in the selector scripting resembling $('data-function~="jsondataset").

Here is the finished code:

```
var tabs = function(){
var tabsWidgetEnvoked = $('[data-widget~="tabs"]');
if (tabsWidgetEnvoked){ // if data-attr present in DOM
var settings = [
{ // widget settings as an object
tabs : $('[data-function="tabs"]'),
content: $('[data-function="content"]'),
tabShowing : '1',
animated: true,
}
]
$.each(settings, function(){
// event handling
tabs = this.tabs;
content = this.content;
show = this.tabShowing;
animated = this.animated;
});
if (animated === true){
$('body').addClass('animated');
}
tabs.children().each(function(i){
i = i + 1;
$(this).attr('data-nav-order', i);
});
content.children().each(function(i){
i = i+ 1;
$(this).attr('data-content-order', i);
});
tabs.children(':nth-child('+show+')').addClass('active')
content.children(':nth-child('+show+')').addClass('active')
tabs.children().click(function(e){
e.preventDefault();
tabs.children().removeClass('

First of all, maybe you should give the user a way to configure the selector - this gives most applications the chance to go for an id selector, others might want to have a more global or unobstrusive approach - so they can just use a data-selector.

Your object oriented approach is not following the standard principles for jquery plugins - from what I see there you are using jquery so why not use their plugin techniques then. As the jquery docs have a huge documentation of that, here is just a small example:

$.fn.tabs= function() {
    this.css( "color", "green" );
};

$( "a" ).tabs(); // Makes all the links green.

See http://learn.jquery.com/plugins/basic-plugin-creation/ for a better explanation. This also makes possible what I showed above - let the user decide what selector to use.

For this simple tabs script I don't see any other considerations when it comes to performance.

StackExchange Code Review Q#54076, answer score: 3