understanding a modular javascript pattern
===

I'm trying to write 'better' javascript.

Below is one pattern I've found, and am trying to adopt. However, I'm slightly confused about its use.

Say, for example, I've got a page called "Jobs". Any JS functionality on that page would be encapsulated in something like:

    window.jobs = (function(jobs, $, undefined){
    	return {
    		addNew: function(){
    			// job-adding code
    		}
    	}
    })(window.jobs|| {}, jQuery);
    
    $(function(){
        $('.add_job').on('click', function(event){
    	    event.preventDefault();
    	    window.jobs.addNew();
        });
    });

As you can probably deduct, all I've done is replaced all the code that would have sat inside the anonymous event-handler function, with a call to a function in my global jobs object. I'm not sure why that's a good thing, other than it's reduced the possibility of variable collisions and made the whole thing a bit neater, but that's good enough for me.

The - probably fairly obvious - question is: all my event-binding init-type stuff is still sitting outside my shiny new jobs object: where should it be? Inside the jobs object? Inside the return object inside the jobs object? Inside an init() function?

I'm just trying to get a sense of a stable, basic framework for putting simple functionality in. I'm not building JS apps, I'd just like to write code that's a little more robust and maintainable than it is currently. Any and all suggestions are warmly welcomed :)