File structure for javascript based web application
I am planning to write a javascript based web application. I am wondering what is the best way to implement it in terms of file structure.
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 is updated with the content of the page1.html file. This is done using javascript (jquery). If the user clicks Page 2, the content of the page2.html file is loaded into the div, and so on.
Each page has its own javascript code, and since I prefer to keep it separate, I implemented a kind of "code behind" like in asp.net:
page1.html :
<script type = "text / javascript" src = " page1.js" > </script>
<... html code ...>
<B> page2.html:
<script type = "text / javascript "src =" page2.js " > </script>
<... html code ...>
When the user clicks Page 1, the content of the page1.html file is loaded into the main div section of the main.html file. Since page1.html refers to page1.js, the javascript code in page1.js is also loaded.
Everything seems to be working fine, but I'm wondering if this is the best way to implement this. At some point I was thinking about referencing all javascript files in main.html. This will work fine as well, but it will mean that all javascript files have to be loaded into memory, even if not in use. With the 1st approach, the javascript file is only loaded into memory before using it.
Any ideas? What are the "best practices" for this? Please be aware that this is a web application (as opposed to a website). It will be available over the internet, but only for some users (and it will be password protected), so I don't need SEO, etc.
source to share
It may not make any difference to you, but you know this is a terrible idea from an SEO standpoint. Your site will be the Javascript version of the flash site. Search engines will only have one page.
This is why frame-based sites that have been quite popular for a number of years have all but disappeared.
source to share
JavaScript file loading is synchronous which negatively impacts page load time / perceived responsiveness.
For this reason, I find it best to combine all scripts into one file, compress it with a YUI compressor, and send it gzipped. This way you get the best compression and the least HTTP resources, and the cached JS will not pause other pages from loading.
For special pages, dynamic scripts use a string <script>…</script>
.
source to share
@porneL
there are ways and means to force JS to load async'ly (creating script tags), but they may be considered unsafe
@OP
I agree with others that this sounds like a bad idea in terms of SEO and accessibility, in terms of performance from a practical point of view (there are ways to load into code, but it takes a lot of effort for minimal gain, I think), and questionable efficiency with application development point of view. As a hypothetical exercise, I think the porneL gzip solution works best.
Basically, I think you will not be able to find best practices for something that has little practice.
source to share