有关从其他文件调用函数的问题-Javascript

Question

I am looking for some help understanding something on a project I am working on. I have written some code that is functioning, though I am not sure why.

In a Node.js server, in /public/js there are two scripts. One ( file1.js ) has a function func() . file2.js , in the same directory, calls func() successfully. There is no module.export ing or require ing anywhere, yet the two files work together. They are both referenced in the index.ejs file, however. Is this where they become able to communicate?

//file1.js
function func() {
    console.log("foo")
}

//file2.js

func()

//index.ejs
...
<script src="public/js/file1.js"></script>
<script src="public/js/file2.js"></script>
...

I've spent all day reading and cannot find anything on this topic.

Answer 1

Your question is about how JavaScript works in a browser.

Node.js isn't relevant here. All it is doing is running an HTTP server program that gives static files to the browser.

When you load a script into a browser using a script element (and don't use type="module" ), any variable in the outer most scope of the script file (eg which isn't let inside a block or var inside a function) becomes a global and is accessible to any other script loaded into the same HTML document that way.

Globals are messy and a good way for different bits of code to accidentally interfere with each other so modern JavaScript generally avoids using them. This style of JavaScript programming wasn't common when JS was first implemented in browsers: Hence the behaviour described above.

This is why people started to use techniques like the revealing module pattern and why AMD and Node modules were designed before standard JavaScript modules were added to the specification.

Answer 2

You must understand how the global space behaves in Javascript.

This Code:

<script src="public/js/file1.js"></script>
<script src="public/js/file2.js"></script>

Is the same as this:

<script>
    //file1.js
    function func() {
        console.log("foo");
    }

    func();
</script>

Because soon as file1.js is loaded, everything that is defined inside of it, becomes available anywhere in that page from where it was included.

Since file2.js uses contents of file1.js , it will work because func is available to be used anywhere below file1.js inclusion.