Javascript: passing large data sets to multiple functions

Question

I'm using YUI3 widgets, but for you jquery guys just pretend we are talking about plugins. I have a large json data set with over 5,000 records in it. In my applications I have at least 5 widgets that need access to my data set. Currently I'm embedding the json in the html and grabbing it with YUI3 on page load, before I render my widgets.

What I want to avoid is having 5 copies of my data set stored in memory. I'm trying to come up with a design pattern that allows me to avoid this. I believe if I pass this data in as an attribute to my widget, it will pass it by value, not reference and essentially copy it in memory ... let me know if I am wrong about this. Since the data is globally available, my widgets can access it directly, but I think this will also copy the data in memory.

I think if I initially create an object, loading my data in the object and pass that object in as an attribute it will pass it by reference, which will allow all of my widgets to access the same instance of my data.

Is this what you would do? Please let me know you thoughts and how you would set something like this up.

Thanks for your (positive) input!

Answer 1

If you keep the "data set" around in a separate .js file of its own, defined like this:

// My Huge Data Set
// Author: bababa
//
(function(window) {
  window['hugeDataSet'] = {
    // millions of lines of stuff
  };
})(this);

then when you import that with a plain <script> tag or with a script loader, there'll just be one global copy of the data. You can reference it like this:

someWidget.doSomething(hugeDataSet);

and that will not make a copy of the data. Of course, you can drop the data inline, in a <script> in your HTML, but then it won't be cached if your HTML is generated by a server-side template (like php or jsp or whatever).