I have a small application with two pages: the login page and the main page. My problem is that when I use just one main JavaScript file for both pages (like it’s recommanded) I get a lot of ReferenceError because some variables on a page are not defined on the other one…
e.g:
Line of code for the login page
copyrightYear.textContent = new Date().getFullYear();
Main page complains
Uncaught TypeError: Cannot set property 'textContent' of null
How can I fix that? Don’t tell me I have to say if(copyrightYear) { do stuff } everytime, it’s just a nightmare if I have to do that for every variable
Advertisement
Answer
Two answers for you:
The recommendation isn’t a dictate
My problem is that when I use just one main JavaScript file for both pages (like it’s recommanded)
That’s a very general recommendation. It doesn’t apply to every situation. There’s no point in loading code in a page that won’t use that code.
If you have code that you use in both pages, and also page-specific code, it’s absolutely fine to have a file that both pages share and also page-specific files:
<script src="main.js"></script> <script src="page1.js"></script>
If you’re really worried about the extra HTTP request (much less of an issue these days than it used to be), use modules and a bundler like Webpack or Rollup that will create a bundle combining the main module with page 1’s module for page 1 and another bundle combining the main module with page 2’s module for page 2.
But even then, the extra HTTP request may be better for your users, if you expect them to go from page1 to page2 in a reasonable timeframe. The reason is that if you have main.js and page1.js/page2.js and you allow caching of them, when the user goes to page1 they get main.js and page1.js, and then when they go to page2 main.js comes out of their local cache and they only have to load page2.js. In contrast, if you had a single bundle file for each page, they’d have to re-download all of that common code when going from page1 to page2 (or vice versa). But if you expect a visitor to visit either page1 or page2 but not the other one, you save the HTTP request by using page-specific bundles.
There’s really no one-size-fits-all solution. 🙂 There are all sorts of considerations.
Note that HTTP/1.1 made additional HTTP requests more efficient and is nearly universally supported, and HTTP/2 makes them a lot more efficient, effectively eliminating the case for reducing the number of HTTP requests as part of the page startup. All major modern browsers support HTTP/2 as do up-to-date web servers.
Put the code for each page in a function
If you really want to keep a single page, put the code that’s specific to each page in functions for those pages, and then have code in the main part of the file call the appropriate function based on location.pathname.