Js вызывает функцию из другого файла js

Обновлено: 03.07.2024

С помощью метода call() вы можете написать метод, который можно использовать для разных объектов.

Все функции являются методами

В JavaScript все функции являются объектными методами.

Если функция не является методом объекта JavaScript, она является функцией глобального объекта (см. предыдущую главу).

В приведенном ниже примере создается объект с тремя свойствами: firstName, lastName, fullName.

Пример

const person = <
firstName:"John",
lastName: "Doe",
fullName: function () <
return this.firstName + " " + this .Фамилия;
>
>

// Это вернет "Джон Доу":
person.fullName();

В приведенном выше примере this относится к объекту person.

this.firstName означает свойство firstName этого объекта.

this.firstName означает свойство firstName человека.

Что это?

В JavaScript ключевое слово this относится к объекту.

Какой объект зависит от того, как он вызывается (используется или вызывается).

Ключевое слово this относится к разным объектам в зависимости от того, как оно используется:

В объектном методе this относится к объекту.

Одно это относится к глобальному объекту.

В функции this относится к глобальному объекту.

В функции в строгом режиме this не определено .

В событии это относится к элементу, который получил событие.

Методы, такие как call() , apply() и bind() может ссылаться на любой объект.

См. также:

Метод JavaScript call()

Метод call() – это предопределенный метод JavaScript.

Его можно использовать для вызова (вызова) метода с объектом-владельцем в качестве аргумента (параметра).

С call() объект может использовать метод, принадлежащий другому объекту.

В этом примере вызывается метод fullName человека, использующий его для человека1:

Пример

const person = <
fullName: function() <
return this.firstName + " " + this.lastName;
>
>
const person1 = <
firstName:"John",
lastName: "Doe"
>
const person2 = <
имя: "Мэри",
фамилия: "Доу"
>

// Это вернет "Джон Доу":
person.fullName.call(person1);

В этом примере вызывается метод fullName человека, использующий его для человека2:

Я хотел вызвать функцию, определенную в файле first.js, в файле second.js. Оба файла определены в файле HTML, например:

Я хочу вызвать fn1(), определенную в first.js, во second.js. Из моих поисков ответы были такими: если first.js определен первым, это возможно, но из моих тестов я не нашел никакого способа сделать это.

Вот мой код:

Это должно сработать. Пожалуйста, отредактируйте свой вопрос, чтобы сообщить нам, что происходит, когда вы запускаете это с помощью консоли JavaScript в Chrome или Firefox/Firebug. (Гм, и проверьте правильность написания имени функции.)

Если это не сработает, я предполагаю, что вы делаете что-то не так. Учитывая информацию в вашем вопросе, это невозможно.

16 ответов 16

Функция не может быть вызвана, если она не была определена в том же файле или загружена до попытки ее вызова.

Функция не может быть вызвана, если только она не находится в той же или большей области, что и та, которая пытается ее вызвать.

Вы объявляете функцию fn1 в first.js, а затем во втором вы можете просто указать fn1();

1.js:

2.js:

Мне это тоже не подходит. Есть ли какой-либо обходной путь, кроме использования jquery getscript, поскольку это предполагает плохую практику?

Если это не работает для вас, скорее всего, вы определили функцию в чем-то другом. Например, у меня была функция в блоке $(document).ready(function() <.>), и она не работала. Я переместил его, и он сработал как шарм.

Вы можете рассмотреть возможность использования синтаксиса импорта и экспорта es6. В файле 1;

А затем в файле 2;

Обратите внимание, что это работает, только если вы используете

Это рекомендуется? Что делать, если у меня есть 1000 функций. Что я пытаюсь сделать, так это иметь один файл JavaScript для хранения всех прослушивателей событий. Но чтобы выполнить эту работу, мне пришлось бы объявить каждую функцию в глобальной области видимости, как вы предлагаете. Не замедлит ли это работу?

используйте "var" при создании функции, тогда вы сможете получить к ней доступ из другого файла. убедитесь, что оба файла хорошо связаны с вашим проектом и имеют доступ друг к другу.

доступ к этой функции/переменной из файла file_2.js

Это должно работать так:

1.js

2.js

index.html

вывод

Попробуйте этот фрагмент CodePen: ссылка .

Обратите внимание, что это работает, только если

=> неизвестная функция fn1()

Используйте кеш, если ваш сервер позволяет повысить скорость.

А затем используйте его следующим образом:

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

first.js

Второй.js

index.html

На самом деле это происходит очень поздно, но я подумал, что должен поделиться,

Пожалуйста, ознакомьтесь с комментарием OP под вопросом: «Я просто экспериментировал [с] файлом, расположенным в неправильном месте с таким же именем».

У меня была такая же проблема. У меня были определенные функции внутри функции jquery document ready.

И эту функцию xyz() я вызвал в другом файле. Это не работает :) Вы должны определить функцию выше document ready.

За это проголосовали, но это та же проблема, что и у меня. Мое решение состоит в том, чтобы вывести функцию из функции $(document).ready().

Моя идея состоит в том, чтобы два вызова JavaScript функционировали через DOM.

Способ сделать это прост. Нам просто нужно определить скрытый HTML-тег js_ipc. После того, как вызываемая сторона зарегистрирует щелчок из скрытого тега js_ipc, вызывающая сторона может отправить событие щелчка для запуска вызываемой стороны. И аргумент сохраняется в том случае, если вы хотите передать.

Когда нам нужно использовать вышеуказанный способ?

Иногда два javascript-кода очень сложно интегрировать, и в них так много асинхронного кода. И в разных кодах используются разные платформы, но вам все равно нужен простой способ их интеграции.

Значит, в таком случае сделать это непросто.

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

Везде, здесь, я пытаюсь объяснить на следующем простом случае. Я надеюсь, что этот способ поможет вам интегрировать два разных кода javascript проще, чем раньше. Нет никакой библиотеки JavaScript для поддержки связи между двумя файлами javascript, созданными разными командами.

В Node.js любой файл, состоящий из кода JavaScript в файле, оканчивающемся на .js, является модулем. Модуль может содержать определения функций, классов, объектов или переменных, на которые можно ссылаться или которые можно использовать в другом файле Javascript.

Когда ваше приложение становится больше, поддержка одного файла становится сложной задачей. легко заблудиться в кодовой базе и потерять представление о том, что делает конкретный фрагмент кода. Проблема усугубляется при отладке кода.

Чтобы облегчить поддержку, повторное использование и организацию кода, вам необходимо разделить код на несколько файлов. Этот процесс называется модуляризацией. Каждый модуль содержит функции или классы, которые обрабатывают определенные функции.

Функции в одном модуле можно импортировать и вызывать в других модулях, избавляя вас от необходимости копировать определения функций в другие файлы. Модуль можно редактировать или отлаживать отдельно, что упрощает добавление или удаление новых функций.

Создание и экспорт модуля
Импорт модуля
Экспорт нескольких функций и значений из модуля
Импорт модуля из каталога
Типы модулей

Чтобы следовать этому руководству, создайте каталог nodejs в своем домашнем каталоге или в любом другом месте.

Перейдите в каталог nodejs.

Теперь все готово, чтобы следовать руководству и практиковаться в коде.

Создание и экспорт модуля

Создание модуля

Модули создаются в Node.js путем создания файла JavaScript. Каждый раз, когда вы создаете новый файл с расширением .js, он становится модулем.

Давайте напишем наш первый модуль. Мы начнем с создания двух функций для выполнения простых вычислений.

Введите следующий код и сохраните его как lib.js в каталоге nodejs.

lib.js

Файл lib.js теперь является модулем. Две функции add() и subtract доступны только в нашем файле. Они инкапсулированы, то есть к ним нельзя получить доступ за пределами файла. если вы попытаетесь вызвать их в другом файле, вы получите ошибку.

В папке node.js. Создайте еще один файл main.js. Попробуем вызвать функцию add() в нашем файле.

main.js

Запустите файл с помощью node.js.

Вы получите сообщение об ошибке.

Экспорт модуля

Как мы узнали из предыдущего примера, по умолчанию мы не можем получить доступ к функциям, определенным в одном модуле, в другом модуле. Чтобы получить доступ к функциям модуля, мы должны экспортировать функции и импортировать их в файл, который мы хотим вызывать.

Давайте экспортируем функцию add() в файл lib.js.

Перейдите в конец файла lib.js и добавьте module.exports = .

lib.js

Сейчас в нашем файле lib.js мы добавили функцию add() к объекту module.exports. Добавление функции в module.exports сделает ее доступной в любом файле, который импортирует модуль lib.js.

Вы не ограничены экспортом функций. Вы можете экспортировать переменные, объекты, классы и т. д.

Импорт модуля в Node.js

Чтобы включить в Node.js функции, определенные в другом файле, нам нужно импортировать модуль. мы будем использовать ключевое слово require в верхней части файла.

Результат запроса затем сохраняется в переменной, которая используется для вызова функций с использованием записи через точку.

Чтобы увидеть это в действии, давайте импортируем модуль lib.js, потребовав его внутри файла main.js, и вызовем функцию add() с записью через точку.

main.js

Если мы запустим наш код сейчас, мы должны получить следующий результат:

В приведенном выше коде происходит импорт модуля lib.js.

При импорте файла lib.js важно добавить к нему префикс ./ внутри require . Это сообщает Node.js, что мы импортируем локальный модуль (модуль, созданный вами, например модуль lib.js).

При запросе модуля вы можете не указывать расширение файла, как мы сделали require('./lib'), или указать расширение файла (.js) файла, который вы хотите импортировать.

Когда require импортирует модуль, он возвращает объект с помощью add() в качестве метода и сохраняет его в переменной lib.

Объект, возвращаемый функцией require, представляет собой объект module.exports из модуля lib.js, где мы экспортировали только один метод add() .

Поскольку объект — это то, что возвращается функцией require , для доступа к функции add() мы использовали точечную нотацию, добавив префикс к имени объекта (lib), чтобы вызвать функцию add(4, 4) и затем сохранить результат в переменной результата.

Экспорт нескольких функций и значений

Есть несколько способов экспортировать несколько функций и значений с помощью module.exports .

lib.js

В файл main.js вы можете импортировать их следующим образом:

Вы также можете использовать синтаксис деструктурирования, чтобы распаковать свойства объекта, возвращаемые require, и сохранить их в переменных.

Еще один способ экспортировать несколько функций — определить функции внутри объекта module.exports.

lib.js

Вы также можете определить каждую функцию независимо как метод module.exports .

lib.js

Импорт модуля из каталога

Внутри каталога проекта создайте каталог maths и переместите в него файл lib.js.

Чтобы импортировать файл lib.js в каталог, укажите lib.js, добавив к нему префикс с именем каталога.

Типы модулей в Node.js

Локальные модули
Основные модули
Сторонние модули.

Локальные модули

Это модули, которые вы можете создать самостоятельно и использовать в своем приложении. Хорошим примером локального модуля является модуль lib.js, который мы создали и импортировали в файл main.js в этом руководстве.

импорт локальных модулей

Подводя итог, чтобы импортировать локальный модуль, вам нужно require('./filename') или require('./filename.js') или require('./path/filename.js') .

Вам не нужно добавлять расширение «.js», Node.js может загрузить ваш локальный модуль и без него, как мы узнали.

Основные модули

Эти модули входят в состав Node.js по умолчанию. Вам не нужно загружать их в свой проект.

Некоторыми из самых популярных и часто используемых основных модулей являются fs , os , path и т. д.

Импорт основных модулей

Чтобы импортировать основной модуль, вы должны использовать метод require() с именем основного модуля, переданным в качестве аргумента.

Сторонние модули

Сторонние модули — это модули, загружаемые с помощью диспетчера пакетов, например npm. Эти модули обычно хранятся в папке node_modules.

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

Примерами сторонних модулей являются express , mongoose , react и т. д.

Импорт сторонних модулей

Чтобы импортировать сторонний модуль, необходимо использовать метод require(), который принимает имя стороннего модуля в качестве аргумента.

Заключение

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

Если у вас есть идеи или предложения, не стесняйтесь оставлять комментарии.

Категории: узел

Обновлено: 26 марта 2020 г.

Вам также может понравиться

Обзор 2021 года и планы на 2022 год

Цель состоит в том, чтобы отслеживать мои цели, достижения и неудачи, чтобы в будущем я мог видеть, как далеко я продвинулся.

Обзор 2020 года

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

Асинхронное программирование с обратными вызовами в JavaScript

В этой статье вы узнаете о синхронном и асинхронном программировании в JavaScript. После этого вы узнаете значение обратного вызова.

Понимание цепочки методов в JavaScript

Введение Цепочка методов — это метод, который включает вызов нескольких методов для одного и того же объекта в последовательности, подобной цепочке. Это стало возможным благодаря retu.

Я хотел вызвать функцию, определенную в файле first.js, в файле second.js. оба файла определены в файле HTML, например:

Я хочу вызвать fn1(), определенную в first.js, во second.js. Из моих ответов на поиски было, если first.js определен первым, это возможно, но из моих тестов я не нашел никакого способа сделать это.

Вот мой код:

Этот вопрос помечен javascript html

~ Вопрос задан 21 сентября 2014 г., 19:19:56

16 ответов

Функция не может быть вызвана, если она не была определена в том же файле или загружена до попытки ее вызова.

Вы объявляете функцию fn1 в first.js, а затем во втором вы можете просто указать fn1();

1.js:

2.js:

~ Отвечено 2014-09-21 19:26:43

Надеюсь, это поможет. Удачного кодирования.

~ Отвечено 2015-01-19 06:57:04

Вы можете сделать функцию глобальной переменной в first.js и посмотреть на замыкание, а не помещать его в документ. Готово поместить его снаружи

вы также можете использовать ajax

так же, как вы можете использовать jquery getScript

~ Отвечено 2014-09-21 19:22:23

Вы можете рассмотреть возможность использования синтаксиса импорта и экспорта es6. В файле 1;

А затем в файле 2;

Обратите внимание, что это работает, только если вы используете

Это должно работать так:

1.js

2.js

index.html

вывод

Попробуйте этот фрагмент CodePen: ссылка .

Обратите внимание, что это работает, только если

=> неизвестная функция fn1()

объявить функцию в глобальной области видимости с помощью окна

включить вот так

~ Ответ дан 2019-10-06 13:48:22

Используйте кеш, если ваш сервер позволяет повысить скорость.

А затем используйте его следующим образом:

~ Отвечено 2016-11-02 14:46:28

first.js

Второй.js

index.html

~ Отвечено 23.10.2017 02:31:08

На самом деле это происходит очень поздно, но я подумал, что должен поделиться,

~ Отвечено 28.09.2019 22:18:02

доступ к этой функции/переменной из файла file_2.js

надеюсь, это кому-нибудь поможет, удачного кодирования.

~ Отвечено 2020-05-11 21:48:51

Этот код должен работать. Если это не так, проверьте исходники в отладчике (нажмите F12 или Ctrl+Shift+I в Google Chrome). Если вы не можете найти там функцию fn1(), нажмите Ctrl+F5, чтобы полностью перезагрузить сайт (Ctrl+R или F5 недостаточно). После перезагрузки страницы все должно заработать.

~ Отвечено 2020-12-14 12:47:23

Моя идея состоит в том, чтобы два вызова JavaScript функционировали через DOM.

Способ сделать это прост.Нам просто нужно определить скрытый HTML-тег js_ipc. После того, как вызываемая сторона зарегистрирует щелчок из скрытого тега js_ipc, вызывающая сторона может отправить событие щелчка для запуска вызываемой стороны. И аргумент сохраняется в том случае, если вы хотите передать.

Когда нам нужно использовать вышеуказанный способ?

Значит, в таком случае сделать это непросто.

Читайте также: