Question

I’m working on a fiddly web interface which is mostly built with JavaScript. Its basically one (very) large form with many sections. Each section is built based on options from other parts of the form. Whenever those options change the new values are noted in a ‘registry’ type object and the other sections re-populate accordingly.

Having event listeners on the many form fields is starting to slow things down, and refreshing the whole form for each change would be too heavy/slow for the user.

I’m wondering whether its possible to add listeners to the registry object’s attributes rather than the form elements to speed things up a bit? And, if so, could you provide/point me to some sample code?

Further information:

• This is a plug-in for jQuery, so any functionality I can build-on from that library would be helpful but not essential.
• Our users are using IE6/7, Safari and FF2/3, so if it is possible but only for ‘modern’ browsers I’ll have to find a different solution.

Answer 1

Thanks for the comments guys. I’ve gone with the following:

var EntriesRegistry = (function(){      var instance = null;      function __constructor() {          var             self = this,             observations = {};          this.set = function(n,v)         {             self[n] = v;              if( observations[n] )                 for( var i=0; i < observations[n].length; i++ )                     observations[n][i].apply(null, [v, n]);          }          this.get = function(n)         {             return self[n];         }          this.observe = function(n,f)         {              if(observations[n] == undefined)                 observations[n] = [];              observations[n].push(f);         }      }      return new function(){         this.getInstance = function(){             if (instance == null)             {                 instance = new __constructor();                 instance.constructor = null;             }             return instance;         }     } })();  var entries = EntriesRegistry.getInstance();  var test = function(v){ alert(v); };  entries.set('bob', 'meh');  entries.get('bob');  entries.observe('seth', test);  entries.set('seth', 'dave'); 

Taking on-board your comments, I’ll be using event delegation on the form objects to update the registry and trigger the registered observing methods.

This is working well for me so far… can you guys see any problems with this?