ProductPicker Design Pattern

picker.js

// local namespace
(function( $ ) {
// namespace constants

// application namespace
ProductPicker = function(opts) {
	var self = {};
	var defaults = {
		target: '#picker',
		state: {
			vcid: 0,
			view: 'Home',
			env: {}
		},
		config: {},
		bindings: {
			'#pp': {
				'click .ppTabs': 'renderView'
			}
		}
	};
	
	self.opts = $.extend(true, defaults, opts || {});
	
	// private methods
	self.renderView = function() {
		var hashView = ProductPicker.Util.getHashValue('view') || 'Home';
		var hashVCID = ProductPicker.Util.getHashValue('vcid') || 0;
		var hashEnv = ProductPicker.Util.getHashValue('env') || {};
		
		document.title = 'ProductPicker - '+hashView;
		$('#ppHeaderChooseVC select').select(hashVCID);
		$('#pp').attr('class', 'pp' + hashView + 'View');
		$('.ppPane').hide();
		var viewObject = ProductPicker[hashView]();
		viewObject.init();
	};
	self.sendAjaxRequest = function(methodName, callerView, sendData) {
		$.ajax({
            data: JSON.stringify({
				method: methodName,
				id: callerView,
				params: sendData
			}),
			success: function(response) {
				if (response.result.data != undefined) {
					// send data back to caller
					$(response.id).triggerHandler('ajaxTrigger', response.result);
				} else {
					// error handling
				}
			}
		});
	};

	// public interface to be exposed
	return {
		init: function() {
			$.ajaxSetup({
				type: "POST",
		        url: "wp/productpickerhandler.ashx",
				error: function (reqObject, text, message) {
		            console.log(message);
					// TODO: Proper error handling
		        }
			});

			$('#Form1 > input.config').each(function() {
				var inputID = $(this).attr('id');
				var inputValue = $(this).val();

				self.opts.config[inputID] = inputValue;
			});
			
			$(self.opts.target).load('html/index_'+self.opts.config.primaryView+'.htm', function() {
				$(window).hashchange(self.renderView);
				
				ProductPicker.Util.bindEvents(self, self.opts.bindings);
				ProductPicker.Util.pushHashState(self.opts.state);
			});
		}
	};
}();

	ProductPicker.Util = {
		getHashValue: function(key) {
			var results = new RegExp('[\\#?&]' + key + '=([^&#]*)').exec(window.location.hash);
		    if (!results) { return 0; }
		    return results[1] || 0;
		},
		
		pushHashState: function(appState) {
			window.location.hash = $.param(appState);
		},
		
		bindEvents: function(obj, bindings) {
			$.each(bindings, function(context, events) {
				$.each(events, function(eventAndSelector, callback) {
		  			var parts = eventAndSelector.split(" ");
		  			var event = parts[0];
		  			var selector = parts[1];
					
		  			ProductPicker.Util.delegateEventsInContext(context, selector, event, obj[callback]);
				});
	  		});
		},
		
		delegateEventsInContext: function(context, selector, event, callback) {
	  		$(context).delegate(selector, event, callback);
		}
	};

	ProductPicker.Home = function(opts) {
		
		// private data
		var self = {};
		var initialized = false;
		var defaults = {
			node: $('#ppHome'),
			tab: $('#ppTabHome')
		};
	
		self.opts = $.extend(true, defaults, opts || {});
		
		// private methods
		var ajaxWorker = function() {};
		var buildBreadcrumb = function() {};
	
		// public interface to be exposed
		return {
			init: function() {
				if (initialized) { return false; }
				self.opts.node.load('html/home.htm', function() {
					$(this).show();
					initialized = true;
				});
			}
		};
	
	};
	
})( jQuery );

http://addyosmani.com/resources/essentialjsdesignpatterns/book/
http://www.yuiblog.com/blog/2007/06/12/module-pattern/
http://msdn.microsoft.com/en-us/magazine/cc163419.aspx
http://arguments.callee.info/2009/01/13/synchronous-sqlite-singleton/