I am fairly new to web development and have been trying to figure out the best way to organize my JavaScript files for the front-end.

The first approach I started with was “one JavaScript file per page”, avoiding in-line scripts. Each file would usually attach event listeners and handle any initialization that needed to occur on the page. This was fine until the files started getting huge, and I found myself cordoning off sections for specific page “components” (e.g. a specific table, or a modal).

// SomePage.js

...

//--- User Table Section ---
const user_table = document.getElementById("user_table");
user_table.attachEventListener( ... )

...

//--- Delete Confirmation Section ---
const delete_confirmation = document.getElementById("delete_confirmation");
delete_confirmation.attachEventListener( ... )

...

This prompted me to throw together a “one JavaScript class per component” approach. I define a block of HTML (usually a PartialView) as a component by giving it a data attribute that specifies the JavaScript class that would operate exclusively on it. Each website page loads a single JavaScript file (the “entry point”) which searches for this data attribute and uses a mapping of component names to classes to instantiate the appropriate class. The end result is a collection of smaller and more focused script files.

// UserTable.js
export default class UserTable {
    constructor() {
        const user_table = document.getElementById("user_table");
        user_table.attachEventListener( ... )
    }
    // Helper functions go here...
}

// DeleteConfirmation.js
export default class DeleteConfirmation {
    constructor() {
        const delete_confirmation = document.getElementById("delete_confirmation");
        delete_confirmation.attachEventListener( ... )
    }
    // Helper functions go here...
}

// Entrypoint.js
// ...import classes here...
const componentMap = {
    "UserTable": UserTable,
    "DeleteConfirmation": DeleteConfirmation
}
// ...search the page for 'data-component="<component name>"' and call 'new componentMap[<name>]();'

(I don’t use a <script> tag in each component’s HTML because I believe it would be detrimental to loading times (components are usually PartialViews, so the browser would have to stop processing the HTML and load the script instead), or not work well with bundling since the “defer” attribute requires defining a specific script– and bundling everything into a single compressed file seems to be standard practice.)

However, this implementation has some problems.

The first is constructing the mapping between the data attribute values and the classes. I can’t see any way other than having to manually add a new entry each time I develop a new component. For example, if I create a “UserTable.js” that contains all the JavaScript that operates on the HTML enclosed by a parent with the data-component="UserTable" attribute, I have to go to the entry point file and add "UserTable": UserTable where the value is a reference to the appropriate class. To be honest, this is a relatively small issue, but it makes me wonder if there is a better way of handling things.

The second is that I find myself spending a lot more time trying to figure out the rules I need to follow for this approach to continue working in the future. Things like “should a page allow multiple of the same component?”, “should components be allowed to contain other components?”, “should I add the ability for components to search for other components on the page, or should every component be fully encapsulated?”, etc. These all have their own advantages and disadvantages, which makes it hard to decide when I’m not even sure if my current approach is reasonable or not.

There are some other things I’m not totally certain about, like whether I should be exporting classes or functions (at times, I feel like I’m only using the class for the constructor), or how much I should be caring about caching and minimizing server requests– but I think my confusion can be cleared up with just a good example of how I’m supposed to be organizing front-end JavaScript files. I’m pretty sure there’s a very simple and obvious solution that I’m overlooking, but I can’t seem to find it on the Internet.