Organizing and sharing js code

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.

We generally store our objects separate files (trying) to logically separate out functional elements so it can be managed easily in a sub version repository. When we want to publish a release of the code we push our code through a server side process that brings all that code into a single file and minifies it. The more you separate out your javascript into files that represent the functionality it is reponsible for the easier it becomes to debug, but the harder it becomes to deploy.

As for best practice, I couldn’t really comment. If I start a new js application again I would probably try to more strictly follow MVC concepts to give it more flexibility and create files for each model,view and controller and any supporting libraries.

Thanks for the input.

A percentage of your visitors will not have JavaScript and so will not see any parts of the page generated from JavaScript.

To share parts of the page content you should either use Server Side Includes (SSI) or a server side language.

Thanks, I understand. All my pages work with or without js. Some functionality won’t be there but the site still works. :slight_smile:

What do you have so far, its kind of hard to recommend anything because the details will determine the best patterns to use, etc.

I understand there isn’t much detail. Most of what I do with js is ajax with jQuery to avoid page refreshes when they want pieces of data. What I am finding is that I will have one routine that runs on all pages, another that runs on two of them, another that runs on several, etc. etc. So my choices as I see them are to create small js pages to include as scripts as needed on each page but that seems unwieldy to include 8 small scripts on one web page. But if I create one script for each page, that means some routines will be duplicated. Or maybe there should just be one page for the whole project.

Does that make more sense? And I’m not sure there is a simple answer here at all. I understand the project will dictate a lot of this.