I'm planning to write a javascript-based web application. I'm wondering what the best way to implement it in terms of file stucture is.

There is one main page (main.html) containing a menu and a main div section. The way it works is simple: When the user clicks on one of the links in the menu (for example 'Page 1'), the content of the div section is refreshed with the content of the page1.html file. This is done using javascript (jquery). If the user clicks on 'Page 2', the content of the page2.html file is loaded into the div section, etc.

Each page has its own javascript code and as I prefer to keep it separate I've implemented a sort of 'code behind' like in asp.net:

**page1.html**:  

< script type="text/javascript" src="**page1.js"** >< /script>   

<... html code ...>

**page2.html**:  

< script type="text/javascript" src="**page2.js"** >< /script >   

<... html code ...>

When the user clicks on 'Page 1', the content of the page1.html file is loaded into the main div section of main.html. As page1.html is referencing page1.js, the javascript code in page1.js is also loaded.

This seems to work fine but I'm wondering if it is the best way to implement this. At some point I was thinking of referencing all the javascript files in main.html This would also work fine but it would mean all the javascript files would have to be loaded in memory even if they are not going to be used. With the 1st approach, a javascript file is only loaded in memory before being actually used.

Any ideas? What are the 'best practises' for this? Keep in mind that this is a web application (as opposed to a website). It will be available over the internet but only to some users (and it will be password protected) so I don't care about SEO etc.