How can I improve my code structure to better augment functionality in
event handlers?
I'm working on a web-based editing UI that consists of a number of
interactive items, some of which are similar, but have slightly different
functionality between them. Using CoffeeScript, I've created a base class
that contains all of the functionality that's common to each similar item;
then, I'm extending that class to add more specialized functionality to
each unique item.
I created a basic example that demonstrates my current approach:
http://jsbin.com/uMEyeZO/7/edit?html,css,js,output
In this example, both boxes share the .handleChangeColor() method, but the
#special-box has unique .handleExpandWidth() behavior. I'm simply
redefining the latter method to change the functionality for the
#special-box.
In this simple case, things aren't too messy. But, in my actual project,
there's a lot of functionality handled when an item is clicked, most of
which is common to both items. Redefining an entire method for a special
case would lead to a lot of repeated code.
I've done some brainstorming to try to come up with a more elegant
approach, but so far I'm at a loss. I suspect that there's a common design
pattern I'm missing, or a way to restructure my code (e.g., calling
methods defining specific behaviors within a single event handler, not
setting up event handlers within multiple methods) that makes more sense.
Please let me know if you have any suggestions!
No comments:
Post a Comment