Where to put javascript and how to handle events [closed]

Question

For a long time I am looking for a practical (reusable, clear, updateable,...) solution to the following:

• I developed own PHP framework which uses 'widgets' - reusable parts of UI. Widgets can be updated via ajax requests.
• every widget is a simple PHP class with method called Content() which generates the HTML output.
• almost all widgets contain JavaScript. It is used for handling events in that particular widget.

Although everything works fine I am not satisfied with the way the JS is used. Here are some major issues:

• when refreshing a widget using Ajax all the widget data (HTML) is transferred to the client (OK) together with all the Javascript (BAD) (however the JS is not changed in 99% cases)
• final HTML markup is mixed with javascript calls and event handlers.
• it is difficult to manage all the embedded JS
• JS cannot be cached by the browser this way

What I would like to ask you is your opinion/advice on using Javascript in larger php frameworks.

Recently I was thinking about writing a separate method in the widget class (let's say function Script()) where I'll put all the JS code and then walk through all the widgets, take all the JS code and put it in one .js file which will be used until there is a change made in one of the widgets. What do you think about this approach?

Thanks!

Answer 1

I would put javascript files used by different widgets in different maps and load them statically (has got to be faster, plus the automatic browser caching if you have the right settings).

Then, dependently on how dynamic your framework is, I would make some kind of loader-javascript that automatically fetches and loads only those JS files that are needed for the widgets that are currently loaded on the page. All you would have to print in the script is perhaps some kind of require_js_file function, which will tell the loader which javascript does this widget use, and the loader would fetch it, but only if it has not already been loaded (for example if this is not the first run of the widget).