Flyweight Pattern – Javascript

http://msdn.microsoft.com/en-US/scriptjunkie/hh273390.aspx

1. Centralized event handling

This will be used in cases where we have a number of similar elements or structures on a page that share similar behaviour when a user-action is performed against them.

In JavaScript, there’s a known bubbling effect in the language so that if an element such as a link or button is clicked, that event is bubbled up to the parent, informing them that something lower down the tree has been clicked. We can use this effect to our advantage.

Ex: In following example we can bind click event to ul and can handle every li click separately with out binding different functions directly to each li. This will also improve performance by minimizing the DOM access for binding/unbinding and by avoiding the event handling for each element separately.

<ul>
 <li class=’one’>One</li>
 <li class=’two’>two</li>
 <li class=’three’>three</li>
 <li class=’four’>four</li>
 <li class=’five’>five</li>
</ul>

stateManager = {
    fly: function () {
        var self = this;
        $(‘ul’).unbind().bind(“click”, function (e) {
            var target = $(e.originalTarget || e.srcElement);
            if (target.is(“li.one”)) {
                self.handleLIOne(target[0]);
            }
            else if (target.is(“li.two”)) {
                self.handleLITwo(target[0]);
            }
        });
    },
    handleLIOne: function (elem) {
        //Do your own implementation for first li element click
        alert(elem.innerHTML);
    },
    handleLITwo: function (elem) {
        //Do your own implementation for second li element click
        alert(elem.innerHTML);
    }
}
stateManager.fly();