How to separate JavaScript logic?

Question

JavaScript

I tried many solutions for splitting JS logic, but so far I have not found one that suits me completely.

The bottom line is that projects are different. There are those that need long-term support, complex and "heavy", with a lot of interactive elements on pages driven by js. How do you ensure the modularity of javascript applications in this case? How do you handle dependencies between modules and third-party libraries?

I've tried several approaches, ranging from simply including the right files in different templates, to AMD solutions like RequireJS. In the first case, dependencies between modules are not tracked. In the second, random failures occur during asynchronous loading of modules (hands seem to be not crooked and I am far from the only one who has such a problem).

Where is the golden mean? How do you solve this problem?

Answer 1

Look at other bootloaders. We have also faced this for a long time, and as they say, we also created our own IncludeJS solution . The upside is that it also loads the styles and the template. Does not require configuration files. Doesn't require special module declaration (loads any js, but supports °exports). Supports "custom loaders".. here is the Traceur Compiler Plugin . And we are slowly migrating all projects to ES6.
There is little documentation, it can be difficult to figure it out.
There is another very good loader - LMD
All of them can also collect all resources into one files for release.

Answer 2

Try ember.js https://www.codeschool.com/courses/warming-up-with...

Answer 3

If there are several screens of code, then just "fuck on jquery".
Otherwise normal MVC with Backbone.

Answer 4

One of the many problems that disappeared after switching to CoffeeScript.