Я ищу помощь в понимании чего-то в проекте, над которым я работаю. Я написал некоторый код, который работает, хотя я не уверен, почему.

На сервере Node.js в / public / js есть два сценария. Один (file1.js) имеет функцию func(). file2.js в том же каталоге успешно вызывает func(). Там нет module.export ввода или require ввода, но оба файла работают вместе. Однако они оба указаны в файле index.ejs. Это где они могут общаться?

//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>
...

Я провел весь день, читая и не могу найти ничего по этой теме.

0
jsarbour 27 Май 2019 в 20:10

2 ответа

Лучший ответ

Ваш вопрос о том, как JavaScript работает в браузере.

Node.js здесь не актуален. Все, что он делает, это запускает программу HTTP-сервера, которая выдает статические файлы в браузер.

Когда вы загружаете скрипт в браузер, используя элемент скрипта (и не используете type="module"), любая переменная в самой внешней области видимости файла скрипта (например, которая не let внутри блока или var внутри функции) становится глобальным и таким образом доступен любому другому сценарию, загруженному в тот же HTML-документ.

Глобальные переменные беспорядочные и являются хорошим способом для различных кусков кода случайно создавать помехи друг другу, поэтому современный JavaScript обычно избегает их использования. Этот стиль программирования JavaScript не был распространен, когда JS был впервые реализован в браузерах: отсюда и поведение, описанное выше.

Вот почему люди начали использовать такие методы, как шаблон разоблачающего модуля и почему AMD и Модули узла были разработаны ранее стандартные модули JavaScript были добавлены в спецификацию.

2
Quentin 27 Май 2019 в 17:38

Вы должны понимать, как глобальное пространство ведет себя в Javascript.

Этот код:

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

Это так же, как это:

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

    func();
</script>

Поскольку, как только file1.js загружен, все, что определено внутри него, становится доступным в любом месте на этой странице, откуда оно было включено.

Поскольку file2.js использует содержимое file1.js, оно будет работать, потому что func доступно для использования в любом месте ниже file1.js включения.

1
Mosia Thabo 27 Май 2019 в 17:19