The question I have is a best practices one. Let's say I have a hypothetical app with 3 pages. The app is data driven and the data is organized in a hierarchical fashion so there are multiple ways to get there but you always end up in the same place, the details.

My 3 pages are organized with a single top section and a bottom section broken into left and right bottom. The bottom right in all 3 cases contains the same detail information. The bottom left contains the same information on two of the pages and different information on the third. The top section contains different information on each of the three pages.

I would like to be able to reuse the js code for the bottom right on all three pages. In a small app, I could see putting it all in one js file, but is that practical and recommended in a larger app?

In PHP I have includes and classes to be able to create components and share those components. Is there a similar approach in js?

And regarding best practices, is there a rule of thumb on how many .js pages should be used or how those .js pages should be organized related to shared content. Thanks for any input on this.