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

Обновлено: 05.07.2024

Мне нужно вызвать функцию во внешнем файле .js из другого файла .js, не ссылаясь на внешний файл в теге <head> .

Я знаю, что можно динамически добавить внешний файл ".js" для доступа к этому файлу, я могу сделать это так.

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

поэтому добавление полного файла динамически имеет нежелательный аффект. Кроме того, я не могу предварительно ссылаться на внешний файл в теге <head> , поскольку он должен быть динамическим. Таким образом, этот внешний файл "test/testApp_1.js" содержит функцию, которая возвращает строковую переменную.

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

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

Почему вы не можете динамически добавлять в <head> ? domready не сработает, пока не загрузятся все JS, CSS и HTML . потому что, динамически добавляя в голову, я в конечном итоге запускаю код, который здесь нежелателен. Мне нужно только одно значение переменной из этого файла, а не весь файл. Вы не можете загрузить часть файла . Вы можете загрузить его с помощью XHR, а затем eval() результата . Но вы не должны этого делать.

Вам может быть полезно иметь какой-то файл app.js , который содержит глобальные переменные/значения, которые вы хотите использовать из большого количества мест. Вы должны включить этот файл .js на каждую страницу (и, возможно, его минимизировать/объединить с другими js, если вы хотите быть умными и повысить производительность). Как правило, эти глобальные привязки должны быть привязаны к некоторому объекту, который вы создаете, например, var APPNAME = < >; с переменными/функциями на нем, которые будут использоваться из многих мест.

После этого внешний файл ".js", который вы хотите загрузить, и тот, который вы сейчас используете, могут одновременно обращаться к глобальной переменной APPNAME и всем ее атрибутам/функциям и использовать их по желанию. Это может быть лучшим подходом для того, чтобы сделать ваш javascript более модульным и разделяемым. Надеюсь, это поможет.

Возможно, с помощью Web Workers. Вы могли бы запустить свой script, который вы хотели бы ввести в виде изолированной среды, поэтому он не испортит вашу текущую страницу.

Как вы сказали, возможно, что setAppLogo будет глобальным внутри "test/testApp_1.js" , поэтому я буду полагаться на это утверждение.

При вызове вы получите результат setAppLogo в слушателе:

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

Хорошо, спасибо всем за вход, но я думаю, что то, что я пытаюсь сделать, в настоящее время не представляется возможным, то есть доступ к функции из другого файла без загрузки этого файла. Однако я нашел решение моей проблемы. Теперь я запрашиваю у своего сервера список доступных приложений, затем я использую этот список для динамического создания приложений в пользовательском интерфейсе. при выборе приложения затем я могу вызвать этот файл и функции внутри. Его немного сложнее, но его динамичность, хорошая производительность, и она работает. Еще раз спасибо за мозговой штурм!;)

Я не уверен, что это хорошая идея, но вы можете создать iframe и eval файл внутри его объекта "window", чтобы избежать большинства нежелательных побочных эффектов (при условии, что он не пытается получить доступ к его родительскому элементу). Затем вы можете получить доступ к любой функции/переменной, которую вы хотите, через объект окна iframe.

Это не гарантирует, что sript в файле не может взаимодействовать с вашим документом, но вряд ли он исходит из надежного источника.

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

Можно загрузить весь script через XHR (например, $. get in jQuery), а затем проанализировать его, возможно, используя регулярное выражение, чтобы извлечь нужную часть:

Тем не менее, следует отметить, что такой подход, скорее всего, вызовет препятствия для обслуживания. Регулярные выражения не являются лучшим инструментом для анализа кода JavaScript; пример выше, например, не будет анализировать функции с вложенными <> блоками, которые вполне могут существовать в рассматриваемом коде.

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

Отсутствует «extern» в объявлениях / определениях переменной const (только для C ++)

Для людей, прибывающих с C, может показаться неожиданным, что в C ++ глобальные переменные const имеют внутренние (или статические) связь. В C это не так, поскольку все глобальные переменные неявно extern (т.е. когда отсутствует ключевое слово static ).

correct would использовать файл заголовка и включить его в file2.cpp и file1.cpp

. В качестве альтернативы можно было бы объявить переменную const в файле file1.cpp с явным extern

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

Другой способ не будет работать. Как правильно указал Стюарт Уэйкфилд . Другой способ также будет работать.

Что не будет работать:

Поскольку, хотя alertOne определен при вызове, внутри он использует функцию, которая еще не определена ( alertNumber ).

да, вы можете. вам нужно отнести обе JS file к странице .aspx

Пока обе страницы ссылаются на веб-страницу, да.

Вы просто вызываете функции так, как будто они находятся в одном JS-файле.

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

Функции js и переменные, которые вы пишете в одном файле .js, - скажем a.js будет доступен для других js-файлов - скажем b.js , если оба a.js и b.js включены в файл, используя следующий механизм include (и в том же порядке, если функция в b.js вызывает одно в a.js).

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

. функция, определенная во внешнем файле javascript -

Чтобы вызвать эту функцию в текущем файле, просто вызовите функцию как -

Если вы хотите передать параметры к функции, затем определите функцию as -

И вызовите эту функцию в вашем текущем файле как -

В приведенном выше ответе неверное предположение о том, что порядок включения файлов имеет значение. Поскольку функция alertNumber не вызывается до тех пор, пока не вызывается функция alertOne. До тех пор, пока оба файла включены во время alertOne называется порядок файлов не имеет значения:

Или его можно упорядочить следующим образом:

Но если вы были для этого:

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

Включение разных файлов сценариев ничем не отличается от сценария, находящегося в этом порядке в одном файле, за исключением отложенных скриптов:

С первых дней существования Интернета веб-сайты разрабатывались в основном на HTML и CSS. И если JavaScript код все-таки загружался на страницу то, это обычно происходило в виде небольших фрагментов, которые обеспечивали простейшие визуальные эффекты или попытки сделать страничку более интерактивной. Поэтому программы на JavaScript чаще в объеме одного файла помещались в тег script . Разработчик мог также разбить код JavaScript на несколько скриптов (файлов), но даже при таком подходе все переменные и функции находящиеся в них будут добавлены в общую глобальную область видимости.

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

Спецификация ECMAScript 2015 представила новое средство языка JavaScript: модули. Которые позволяют использовать ключевые слова import и export , уже наверняка знакомые по другим языкам программирования. Из этого руководства вы узнаете, что такое модуль JavaScript, и как использовать инструкции import и export для правильной организации кода в соответствии с требованиями спецификации.

Модульное программирование

До появления концепции модулей в JavaScript, в случае если разработчик хотел организовать свой код как отдельные сегменты кода, он создавал несколько файлов и связывал их как отдельные сценарии. Чтобы продемонстрировать этот подход, создадим для примера следующие файлы: index.html и два файла JavaScript, functions.js и script.js .

В файл index.html будет отображаться сумма, разность, произведение и частное двух чисел, в него же в тегах script поместим ссылку на два JavaScript файла.

И так создайте файл index.html в текстовом редакторе и добавьте в него следующий код:

Этот HTML код будет отображать в h2 заголовке страницы значения переменных x и y , а также результат операций с этими переменными в следующих за ним элементах p . Значения атрибутов id для элементов устанавливаются путем манипулирования DOM , которое будет производиться в коде script.js . Этот код также будет устанавливать начальные значения переменных x и y .

Файл functions.js содержит математические функции, которые используются в первом сценарии script.js .

Откройте файл functions.js и добавьте в него следующий код:

И наконец, код в файле script.js определяет значения переменных x и y , применяет к их значениям математические функции и отображает результат:

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

Для веб-сайтов в которых используются несколько небольших скриптов это достаточно эффективный способ: просто разделить код по разным скриптам (файлам). Однако с этим подходом связаны некоторые проблемы, в том числе:

Загрязняется глобальное пространство имен. Все переменные, которые вы создали в своих сценариях: sum , difference и т.д., теперь находятся в глобальном объекте window . И если вы попытаетесь использовать другую переменную с именем sum , вызываемую в другом файле, то будет трудно разобраться, какое значение будет использоваться в текущем сценарии, поскольку все они будут использовать одну и ту же глобальную переменную window.sum . Единственный способ сделать переменную приватной private: это поместить ее в область действия некоторой функции. Однако при этом может возникнуть конфликт, например, между значением x атрибута id элемента DOM и переменной var x .
Усложняется управление зависимостями. Сценарии должны загружаться в заданном порядке следования сверху вниз, чтобы корректно обеспечить доступность всех переменных в нужное время. Сохранение сценариев в виде разных файлов создает иллюзию разделения, но по сути это то же самое, что сохранение всего Javascript кода вместе в inline теге <script> .

Прежде чем ES6 добавил собственные модули к языку JavaScript, сообщество попыталось предложить несколько решений. Первые решения были написаны на ванильном JavaScript, например, весь код записывался в объект или немедленно вызываемое функциональное выражение (IIFE), а затем помещался в один объект в глобальном пространстве имен. Это было лучшим решением, чем подход использования нескольких файлов скриптов, но по-прежнему возникали те же проблемы с наличием одного объекта в глобальное пространстве имен и это не решало проблемы эффективного разделения кода сторонних библиотек.

После этого появилось несколько других решений, реализующих модульность Javascript кода: CommonJS , синхронный подход, реализованный в Node.js, Asynchronous Module Definition (AMD), который реализовывал асинхронный подход, а также Universal Module Definition (UMD) , который задумывался как универсальный подход, поддерживающий оба предыдущих стиля разделения кода.

Появление этих решений упростило разработчикам совместное и повторное использование кода в форме пакетов, аналогов модулей, которые можно распространять и совместно использовать, например, их можно найти на npm . Несмотря на то, что было разработано много решений, ни одно из них не было непосредственно встроено в язык JavaScript, и для использования модулей в браузерах пришлось реализовать такие инструменты, как Babel , Webpack или Browserify .

Из-за множества проблем, связанных с многофайловым подходом и сложностью предложенных решений, разработчики были заинтересованы в переносе модульного подхода к программированию в язык JavaScript. По этой причине стандарт ECMAScript 2015 теперь поддерживает использование модулей JavaScript.

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

Модули (называемые также модулями ECMAScript или модулями ES) теперь доступны нативно (встроены в JavaScript), и в оставшейся части этого руководства вы узнаете, как использовать их в своем коде.

Модули в JavaScript

Ключевые слова import и export используются для работы с модулями в JavaScript:

import : применяется для чтения кода, экспортируемого из другого модуля.
export : применяется для предоставления кода другим модулям.

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

Добавим в файл следующий код:

Теперь в верхней части файла script.js , нам необходимо использовать ключевое слово import для извлечения (импорта) кода функций из модуля functions.js .

Примечание : инструкции кода с ключевым словом import всегда должны быть вверху файла перед любым другим кодом, при этом необходимо указать относительный ( ./ в нашем случае случае), либо абсолютный путь к импортируемому файлу модуля.

Добавьте следующий код в файл script.js :

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

Чтобы этот код загружался в браузере как модуль, а не как обычный скрипт, добавьте в файл index.html к тегу script атрибут type="module" . Любой код, который использует инструкции import или export должен содержать указанный атрибут при подключении соответствующего файла модуля:

Теперь вы сможете перезагрузить обновленную страницу, и ваш веб-сайт будет использовать нативный механизм модулей Javascript. Поддержка браузерами этой новой возможности достаточно высока, используйте сервис caniuse, чтобы узнать какие браузеры ее поддерживают. Обратите внимание, что если вы загружаете файл модуля путем помещения в значение атрибута src прямой ссылки на локальный файл, то столкнетесь со следующей ошибкой:

Модули отличаются от обычных скриптов несколькими существенными особенностями:

Модули ничего не добавляют в global глобальную область видимости (или в объект window ).
Модули всегда выполняются в строгом режимеstrict mode.
Загрузка одного и того же модуля дважды в один и тот же файл не будет иметь никакого эффекта, поскольку модули выполняются только один раз.
Работа с модулями требует серверной среды выполнения кода.

Модули по-прежнему широко используются при работе со сборщиками кода такими, как Webpack, для обеспечения поддержки браузерами дополнительных возможностей языка, а также доступны для использования непосредственно в браузерах.

Далее мы изучим еще несколько эффективных способов использования синтаксиса import и export .

Именованный экспорт

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

Этот код позволяет импортировать функции sum и difference по их имени, используя фигурные скобки:

Также можно использовать синтаксис псевдонимов для переименования импортируемых функций. Эта возможность позволяет избежать конфликтов имен в импортирующем файле. В следующем примере функция sum будет переименована в add , difference — в subtract .

Вызов функции add() эквивалентен вызову функции sum() .

Используя * синтаксис, вы можете импортировать содержимое всего модуля в составе одного объекта. В этом случае функции sum и difference будут доступны как методы объекта mathFunctions :

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

Теперь все экспортируемое можно успешно импортировать. Другой вид экспорта, с которым мы познакомимся в следующем разделе, известен как экспорт по умолчанию.

Экспорт по умолчанию

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

Перепишем код файла functions.js в следующем виде:

В файле script.js импортируем функцию sum по умолчанию, как это показано в коде ниже:

Использование этой конструкции кода может привести к неожиданным ошибкам, поскольку нет ограничений на то, что вы можете назначить в качестве имени идентификатора экспорта по умолчанию, и что, соответственно, будете импортировать в инструкции импорта. В следующем примере из модуля по умолчанию экспортируется функция sum , а в переменную difference в инструкции импорта будет фактически импортирована функция sum :

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

Импортировать объект book можно следующим образом:

Точно так же в следующем примере демонстрируется экспорт по умолчанию анонимной стрелочной функции:

Функция импортируется из модуля файла script.js следующим образом:

Именованный экспорт и экспорт по умолчанию можно использовать совместно друг с другом, как в модуле из примера ниже, который экспортирует два именованных значения и одно значение (функцию) по умолчанию:

Импортируются эти переменные и функция следующим образом:

Теперь в скрипте доступны как значение по умолчанию, так и именованные значения.

Вывод

Методы использования модульного подхода программирования позволяют разделять код на отдельные компоненты, что делает ваш код более пригодным для повторного использования, согласованным, а также защищает глобальное пространство имен от загрязнения. Интерфейс модуля может быть реализован в нативном JavaScript с использованием ключевых слов import и export .

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

От автора: PHP имеет гораздо больше встроенных функций для работы со строками, массивами и другими типами данных по сравнению с JavaScript. Поэтому для многих естественным является желание вызывать функции PHP из JavaScript. Однако, как вы уже догадались или узнали, это не работает должным образом.

Каждый раз, когда вы хотите посетить страницу, браузер отправляет запрос на сервер, который затем обрабатывает запрос и генерирует некоторые выходные данные, запустив код PHP. Затем полученная или сгенерированная веб-страница отправляется вам обратно. Браузер обычно ожидает, что веб-страница будет состоять из HTML, CSS и JavaScript. Любой PHP, который вы могли разместить или повторить внутри JavaScript, либо уже запущен, либо не будет работать вообще, когда веб-страница загружается в браузере.

Однако надежда еще не потеряна. В этой статье я объясню, как вы можете вызывать функции PHP из JavaScript и функции JavaScript из PHP.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Вызов функции PHP из JavaScript

Мы можем использовать AJAX для вызова функции PHP для данных, созданных внутри браузера. AJAX используется на многих веб-сайтах для обновления частей веб-страниц без полной перезагрузки страницы. Если все сделано правильно, это может значительно улучшить взаимодействие с пользователем.

Имейте в виду, что код PHP по-прежнему будет работать на самом сервере. Мы просто предоставим ему данные из нашего скрипта.

Использование jQuery AJAX для запуска кода PHP

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

Вы можете передать в функцию один или два параметра ajax(). Когда передаются два параметра, первым будет URL-адрес веб-страницы, на которую браузер отправит ваш запрос. Когда вы передаете только один параметр ajax(), URL-адрес будет указан в конфигурации.

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

Теперь давайте рассмотрим пример базового запроса AJAX, в котором мы будем передавать данные в файл PHP и вызывать функцию PHP wordwrap() внутри этого файла. Вот наша полная веб-страница:

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