I have inherited a legacy JS multi page application and am contemplating the idea of migrating its code to modern day modular Javascript :
- implement loose coupling
- implement a modular system
Actually it seems a lot easier to start a new project using these techniques than to migrate an old style one.
What I have right now is stuff along the lines of
...
<a href="javascript:DoSomething('hey', 25);">Click this !</a>
...
and in a JS file a global function without any context, called DoSomething.
I read a lot about loose coupling and modular JS, but somehow I wonder how to actually implement stuff like my silly example, because it doesn't seem to have any context, and then that attaching all simple button/link actions through events and loose coupling makes it harder to read code and find out what a simple action command does.
How youd you actually implement this kind of thing, assuming there is a huge amount of such links and global functions everywhere ?
EDIT : I should have been more clearer, sorry. Actually I can not use any JS-generated DOM technique such as Backbone views and so on, because all my HTML is generated server-side (it is mandatory in this app unfortunately) so the question remains as to how to efficienty come up with modules and such code, if most of what they do is respond to DOM events (on specific pre-defined elements generated server-side) and send data back to the server in form of page changes or AJAX calls.
For utility-like modules or other stuff decoupled from the DOM, it's quite clear how to implement modules, but for stuff tied to a static DOM that JS does not generate ?
Specifically, where and how to implement event handers, triggers changing DOM elements ? and so on.