I am writing a HTML page that loads two js files. The two js files both use function a(), so I guess that if I can create the third js file and throw same function a() into that file, the browser might load faster because it doesn't have to load the same function twice. So can somebody tell me if I am on the right track about this, and how to load functions from different js file?
Thank you!
Long answer - all your code shares the same global scope.
So if you define a function a at the top-level scope of a file - there is no need to include a into each. There are exception, of course.
On the contrary - including it only once and only when needed would actually benefit you, in common case - since each of the consequitive files would be smaller, and as such require shorter time to download, thus making your site "faster".
There is some reading you might benefit from:
Scope:
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions_and_function_scope
http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/
Relevant Module Pattern:
http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
Common implementation of an AMD spec:
So can somebody tell me if I am on the right track about this
You might be. If the function is absolutely enormous, it might improve performance (in terms of not having to download the function twice; the effect on execution time is negligible), but there are better reasons to split it out into a separate file:
As for loading it in browser JavaScript, just add another <script> element for it:
<script src="a.js"></script> <!-- Contains a() -->
<script src="b.js"></script> <!-- Uses a() -->
<script src="c.js"></script> <!-- Also uses a() -->
To accomplish what you are looking for, move function a() into its own file (3) and remove it from files 1 & 2. Then when referencing your javascript files inside your HTML, include this 3rd file first.
One caveat is that you want to make sure function a() is the exact same.
For optimal performance, you want to combine all of your JS into one file and then minify. A good place to start is using Chrome's Page Speed (F12 > Page Speed tab)
How to X?isn't yes or no. Perhaps you mean "don't do that"?function f(){...}defined (globally) in two different files) are redefined for all files -- this often leads to unintended behavior, i.e. bugs; (3) if code is to be reused or play well with other code, use custom objects and/or anonymous functions to avoid polluting the global name space.