elidupuis/jquery-plugin-pattern.js

## jquery-plugin-pattern.js
(function($) {

$.fn.thePlugin = function(options) {

	// build main options before element iteration:
	var opts = $.extend({}, $.fn.thePlugin.defaults, options);

	var $this = $(this);
	var thePlugin = {
		index: 0,
		otherVar: true,

		init: function() {
			if(window.console) window.console.log('init() called. this = ', this);
		},

		doThat: function(){
			var a = thePlugin.otherVar;
			if(window.console) window.console.log('doThat() called.');
		},

		getIndex: function(){
			//	the interesting thing here is that from the HTML (public) 'this' will return the api object, not the thePlugin object because that's where it's called from.
			if(window.console) window.console.log("internal thePlugin.getIndex() called. this = ", this, "thePlugin = ", thePlugin);

			// this works because we're accessing thePlugin object directly:
			if(window.console) window.console.log(thePlugin.doThat);

			// this works because we're calling the function through the API itself:
			if(window.console) window.console.log(this.doAwesome);

			// this will not work for an API function (from the outside) because doThat is not returned in the API:
			if(window.console) window.console.log(this.doThat);


			return thePlugin.index;
		}

	};

	if (opts.api) {
		var api = {
			getIndex: thePlugin.getIndex,
			doAwesome: thePlugin.doThat,
			opts: opts,
			obj: $this
		};

		$this.data('thePlugin.api', api);
	};

	return this.each(function() {
		//	start the action here
		thePlugin.init();
	});
};

// plugin defaults
$.fn.thePlugin.defaults = {
	optionA: 'testing',
	api: true
};

//	public function/method
$.fn.thePlugin.ver = function() { return "jquery.thePlugin version " + ver; };

})(jQuery);

## sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>jQuery plugin pattern</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="jquery.thePlugin.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">

		$(document).ready(function(){
			var api = $('#slideshow').thePlugin().css('background','red').data('thePlugin.api');

			if(window.console) window.console.log('api = ', api, api.opts, api.obj);
			// if(window.console) window.console.log( 'api.getIndex() called from HTML: ', api.getIndex() );


			//	options/settings are maintained through multiple instances on same page:
			var elm2 = $('#elm2').thePlugin({
				optionA: 'mycustomvalue'
			}).css('background', 'blue').data('thePlugin.api');
			if(window.console) window.console.log(elm2, elm2.opts, elm2.obj);


			//	try to overwrite the function. can't get access to internal 'thePlugin'
			api.doAwesome = function(){
				if(window.console) window.console.log(this, typeof(thePlugin));
			}
			api.doAwesome();

		});

	</script>
</head>

<body>
	<h1>jquery plugin pattern with API</h1>

	<div id="slideshow">
		<p>the test element to be selected</p>
	</div>

	<div id="elm2">
		<p>another test element...</p>
	</div>

</body>
</html>
	(function($) {

	$.fn.thePlugin = function(options) {

	// build main options before element iteration:
	var opts = $.extend({}, $.fn.thePlugin.defaults, options);

	var $this = $(this);
	var thePlugin = {
	index: 0,
	otherVar: true,

	init: function() {
	if(window.console) window.console.log('init() called. this = ', this);
	},

	doThat: function(){
	var a = thePlugin.otherVar;
	if(window.console) window.console.log('doThat() called.');
	},

	getIndex: function(){
	// the interesting thing here is that from the HTML (public) 'this' will return the api object, not the thePlugin object because that's where it's called from.
	if(window.console) window.console.log("internal thePlugin.getIndex() called. this = ", this, "thePlugin = ", thePlugin);

	// this works because we're accessing thePlugin object directly:
	if(window.console) window.console.log(thePlugin.doThat);

	// this works because we're calling the function through the API itself:
	if(window.console) window.console.log(this.doAwesome);

	// this will not work for an API function (from the outside) because doThat is not returned in the API:
	if(window.console) window.console.log(this.doThat);



	return thePlugin.index;
	}

	};

	if (opts.api) {
	var api = {
	getIndex: thePlugin.getIndex,
	doAwesome: thePlugin.doThat,
	opts: opts,
	obj: $this
	};

	$this.data('thePlugin.api', api);
	};

	return this.each(function() {
	// start the action here
	thePlugin.init();
	});
	};

	// plugin defaults
	$.fn.thePlugin.defaults = {
	optionA: 'testing',
	api: true
	};

	// public function/method
	$.fn.thePlugin.ver = function() { return "jquery.thePlugin version " + ver; };

	})(jQuery);
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>jQuery plugin pattern</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="jquery.thePlugin.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">

	$(document).ready(function(){
	var api = $('#slideshow').thePlugin().css('background','red').data('thePlugin.api');

	if(window.console) window.console.log('api = ', api, api.opts, api.obj);
	// if(window.console) window.console.log( 'api.getIndex() called from HTML: ', api.getIndex() );


	// options/settings are maintained through multiple instances on same page:
	var elm2 = $('#elm2').thePlugin({
	optionA: 'mycustomvalue'
	}).css('background', 'blue').data('thePlugin.api');
	if(window.console) window.console.log(elm2, elm2.opts, elm2.obj);



	// try to overwrite the function. can't get access to internal 'thePlugin'
	api.doAwesome = function(){
	if(window.console) window.console.log(this, typeof(thePlugin));
	}
	api.doAwesome();

	});

	</script>
	</head>

	<body>
	<h1>jquery plugin pattern with API</h1>

	<div id="slideshow">
	<p>the test element to be selected</p>
	</div>

	<div id="elm2">
	<p>another test element...</p>
	</div>

	</body>
	</html>