We used Revealing Module Pattern, but in fact, there are several patterns for modularizing js codes.
Modularizing can be done in a single js file, but it\’s recommended to split each module into a separate file. Doing so allows a better control over each module and facilitates working as teams on a project. However, as the project grows you will end up with a tremendous amount of js files beside each other. Therefore, you should organize them into a defined directory structure as well as follow a naming convention for the files and folders.
A common convention for naming codes which are responsible for business logics and interacting with DOM is to postfix them with “Controller” word.
for example; customerController.
The code providing specific services such as calling a server API could be postfixed with “Service”.
for example; customerService.
These are borrowed from AngularJs conventions.
Again, there are different views on that.
One approach is to create a folder for all the modules with the same type.
Another approach is to separate different sections by their responsibility.
The correct choice depends on the nature of the project, however, I personally prefer the 2nd approach.
We would get an even better result if we Minify the files in this process as well.
ASP.NET provides a bundling option which accepts multiple js (or css) files and returns a single minified file instead (when not in debug mode).