send data to JS file without using global variables

I need to send data in a HTML page to a script file that is loaded in that page. The simplest way i can think of is to use a global variable which is defined in the page and accessed in the script file.

We all know global sta开发者_如何学编程te is bad, so i started thinking about the options available for passing data from HTML page to script file without using global state. I cant find (or think of) any.

I am curious whether this is possible. Any ideas?

It really depends what you're doing. In general, I wouldn't advise this methodology, but it's something to consider depending on your circumstances. For the sake of this example, I'll assume you're using jQuery (if not, replace the document.ready with whatever you want to use for onDOMReadyStateChange monitoring).

In the HTML:

<script type='text/json-data' id='some_data_set'>
  { 'foo': 'bar', 'baz': 1 }
</script>

In the JavaScript:

$(function() {
  var myData = JSON.parse($('script#some_data_set').html());
  // YOUR CODE GOES HERE
});

Nope. All the javascript scope starts from a global level, therefore you must have at least one global reference to your data.

Let's say you wanted to store a list of products and events:

var myGlobalData = { "products":<products>, "events":<events> };

Where <products> and <events> are two different data blocks.

If you're paranoid on global objects, you can simply delete the reference point (thus it's contents) after you finished using it, as follows:

delete window.myGlobalData;

One option is to scope your data. For example, in JS file you can define an object like:

   var processor = { 
     function setData(o) { // do stuff
     }  
   };

Then in your HTML you know that the data is scoped to the processor. So you can do something like:

processor.setData({someData});