I am currently in the process of planning a complex web application using WebGL and Three.js. As I experiment with different tests, I have encountered a problem that is raising many questions for me. I am unsure of the correct approach to take and would greatly appreciate any guidance in the right direction.
Here's the issue at hand: My application requires numerous event listeners and must be as modular as possible to allow for easy removal of components without causing issues elsewhere.
By event listeners, I mean that I need to monitor user clicks on elements, check for selected elements, change tool views, and more. It's quite intricate. Additionally, I will be developing various tools such as cloning and mirroring, which further complicates the situation. I can foresee that using functions alone will lead to inefficient code organization and a messy structure. For instance, when a user selects "cube draw" control, certain controls need to be locked, and click events must be monitored. But how do I manage so many diverse click events effectively?
To give you a better understanding, I created a simple sketch of my requirements:
And just to clarify, I've already attempted to implement what I need using basic Javascript functions. However, it has proven to be buggy, convoluted, and not the optimal solution. There must be a better way, correct?
Here is my attempt: JsFiddle
I'm seeking a solution similar to something like: . This example uses Backbone and is spread across multiple files, making it difficult for me to grasp the underlying structure.