Idea to organize my javascript files

Right now, I have a HTML form (index.html) and a javascript file (logic.js). So all webservice calls and javascript stuff is defined inside logic.js.

Now, in my HTML, I am planning to add a popup dialog of jQuery for a particular project when someone clicks a button. I feel like I could have its logic in a separate javascript file, maybe project.js instead of having everything inside logic.js. Is it a good idea to create a different JS file and then include it in index.html just like I am including logic.js to make current things work properly?

Single Responsibility Principle

Actually, you should to separate all your logic parts even without this new popup. So, yes, this is a good idea.

Just the other day I had a single monolithic scripting file for generating random Kingdom Builder game setups, and now I have split parts of it out to separate files called main.js, data.js, players.js, boards.js, expansions,js, goals.js, tasks.js, capitol.js, caves.js, island.js, presenter.js, and view.js.

The most useful is presenter.js which I found out about from Uncle Bob (Robert C. Martin) for it accepts data, and repackages it so that it’s suitable for the view.

For example, it takes the following structure:

    {
        name: "Oracle",
        flipped: true,
        capitol: {
            useCapitol: true,
            direction: "N"
        },
        cave: true
    }

And turns it into the following information for display on the screen:

    {
        value: "Oracle (↷) (Capitol N) (Cave)",
        className: "base"
    }

Using Presenter is an example of the humble object pattern and even though it’s an idea from Java (what is the role of Presenter), it takes care of all the manipulations and results in the view code becoming very simple too.

Anyway - separating things out into separate files is a very beneficial thing to do. :+1:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.