javascript - trick to centralized store

 

For a number of reasons it's not advisable to bind an event handler directly to an element, you'll want to use an intermediary event handler instead and store all the handlers in a separate object. These reasons include:

 

 

1. Normalizing the context of handlers
2. Fixing the properties of events objects
3. Handling garbage collection of bound handlers
4. triggering or removing some handlers by a filter
5. Unbinding all events of a particular type.
6. Cloning of event handlers

 

You need to have access to the full list of the handlers bound to an element in order to be achieve all of these points. At which time it really makes the most sense to just avoid directly binding the events.  

 

The best way to manage the handlers associated with a DOM node is to give each node that your work a unique ID and then store all data in a centralized object. Keeping the data in a central store, in this manner, helps to avoid potential memory leaks in Internet Explorer (attaching functions to a DOM element that have a closure to a DOM node is capable of causing memory to be lost after navigating away from a page).

 

 

so, in this section, I will show you how to create a central object for DOM elements.

 

 

 

/**************************************
*@Name: expandoattr.js
*@Summary
* For a number of reasoni it's not advisable to bind an event handler direcly to an element, you will want to use an intermediate event handlers instead 
* and store all the handlers in a separate object. the reasons include:
*   * normalize the context of handlers
*   * Fixing the properites of event objects.
*   * Handling garbage collection of bound handlers.
*   * Triggering or removing some handlers by a filter
*   * Unbinding all events of a particular type. 
*   * cloning of even handlers
*
*   the best way to manage the handlers associated with a DOM node is to give each node that your work a unique ID and then store all data in a centralized object. KIeeping the data 
*   in a central store, in this manner, helps to avoid potential memory leask in Internet Exploerer (attaching function to a DOM element that have a closure to a DOM node is capable of causing 
*   memory to be lost after navigating away from a page). 
* @todo:
*   Test
***************************************/
(function () {
  var cache = {}, guid = 1, expando = "data" + (new Date).getTime();

  this.getData = function (elem) {
    var id = elem[expando];
    if (!id) {

      id = elem[expando] = guid++;
      cache[id] = {};

    }
    return cache[id];
  };

  this.removeData = function (elem) {
    var id = elem[expando];
    if (!id) {
      return;
    }
    // remove all sore data
    delete cache[id];
    // remove the expando property from the DOM node
    try {
      delete elem[expando];
    } catch (e) {
      if (elem.removeAttribute) {
        elem.removeAttriute(expando);
      }
    }

  };
})();