Javascript best practice use

Question

I'm looking for the best practice use of external private Javascript file. I have a project with many different HTML files. My question is what is the best practice, is it to have 1 .js file for all HTML pages or should I have a seprate .js file for each HTML? I still nor clear if it is feasible at all the have 1 .js file for many different HTML pages, how can I use DOM capabilities?

How much web development experience do you have? I'm trying to figure out if this is a very beginner question or a more advanced production optimization question. — Roope, Aug 04 '15 at 19:15
Okay, then this is also not really a best practice question. Anyway, what have you tried, do you have code? And what are you trying to accomplish? In any case, you can just use the same JS file for all HTML pages, and the JS will just get the HTML document to work with that was opened. For what you need to know, there's no such thing as having multiple HTML documents simultaneously so that you would need to choose or something. — Roope, Aug 04 '15 at 19:26
I'm voting to close this question as it is primarily option-based. — JAL, Aug 04 '15 at 19:43

score 3 · Answer 1 · answered Aug 04 '15 at 19:07

3

This is a rather broad question and it really depends on how you structure your project.

This day and age, my general advice would be: structure it in whatever way it makes it easier to work with, but when building/deploying/whatever merge all the files together and minimize the result.

This results in easy development for you and maximum performance for the end user. Also, don't forget about proper caching headers and a timestamp in the URL for that JS file.

This advice actually applies to CSS files as well.

answered Aug 04 '15 at 19:07

Vilx-

104,512
87
279
422

maybe grunt or gulp helping in this process? – ncubica Aug 04 '15 at 19:10
@HGorodesky Vilx is correct... without talking specifics, you should organize your external js files anyway which makes managing it easy for you in development, when you finish and move to a production environment then merge all the files into a single one and minify it. – Jordan Davis Aug 04 '15 at 19:11
Thanks Vilx. For CSS I do use 1 file for the whole project. I wonder how can I refer to a specific HTML page within one .js file common to all HTML files? – H. Gorodesky Aug 04 '15 at 19:12
1

While I completely agree with this, somehow I have a feeling that the OP is not asking about this level of abstraction or concepts, but it rather sounds that he (/she) is asking about it in a more practical sense. In other words, it sounds like he is confused about how to even use the same js for multiple html documents, from a beginner perspective. I might be wrong, though. – Roope Aug 04 '15 at 19:12
Roope is absolutely correct – H. Gorodesky Aug 04 '15 at 19:21

score 2 · Answer 2 · answered Aug 04 '15 at 19:29

I agree with @Vilx-'s answer, but I suspect the question is a little more basic than that.

On each HTML page, you can simply link to a script containing site-wide functions and variables, and perhaps also a script unique to that page. For example, if you had special functionality on an About Me page, you could link to it like:

<!-- Global functions and variables -->
<script type="text/javascript" src="/scripts/global.js"></script>

<!-- Functions and variables that only apply to this page -->
<script type="text/javascript" src="/scripts/about-me.js"></script>

That way, you still have your utility functions in global.js, but you control the specific page using about-me.js.

Another way you could do this is by storing all of your JavaScript in a single file, but executing relevant functions inline on the corresponding page.

Main.js

function homepage(){
    // do things specific to the homepage
}

function aboutMe(){
    // do things specific to about me
}

function contactUs(){
    // do things specific to the contact page
}

About-Me.html

<!-- Global functions and variables -->
<script type="text/javascript" src="/scripts/main.js"></script>
<script>
    // Execute the relevant function defined in main.js
    aboutMe();
</script>

The best way is really what fits your application. If it's a large, complex application then you'll want to have separate files, but you'll probably want to concatenate them before publishing the project. If it's a small personal project, then there's no harm in simply structuring your project the way you see fit.

Javascript best practice use

2 Answers2