This demo shows how to pass data to different js files without using global.
// store some common data and methods // which are going to be use through out the whole application $.secret( 'in', 'name', 'Ben' ). secret( 'in', 'age', 30 ). secret( 'in', 'sports', [ 'basketball', 'baseball' ]). secret( 'in', 'showName', function( callback ){ // append the stored 'name' to page this.$playground. append( '<p class="name"> Name: ' + this.name + '</p>' ); // do a callback function if any if( callback ) callback.call( this ); }).secret( 'in', 'showAge', function( callback ){ // append the stored 'age' to page this.$playground. append( '<p class="age"> Age: ' + this.age + '</p>' ); // do a callback function if any if( callback ) callback.call( this ); }).secret( 'in', 'showSports', function( callback ){ // cache obj props ouside the loop var sports = this.sports, fragment = '<p>Sports:<ul>'; $.each( sports, function( key, value ){ fragment = fragment + '<li>' + value + '</li>'; }); fragment = fragment + '</ul></p>'; this.$playground.append( fragment ); if( callback ) callback.call( this ); });
// wrap code in a document ready function $( function(){ $( '#click-me' ).bind( 'click', function(){ // pass the $( '#play-ground' ) to $.secret private obj $.secret( 'in', '$playground', $( '#play-ground' )). // execute predefined methods secret( 'out', 'showName', function(){ alert( 'callback function from showName' ); }).secret( 'out', 'showAge', function(){ alert( 'callback function from showAge' ); }).secret( 'out', 'showSports', function(){ alert( 'callback function from showSports' ); }); }); });
Click the button to see how these code works, you can check Firebug in the DOM panel to see if there is any global object.