Javascript → Как подключить javascript файл из своего js скрипта
Пример подключения скрипта http://example.com/script.js :
var script = document.createElement('script'); script.src = 'http://example.com/script.js'; document.getElementsByTagName('head')[0].appendChild(script); alert('script loaded');$.getScript('http://example.com/script.js', function()< alert('script loaded'); >);Комментарии
Классная кстати фишка! Я её теперь постоянно пользуюсь.
создаю файл где пишу
jQuery(document).ready(function ($) < $.getScript("/sites/all/themes/mytheme/js/ready.js"); >)(jQuery);Ведь все надеюсь включают объединение файлов js и css для более быстрой загрузке сайта
А когда надо внести изменения или что то добавить и посмотреть результат тут же — то уже не надо будет очишать кеш или отключать объединение — просто нажать обновить страницу и новый код уже работает!
для разработчика лучше вообще отключить агрегацию и любое кеширование
http://xandeadx.ru/blog/drupal/156
А разве на работающем сайте вы не вносите мелкие поправки, дополнения?
document.head.appendChild(script); тоже работает
Спасибо Вам огромное,хоть понятно стало)
Пример на Native javascript не совсем может оказаться рабочим. Например если в подключаемом скрипте написать функцию и попробовать непосредственно после document.getElementsByTagName(‘head’)[0].appendChild(script); её вызвать, то скорее всего Вы получите сообщение об ошибке ReferenceError: function is not defined
Естественно до алерта нужно вызвать свою функцию.
Вероятно это происходит из-за того что после добавления в заголовок страницы скрипта, подгрузка происходит асинхронно, почему неизвестно.
А если вызвать к примеру $(«head»).append($(»)); то подгружается нормально синхронно.
Как сделать вызов функции из другого файла в js?
Чтобы вызвать функцию, которая объявлена в другом файле (модуле), её нужно экспортировать, а в том файле, где мы хотим её использовать, — импортировать. После этого вызывать функцию можно так, как будто она объявлена в этом же файле.
// файл utils.js // объявляем функцию const sum = (a, b) => a + b; // экспортируем функцию export default sum; // файл index.js // импортируем функцию, нужно правильно указать путь до файла с функцией import sum from './utils.js'; // теперь можно работать с функцией const result = sum(2, 3); console.log(result); // => 5 как вызвать функцию из другого файла js
Для вызова функции из другого файла js необходимо сначала загрузить этот файл в текущий скрипт. Это можно сделать с помощью тега в html файле, где вы хотите вызвать функцию. Например, если у вас есть файл functions.js , который содержит функцию myFunction , то вам нужно добавить следующий тег в html файл:
После этого вы можете вызвать функцию myFunction в текущем скрипте. Например:
Если вы хотите вызвать функцию из другого файла js внутри модуля (ES6 и выше), вы можете использовать ключевое слово import . Например, если у вас есть файл functions.js со следующим содержимым:
export const myFunction = () => console.log('Hello world!'); >; Тогда вы можете импортировать функцию myFunction в другом файле js следующим образом:
import myFunction > from './functions.js'; myFunction(); Важно отметить, что для использования import и export вам нужно использовать модульный формат файла js (ES6 и выше), а также ваш файл js должен быть загружен в браузер с помощью тега .
Включение JavaScript файла в другой JavaScript файл
Очень часто при работе с JavaScript возникает потребность использовать код из одного файла в другом. Это особенно актуально при создании больших проектов, когда код разбивается на модули для удобства поддержки и расширения функционала. В этом случае полезно знать, как подключить один JavaScript файл к другому.
Например, есть файл main.js , в котором написана основная логика работы приложения, и файл utils.js , в котором находятся полезные функции, которые могут быть использованы в разных частях приложения. Чтобы использовать эти функции в файле main.js , его нужно подключить.
Использование тега script
Самый простой способ подключить JavaScript файл — использовать HTML тег .
Сначала подключается файл utils.js , затем — main.js . Порядок подключения важен: файлы выполняются в том порядке, в котором они подключены.
Использование модулей ES6
С приходом ES6 стандарта в JavaScript появилась возможность использовать модули. Это позволяет подключать одни файлы к другим с помощью директив import / export .
Чтобы экспортировать функцию из файла utils.js , нужно добавить перед ней ключевое слово export :
export function usefulFunction() < // some code here >
Затем в файле main.js можно импортировать эту функцию:
import < usefulFunction >from './utils.js'; // теперь можно использовать usefulFunction
Обратите внимание, что при использовании модулей ES6 порядок подключения файлов в HTML не имеет значения, так как импорты обрабатываются JavaScript перед выполнением кода.
Использование CommonJS
Если проект разрабатывается на Node.js, то для подключения файлов используется модульная система CommonJS. В этом случае файлы подключаются с помощью функции require .
В файле utils.js нужно экспортировать функцию с помощью module.exports :
function usefulFunction() < // some code here >module.exports = usefulFunction;
А в файле main.js подключить её с помощью require :
var usefulFunction = require('./utils.js'); // теперь можно использовать usefulFunction Таким образом, существует несколько способов подключить JavaScript файл к другому. Выбор подхода зависит от конкретной ситуации и используемого окружения разработки.