jquery and object oriented structure

[nimo frey]

I want to organize/structure/encapsulate all my jquery javascript code:

I have a file "mypage_version1.js" with the following content (VERSION 1):

$(function() {
// tabs for view a
setupTabs('#idViewA', '#contentA');

// tabs for view b
setupTabs('#idViewB', '#contentB');

});

var setupTabs = function(parent, content){
	$(parent).on('click', nav, function() {
         ...
	return false;
	});
};

How can I organize it better?

Does the file "mypage_version2.js" with the following content (VERSION 2) structures the code better than "VERSION 1"?:

// create a global namespace
var myview= {};

$(function() {
var tabsA = new Tabs('#idViewA', '#contentA');
tabsA .create();

var tabsB = new Tabs('#idViewB', '#contentB');
tabsB .create();
});

function Tabs(parent, content) {
	// properties
	this.parent = parent;
	this.content= content;
	
	// method
	Tabs.prototype.create = function() {
         //  I cannot use "this.parent", as it is undefined when calling the jquery-function, so I have to use "parent" which is assigned
	$(parent).on('click', content, function() {
         ...
	return false;
			});
		};
	;
};

I am in doubt, which version is better (both works).

Version 1 is shorter, but cluttered within the file.

What is best practice?

[Bear Bibeault]

Which is clearer? WHich is easier to understand for someone who didn't write the code? WHich will be easier to maintain later on?

Too many people try to over-think things and just make things complicated for no reason.