Как подключить файл js к js

Обновлено: 01.07.2024

Вот сюда пытаюсь подключить:
App.js

Добавлено через 19 минут
Пробую через классовую компоненту, ничего не получается:

Добавлено через 19 минут
Решил поступить следующим образом:

Создал файл с отдельной классовой компонентой:

Затем импортировал ее:

У меня вопрос: я могу как-то подключить эти свойства в отдельном файле:

Свойства подключаются так:

Добавление данных в app.xaml.cs
В многих книжках читал о создании данных статичных в app.xaml.cs я добавил в свой private.

Добавление внешнего ключа
Здравствуйте, форумчане! Пытаюсь в MySQL добавить внешний ключ. Вот база -- -- Структура.

Добавление внешнего ключа
Всем Привет! можете помочь с одной штукой! как добавить внешний ключ в таблицу по нажатию Button?

Добавление внешнего Отчета в 8.3
На основании типового отчета ОСВ , создаю внешний отчет. пытаюсь открыть возникает ошибка: .

У меня вопрос: я могу как-то подключить эти свойства в отдельном файле: export const p_align = 'center'; /import from './. '
аналогично для всех остальных функций/переменных в в файлах проекта
Никак не могу подключить внешний файл test.js к проекту. Как это можно сделать? Не понятна цель таких манипуляций, нужно подгружать скрипт как-то динамически? Ovederax, здравствуйте! Спасибо за ваш ответ. Речь шла о подключении скрипта с помощью import (так обычно подгружаются компоненты в ReactJS). Я уже во всем разобрался. Спасибо, что уделили внимание.

Добавление внешнего ключа
Я заполняю основную таблицу данными, как мне добавить в нее внешние ключи? SqlCommand command7 =.

Добавление и сохранение текста в приложение (Win Form App)
Добрый день! Подскажите мне пожалуйста. Есть форма, есть ссылка на интернет-страницу. Любую.

Добавление записей в поле внешнего ключа
есть таблица сделка CREATE TABLE sdelka_1 ( id_klient INT(10) NOT NULL, kol INT(10) NOT NULL.


Программное изменение файла App.config
Не могу ничего поменять в файле App.config программно ни вот это: Configuration config =.

есть ли что-то в JavaScript, как @import в CSS, который позволяет включить файл JavaScript внутри другого файла JavaScript?

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

но с 2015 года (ES6) JavaScript имеет модули ES6 стандарт для импорта модулей в узел.js, который также поддерживается большинство современных браузеров.

для совместимости со старыми браузерами, построить и/или transpilation инструменты могут быть используемый.

в ECMAScript модулей (ЕС6) были поддержаны в узел.js с v8.5, с --experimental-modules флаг. Все вовлеченные файлы должны иметь

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

Вы можете записать свои файлы JavaScript в" модули", а затем ссылаться на них как на зависимости в других сценариях. Или вы можете использовать RequireJS как простое решение "go get this script".

определить зависимости как модули:

некоторых-зависимость.js

реализация.js ваш" основной " файл JavaScript, который зависит от некоторых-зависимость.js

RequireJS загружает простые файлы JavaScript, а также более определенные модули. Он оптимизирован для использования в браузере, в том числе в Интернете Рабочий, но его можно использовать в других JavaScript окружающая среда, как Носорог и узел. Он реализует асинхронный модуль API.

RequireJS использует простые теги скриптов для загрузки модулей / файлов, поэтому он должен позвольте для легкой отладки. Его можно использовать просто для загрузки существующего Файлы JavaScript, так что вы можете добавить его в существующий проект без необходимость переписывать файлы JavaScript.

.

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

вам нужно использовать jQuery.append() на <head> элемент вашей страницы, то есть:

однако этот метод также имеет проблему: если ошибка происходит в импортированном файле JavaScript, Палий (а также Консоль ошибок Firefox и Инструменты Разработчика Chrome также) сообщит о своем месте неправильно, что является большой проблемой, если вы используете Firebug для отслеживания ошибок JavaScript (я делаю). Firebug просто не знает о недавно загруженном файле по какой-то причине, поэтому, если в этом файле возникает ошибка, она сообщает, что она произошла в вашем main HTML-код файл, и у вас будут проблемы с выяснением реальной причины ошибки.

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

я на самом деле написал плагин jQuery под названием $.import_js(), который использует этот метод:

поэтому все, что вам нужно сделать для импорта JavaScript, это:

я сделал простой тест для этого в пример.

он включает в себя в основном HTML и скрипт main.js использует $.import_js() для импорта дополнительного файла с именем included.js , которым определяет эту функцию:

и сразу после включения included.js на hello() функция вызывается, и вы получаете предупреждение.

(этот ответ является ответом на комментарий e-satis).

другой способ, который, на мой взгляд, намного чище, - сделать синхронный запрос Ajax вместо использования <script> - тег. Что тоже как узел.js ручки включает.

вот пример использования jQuery:

затем вы можете использовать его в своем коде, как вы обычно используете include:

и иметь возможность вызвать функцию из требуемого скрипта в следующей строке:

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

вы просто должны написать import cond from 'cond.js'; для загрузки макроса с именем cond из файла cond.js .

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

можно динамически генерировать тег JavaScript и добавлять его в HTML-документ из другого кода JavaScript. Это загрузит целевой файл JavaScript.

возможно, вы можете использовать эту функцию, которую я нашел на этой странице Как включить файл JavaScript в файл JavaScript?:

здесь синхронно версия без jQuery:

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

Я только что написал этот код JavaScript (используя прототип на дом манипуляции):

вот обобщенная версия того, как Facebook делает это для их вездесущей кнопки Like:

если он работает для Facebook, он будет работать для вас.

если вы хотите в чистом JavaScript, вы можете использовать document.write .

если вы используете библиотеку jQuery, вы можете использовать $.getScript метод.

большинство решений, показанных здесь, подразумевают динамическую нагрузку. Вместо этого я искал компилятор, который собирает все зависящие файлы в один выходной файл. То же самое, что меньше/Сасс препроцессоры имеют дело с CSS @import at-rule. Поскольку я не нашел ничего достойного такого рода, я написал простой инструмент для решения вопроса.

в ветви jQuery master они просто объединяют атомарные исходные файлы в один, начиная с intro.js и заканчивая outtro.js . Это меня не устраивает, поскольку это не обеспечивает гибкости в дизайне исходного кода. Проверьте, как это работает с jsic:

src / форма / вход / тел.js

теперь мы можем запустить компилятор:

и получить объединенный файл

вы также можете собрать свой скрипт PHP:

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

глобальные.js

file1.js

file2.js

main.js

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

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

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

В случае, если вы используете Веб-Работников и хотите включить дополнительные скрипты в область рабочего, другие ответы, предоставленные о добавлении скриптов в head бирка, etc. не будет работать на вас.

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

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

у меня была простая проблема, но я был озадачен ответами на этот вопрос.

мне пришлось использовать переменную (myVar1), определенную в одном файле JavaScript (myvariables.js) в другом файле JavaScript (main.в JS).

для этого я сделал, как показано ниже:

загрузил код JavaScript в HTML-файл, в правильном порядке, myvariables.сначала js, затем main.js:

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

Это спасло мой день. Надеюсь, это поможет.

на @import синтаксис для достижения CSS-подобного импорта JavaScript возможен с помощью такого инструмента, как смесь через их специальный .mix тип файла (см. здесь). Я предполагаю, что приложение просто использует один из вышеупомянутых методов внутри, хотя я не знаю.

из документации по смеси на .mix файлы:

Mix файлы просто .js or .css файлы С.смесь. в имени файла. Ля файл mix просто расширяет функциональность нормального стиля или файл скрипта и позволяет импортировать и комбинировать.

вот пример .mix файл, который объединяет несколько .js файл:

смесь выводит это как scripts-global.js , а также как уменьшенная версия ( scripts-global.min.js ).

примечание: Я никоим образом не связан с Mixture, кроме использования его в качестве интерфейсного инструмента разработки. Я столкнулся с этим вопросом, увидев .mix файл JavaScript в действии (в одном из шаблонов смеси) и немного смущен этим ("вы можете это сделать?"Я думал про себя). Затем я понял, что это специфичный для приложения тип файла (несколько разочаровывающий, согласен). Тем не менее, подумал, что знание может быть полезно для других.

обновление: смесь теперь бесплатно (offline).

обновление: смесь теперь прекращена. старые релизы смеси еще доступно

мой обычный метод:

вот объяснение того, как код работает для тех, кто любопытен: по сути, он создает новый тег скрипта (после первого) URL-адреса. Он устанавливает его в асинхронный режим, поэтому он не блокирует остальную часть кода, но вызывает обратный вызов, когда readyState (состояние содержимое для загрузки) изменяется на "loaded".

на современном языке это было бы

этот скрипт добавит файл JavaScript в начало любого другого <script> tag:

появилась головы.js. Это очень легко иметь дело:

Как вы видите, это проще, чем требовать.js и так же удобно, как jQuery $.getScript метод. Он также имеет некоторые дополнительные функции, такие как условная загрузка, обнаружение функций и больше.

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

создать файл под названием "Плагины.js "( или расширения.js или что у вас есть). Храните файлы плагинов вместе с этим основным файлом.

Плагины.js будет иметь массив под названием "pluginNames []", который мы будем перебирать над каждым(), затем добавьте тег к головка для каждого плагина

/ / установить массив для обновления при добавлении или удалении файлов плагинов var pluginNames = ["надписи", "fittext", "butterjam" и др.]; // один тег скрипта для каждого плагина $.каждый (pluginNames, функция()< $('head').добавлять''(); >);

вручную вызовите только один файл в голове:
<script src="https://askdev.ru/q/kak-vklyuchit-fayl-javascript-v-drugoy-fayl-javascript-32/js/plugins/plugins.js"></script>

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

Я обнаружил, что более надежно просто писать теги скриптов в PHP include. Вам нужно написать его только один раз, и это такая же работа, как вызов плагина с помощью JavaScript.

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

пример:

вы можете попробовать использовать $.when для проверки массива отложенные объекты, но теперь вы делаете это в каждом файле и file2 будет считать запущенным, как только $.when выполняется не при выполнении обратного вызова, поэтому file1 все еще продолжает выполнение до загрузки file3. Это все та же проблема.

я решил идти назад, а не вперед. Спасибо document.writeln . Я знаю, что это табу, но пока оно используется правильно, это работает хорошо. Вы получаете код, который можно легко отладить, показывает в DOM правильно и может обеспечить порядок, в котором зависимости загружаются правильно.

вы можете, конечно, использовать $ ("тело").append (), но тогда вы больше не можете правильно отлаживать.

Примечание: Вы должны использовать это только во время загрузки страницы, иначе вы получите пустой экран. Другими словами,всегда размещайте это перед / вне документа.готов. Я не тестировал использование этого после загрузки страницы в событии click или что-то в этом роде, но я довольно конечно, не получится.

мне понравилась идея расширения jQuery, но, очевидно, вам это не нужно.

перед вызовом document.writeln , он проверяет, чтобы убедиться, что сценарий еще не был загружен, оценив все элементы сценария.

я предполагаю, что сценарий не полностью выполняется до его document.ready событие было выполнено. (Я знаю, используя document.ready не требуется, но многие люди используют его, и регулировать это защита.)

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

вместо этого подхода вы можете попытаться изменить jQuery readyList , но это казалось хуже решение.

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

Первое, о чём следует сказать, — зачем вообще выносить код во внешний файл? Ответ прост. Давайте представим, что у пользователя (user) есть большой script, занимающий 100 и более строк кода. Скрипт этот должен работать на каждой странице веб-сайта. Каждый раз дублировать сотни строк кода, как и само наличие в HTML-документе не HTML-кода — не самое оптимальное решение, и это ещё мягко сказано. Намного лучше вынести код JS в отдельный файл и подключить его к HTML-странице (по аналогии с файлами, отвечающими за стили). Но как же это реализовать?

На деле подключение script к основному файлу особых сложностей не вызывает. Можно воспользоваться тегом <script>, добавив к нему атрибут src (как и в случае, если речь идёт о картинках). В src-атрибуте потребуется прописать путь к подключаемому script.

Практический пример

Для примера давайте перенесём коротенькую однострочную программу во внешний файл с последующим подключением этого файла. Пусть файл называется scripts.js и имеет следующее содержимое:

Важный момент заключается в том, что теги script необходимо прописывать внутри HTML-файла. Если они будут написаны в файле .js, код Джаваскрипт работать перестанет, в результате чего всё закончится ошибкой.

Давайте теперь посмотрим, каким образом выглядит непосредственное подсоединение внешнего JS-файла:

1_1-1801-78c28c.jpg

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

2_1-1801-b52756.jpg

Какие моменты важно учитывать в процессе подключения scripts? Смотрите, в примере JS-скрипт помещён в конец HTML-документа, то есть непосредственно перед закрывающим тегом body. Какое-то время назад скрипты подключали в тегах head, то есть в начале документа. Но в настоящее время поступать таким образом не рекомендуют — лучше всего выполнять подключение именно в конце. Давайте разберёмся, почему.

Для примера подключимся теперь в начале документа, между head-тегами:

3_1-1801-e46fa6.jpg

На картинке выше видно, что кроме модального окна, ничего нет, то есть сам контент (в нашем случае — надпись «Это обычный HTML документ») отсутствует. Дело в том, что при подсоединении внешнего скрипта между тегами head, веб-браузер в первую очередь загрузит и попытается выполнить именно его. И до тех пор, пока загрузка и выполнение не завершатся, веб-браузер не покажет оставшуюся часть документа. Всё вроде бы ничего, но что будет, если файл по каким-нибудь причинам станет загружаться медленно? В результате users будут ждать загрузку этого файла, а ждать сейчас никто не любит, поэтому, скорее всего, users отдадут предпочтение другому ресурсу. Чтобы этого не случилось, сегодня рекомендуют подключать scripts в конце документа, то есть непосредственно перед </body>.

Однако бывают ситуации, когда какая-нибудь библиотека требует подключения как раз таки в начале документа. В данных обстоятельствах пригодятся атрибуты async и defer — они дают возможность веб-браузеру выполнять асинхронную загрузку скриптов (веб-браузер начнёт загружать скрипт, не останавливая отображение контента). Вот, как это работает (будем использовать атрибуты по очереди):

1-1801-e457cf.jpg

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

4_1-1801-ec1e08.jpg

Но атрибуты async и defer всё же несколько отличаются: — defer сохраняет последовательность при подключении внешних скриптов. При использовании этого атрибута первым всегда будет выполняться скрипт, подключаемый выше. Это может иметь значение, если подключаются несколько scripts, среди которых один зависит от другого. То есть разработчик получает возможность подключить основной скрипт раньше зависимого. Можно констатировать, что атрибут defer обеспечивает соблюдение порядка; — async просто обеспечивает выполнение скрипта непосредственно после того, как он загрузился. Соответственно, при наличии скриптовых зависимостей этот атрибут лучше не использовать.

Несколько слов о jQuery или как подключить JS к JS (файл .js к другому файлу .js)?

Операцию можно выполнить с помощью библиотеки jQuery. Если кто не знает, jQuery — это набор JS-функций, обеспечивающих взаимодействие между HTML и JavaScript. Всё можно реализовать с помощью простого кода:

Интересуют более профессиональные знания по JS-разработке? Их можно получить на курсах в OTUS:

Есть ли в JavaScript что-то похожее на @import в CSS, что позволяет включать файл JavaScript в другой файл JavaScript?

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

Но с 2015 года (ES6) JavaScript имеет стандарт ES6 для импорта модулей в Node.js. , что также поддерживается большинством современных браузеров.

Для совместимости со старыми браузерами создайте такие инструменты, как Webpack и накопительный пакет и / или инструменты переноса, такие как Babel.

Модули ECMAScript (ES6) поддерживаются в Node.js начиная с версии 8.5, с > флаг, и, по крайней мере, Node.js v13.8.0 без флага. Чтобы включить «ESM» (по сравнению с предыдущей системой модулей CommonJS в стиле Node.js [«CJS»]), вы либо используете "type": "module" в package.json , либо даете файлам расширение .mjs . (Аналогично, модули, написанные с помощью предыдущего модуля CJS Node.js, могут называться .cjs , если по умолчанию используется ESM.)

Используя .mjs , вы получите module.mjs :

Модули ECMAScript в браузерах

Браузеры поддерживают загрузку модулей ECMAScript напрямую (не требуются такие инструменты, как Webpack) с тех пор Safari 10.1, Chrome 61, Firefox 60 и Edge 16. Проверьте текущую поддержку по адресу caniuse. , Нет необходимости использовать расширение .mjs Node.js; браузеры полностью игнорируют расширения файлов в модулях / скриптах.

Динамический импорт в браузерах

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

Более старый стиль модуля CJS, который до сих пор широко используется в Node.js, это module.exports / > система.

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

Вы можете загрузить дополнительный скрипт с помощью вызова AJAX, а затем использовать eval для его запуска. Это самый простой способ, но он ограничен вашим доменом из-за модели безопасности песочницы JavaScript. Использование eval также открывает путь к ошибкам, взломам и проблемам безопасности.

Как и в случае динамического импорта, вы можете загрузить один или несколько сценариев с помощью вызова fetch , используя обещания для управления порядком выполнения зависимостей сценариев, используя Fetch Inject:

Библиотека jQuery обеспечивает загрузку в одну строку:

Вы можете добавить тег HTML с URL-адресом скрипта в HTML. Чтобы избежать накладных расходов jQuery, это идеальное решение.

Скрипт может даже находиться на другом сервере. Кроме того, браузер оценивает код. Тег <script> может быть вставлен в веб-страницу <head> или вставлен непосредственно перед закрывающим тегом </body> .

Вот пример того, как это может работать:

Эта функция добавит новый тег <script> в конец раздела заголовка страницы, где атрибут src установлен на URL, который присвоен функции в качестве первого параметра.

Теперь есть большая проблема, о которой вы должны знать. Это подразумевает, что вы загружаете код удаленно . Современные веб-браузеры загружают файл и продолжают выполнять ваш текущий скрипт, потому что они загружают все асинхронно для повышения производительности. (Это относится как к методу jQuery, так и к методу ручной динамической загрузки скрипта.)

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

Например: my_lovely_script.js содержит MySuperObject :

Затем вы перезагрузите страницу, нажав F5 . И это работает! Смешение .

Так что с этим делать?

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

Затем вы пишете код, который хотите использовать ПОСЛЕ того, как скрипт загружается в лямбда-функцию:

Затем вы запускаете все это:

Обратите внимание, что сценарий может выполняться после загрузки DOM или раньше, в зависимости от браузера и от того, включена ли строка script.async = false; . Существует отличная статья о загрузке Javascript в целом, в которой это обсуждается.

Как упоминалось в верхней части этого ответа, многие разработчики используют в своих проектах инструменты сборки / переноса, такие как Parcel, Webpack или Babel, что позволяет им использовать предстоящий синтаксис JavaScript, обеспечивать обратную совместимость для старых браузеров, объединять файлы, минимизировать, выполнять разбиение кода и т. д.

Другой способ, который, на мой взгляд, намного чище, - это сделать синхронный Ajax-запрос вместо использования тега <script> . Именно это и включает Node.js.

Вот пример использования jQuery:

Затем вы можете использовать его в своем коде, как если бы вы обычно использовали include:

И сможете вызвать функцию из необходимого скрипта в следующей строке:

Если вы используете веб-работников и хотите включить дополнительные сценарии в области работника, другие ответы о добавлении сценариев в тег head и т. д. не будут работать для вас.

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

В качестве альтернативы, в качестве второго наиболее высоко оцененного ответа на ваш вопрос выделяет, RequireJS также может обрабатывать включая скрипты внутри Web Worker (вероятно, вызывающего сам importScripts , но с несколькими другими полезными функциями).

У меня была простая проблема, но я был озадачен ответами на этот вопрос.

Мне пришлось использовать переменную (myVar1), определенную в одном файле JavaScript (myvariables.js) в другом файле JavaScript (main.js).

Для этого я сделал, как показано ниже:

Загрузил код JavaScript в HTML-файле, в правильном порядке, сначала myvariables.js, затем main.js:

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

Это спасло мой день. Надеюсь, это поможет.

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

Вы можете записать свои файлы JavaScript в «модули», а затем ссылаться на них как на зависимости в других скриптах. Или вы можете использовать RequireJS как простое решение «иди и получи этот скрипт».

Определите зависимости как модули:

creation.js - это ваш "основной" файл JavaScript, который зависит от some-dependency.js

Выдержка из GitHub README:

RequireJS загружает простые файлы JavaScript, а также более определенные модули. Он оптимизирован для использования в браузере, в том числе в Web Worker, но может использоваться в других средах JavaScript, таких как Rhino и Node. Он реализует API асинхронного модуля.

RequireJS использует простые теги скрипта для загрузки модулей / файлов, поэтому он должен Позвольте для легкой отладки. Может использоваться просто для загрузки существующих Файлы JavaScript, поэтому вы можете добавить его в свой существующий проект без необходимость переписать ваши файлы JavaScript.

.

Вот синхронная версия без jQuery :

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

Это должно сделать:

Существует несколько способов реализации модулей в Javascript. Вот два наиболее популярных из них:

Модули ES6

CommonJS (используется в NodeJS)

Эта система модуляции используется в NodeJS. Вы в основном добавляете свои экспорты к объекту, который называется module.exports . Затем вы можете получить доступ к этому объекту через require('modulePath') . Важно понимать, что эти модули кэшируются, поэтому, если вы require() дважды определите модуль, он вернет уже созданный модуль.

Вам просто нужно написать import cond from 'cond.js'; для загрузки макроса с именем cond из файла cond.js .

Таким образом, вам не нужно полагаться на какую-либо инфраструктуру JavaScript и не нужно явно делать Ajax вызовы.

Вот обобщенная версия того, как Facebook делает это для их вездесущей кнопки «Нравится»:

Если это работает для Facebook, это будет работать для вас.

Если вы хотите использовать чистый JavaScript, вы можете использовать document.write .

Если вы используете библиотеку jQuery, вы можете использовать метод $.getScript .

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

Global.js

File1.js

File2.js

Main.js

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

Существует также Head.js. Это очень легко иметь дело с:

Как видите, это проще, чем Require.js, и так же удобно, как метод $.getScript jQuery. Он также имеет некоторые расширенные функции, такие как условная загрузка, обнаружение функций и гораздо больше.

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

Примере:

Вы можете попытаться использовать $.when для проверки массива отложенных объектов, но теперь вы делаете это в каждом файле, и file2 будет считаться загруженным, как только будет выполнен $.when , а не при выполнении обратного вызова , так что file1 все еще продолжает выполнение до загрузки file3. Это действительно до сих пор та же проблема.

Я решил идти назад, а не вперед. Спасибо document.writeln . Я знаю, что это табу, но при правильном использовании это работает хорошо. Вы получите код, который можно легко отладить, правильно отобразить в DOM и убедиться, что зависимости загружены правильно.

Конечно, вы можете использовать $ ("body"). Append (), но тогда вы больше не сможете правильно отлаживать.

ПРИМЕЧАНИЕ. Вы должны использовать это только во время загрузки страницы, иначе вы получите пустой экран. Другими словами, всегда размещайте это перед / за пределами document.ready . Я не проверял использование этого после загрузки страницы в событии щелчка или чем-то подобном, но я почти уверен, что это потерпит неудачу.

Мне понравилась идея расширения jQuery, но, очевидно, вам не нужно.

Перед вызовом document.writeln он проверяет, что скрипт еще не загружался, оценивая все элементы скрипта.

Я предполагаю, что сценарий не выполняется полностью до тех пор, пока не будет выполнено его событие document.ready . (Я знаю, что использование document.ready не обязательно, но многие используют его, и обработка этого является гарантией.)

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

Вместо этого вы можете попытаться изменить jQuery readyList , но это выглядело как худшее решение.

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

Настройте файл с именем «plugins.js» (или extensions.js или все, что вы хотите). Храните ваши файлы плагинов вместе с этим одним основным файлом.

У plugins.js будет массив pluginNames[] , который мы будем повторять each() , затем добавьте тег <script> к голове для каждого плагина

  1. Вручную вызовите только один файл в вашей голове:
    <script src="https://question-it.com/questions/1516673/js/plugins/plugins.js"></script>

Несмотря на то, что все плагины вставляются в тег head так, как они должны, они не всегда запускаются браузером, когда вы нажимаете на страницу или обновляете.

Я обнаружил, что более надежно просто писать теги сценария в PHP include. Вы должны написать это только один раз, и это такая же работа, как вызов плагина с использованием JavaScript.

Заявление import находится в ECMAScript 6 .

Хотя эти ответы великолепны, существует простое «решение», существующее с момента загрузки скрипта, и оно охватит 99,999% случаев использования большинства людей. Просто включите сценарий, который вам нужен, прежде чем сценарий, который требует этого. Для большинства проектов не требуется много времени, чтобы определить, какие сценарии нужны и в каком порядке.

Если script2 требует script1, это действительно самый простой способ сделать что-то подобное. Я очень удивлен, что никто не поднял этот вопрос, так как это самый очевидный и самый простой ответ, который применим почти в каждом отдельном случае.

Синтаксис @import для достижения CSS-подобного импорта JavaScript возможен с помощью такого инструмента, как Mixture, через их специальный тип файла .mix (см. здесь ). Я предполагаю, что приложение просто использует один из вышеупомянутых методов, хотя я не знаю.

Из документации Mixture в файлах .mix :

Файлы микширования - это просто файлы .js или .css с .mix. в имени файла. Файл микширования просто расширяет функциональность обычного файла стиля или скрипта и позволяет импортировать и комбинировать.

Вот пример файла .mix , который объединяет несколько файлов .js в один:

Mixture выводит это как scripts-global.js , а также как уменьшенную версию ( scripts-global.min.js ).

Примечание: я никоим образом не связан с Mixture, кроме того, что использую его как интерфейсный инструмент разработки. Я столкнулся с этим вопросом, увидев в действии файл .mix JavaScript (в одном из шаблонов Mixture), и немного растерялся («Вы можете это сделать?» - подумал я про себя). Затем я понял, что это был тип файла приложения (несколько разочаровывающий, согласился). Тем не менее, полагал, что знание может быть полезным для других.

ОБНОВЛЕНИЕ : смесь теперь бесплатна (не в сети).

ОБНОВЛЕНИЕ : теперь микстура прекращена. Старые выпуски смесей по-прежнему доступны

Можно динамически генерировать тег JavaScript и добавлять его в документ HTML из другого кода JavaScript. Это загрузит целевой файл JavaScript.

Может быть, вы можете использовать эту функцию, которую я нашел на этой странице Как включить JavaScript файл в файле JavaScript? :

Вы также можете собрать свои сценарии, используя PHP:

На современном языке с проверкой, если скрипт уже загружен, это будет:

Использование (async / await):

Большинство представленных здесь решений предполагают динамическую загрузку. Вместо этого я искал компилятор, который собирает все зависимые файлы в один выходной файл. То же, что и меньше / Sass работают с правилом CSS @import . Поскольку я не нашел ничего приличного в этом роде, я написал простой инструмент для решения проблемы.

В основной ветви jQuery они просто объединяют атомарные исходные файлы в один, начиная с intro.js и заканчивая outtro.js . Это меня не устраивает, так как не обеспечивает гибкости при разработке исходного кода. Проверьте, как это работает с JSIC:

ЦСИ / Форма / вход / Tel.js

Теперь мы можем запустить компилятор:

И получите объединенный файл

Я только что написал этот код JavaScript (используя прототип для манипулирование DOM):

Мой обычный метод:

Вот объяснение того, как работает код для любопытных: по сути, он создает новый тег сценария (после первого) URL-адреса. Он устанавливает его в асинхронный режим, чтобы не блокировать остальную часть кода, а вызывает обратный вызов, когда readyState (состояние загружаемого содержимого) меняется на «загружен».

Этот скрипт добавит файл JavaScript в начало любого другого тега <script> :

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

Вам необходимо использовать jQuery.append() в элементе <head> вашей страницы, а именно:

Однако этот метод также имеет проблему: если в импортированном файле JavaScript возникает ошибка, Firebug (а также консоль ошибок Firefox и Инструменты разработчика Chrome также сообщат) его место неправильно, что является большой проблемой, если вы используете Firebug для отслеживания ошибок JavaScript (я так и делаю). Firebug по какой-то причине просто не знает о недавно загруженном файле, поэтому, если в этом файле происходит ошибка, он сообщает, что она произошла в вашем основном HTML, и вам будет трудно выяснить истинную причину ошибки.

Но если это не проблема для вас, тогда этот метод должен работать.

На самом деле я написал плагин jQuery под названием $. Import_js () , который использует этот метод:

Осваивайте профессию, начните зарабатывать, а платите через год!


Курсы Python Ак­ция! Бес­плат­но!


Станьте хакером на Python за 3 дня


Веб-вёрстка. CSS, HTML и JavaScript



Курс Bootstrap 4


Станьте веб-разработчиком с нуля

В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент <script> .

Первая программа

Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
Сценарии внедряются в HTML-документ различными стандартными способами:

  • поместить код непосредственно в атрибут события HTML-элемента;
  • поместить код между открывающим и закрывающим тегами <script> ;
  • поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

JavaScript в элементе script

Самый простой способ внедрения JavaScript в HTML-документ – использование тега <script> . Теги <script> часто помещают в элемент <head> , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги <script> используются как в элементе <head> , так и в теле веб-страниц.

Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег <script> , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе <script> .

Обратите внимание: мы указали атрибут language тега <script> , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .

JavaScript в атрибутах событий HTML-элементов

Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.

В следующем примере функция JavaScript помещается в раздел <head> HTML-документа. Вот пример HTML-элемента <button> с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.

Внешний JavaScript

Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .

Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега <script> . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:

В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами <script> и </script> .

По аналогии с элементом <img> атрибуту src элемента <script> можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:

На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».

Чтобы подключить несколько скриптов, используйте несколько тегов:

Примечание: Элемент <script> с атрибутом src не может содержать дополнительный JаvаSсriрt-код между тегами <script> и </script> , хотя внешний сценарий выполняется, встроенный код игнорируется.

Независимо от того, как JS-код включается в НТМL-документ, элементы <script> интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента <script> , затем браузер приступает ко второму элементу <script> и т. д.

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

Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов <script> и </script> .

Расположение тегов <script>

Вы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега <script> . Встретив тег <script> , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.

Если на странице используется много скриптов JavaScript, то могут возникнуть длительные задержки при загрузке, в течение которых пользователь видит пустое окно браузера. Поэтому считается хорошей практикой все ссылки нa javaScript-cцeнapии указывать после контента страницы перед закрывающим тегом <body> :

Такое расположение сценариев позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.
Для пользователей это предпочтительнее, потому что страница полностью визуализируется в браузере до обработки JavaScript-кoдa.

Отложенные и асинхронные сценарии

Как отмечалось ранее, по умолчанию файлы JavaScript-кода прерывают синтаксический анализ (парсинг) HTML-документа до тех пор, пока скрипт не будет загружен и выполнен, тем самым увеличивая промежуток времени до первой отрисовки страницы.
Возьмём пример, в котором элемент <script> расположен где-то в середине страницы:

В этом примере, пока пока браузер не загрузит и не выполнит script.js, он не покажет часть страницы под ним. Такое поведение браузера называется «синхронным» и может доставить проблемы, если мы загружаем несколько JavaScript-файлов на странице, так как это увеличивает время её отрисовки.

А что, если HTML-документ на самом деле не зависит от этих JS-файлов, а разработчик желает контролировать то, как внешние файлы загружаются и выполняются?

Кардинально решить проблему загрузки скриптов помогут атрибуты async и defer элемента <script> .

Атрибут async

Async используется для того, чтобы указать браузеру, что скрипт может быть выполнен «асинхронно».

При обнаружении тега <script async src="https://wm-school.ru/js/"> браузер не останавливает обработку HTML-документа для загрузки и выполнения скрипта, выполнение может произойти после того, как скрипт будет получен параллельно с разбором документа. Когда скрипт будет загружен – он выполнится.

Для сценариев с атрибутом async не гарантируется вы­полнение скриптов в порядке их добавления, например:

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

Примечание: Атрибут async используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария.

Атрибут defer

Атрибут defer откладывает выполнение скрипта до тех пор, пока вся HTML-страница не будет загружена полностью.

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

Несмотря на то, что в приведенном примере теги <script defer src="https://wm-school.ru/js/"> включены в элемент <head> HTML-документа, выполнение сценариев не начнется, пока браузер не дойдет до закрыва­ющего тега </html> .

Кроме того, в отличие от async , относительный порядок выполнения скриптов с атрибутом defer будет сохранён.

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

Примечание: Атрибуты async и defer поддерживаются только для внешних файлов сценариев, т.е. работают только при наличии атрибута src .

Итоги