Блог

Главная - JavaScript язык программирования - Как включить файл JavaScript в другой файл JavaScript ?
You are currently viewing Как включить файл JavaScript в другой файл JavaScript ?

Как включить файл JavaScript в другой файл JavaScript ?

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

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

Модули ES6: модули ECMAScript (ES6) поддерживаются в Node.js начиная с версии 8.5. В этом модуле мы определяем экспортируемые функции в одном файле и импортируем их в другом примере.
Есть два популярных способа вызова файла JavaScript из другой функции, которые перечислены ниже:

  • Методы Ajax
  • Объединение файлов

Пример методов Ajax:

  • Внешний файл JavaScript с именем “main.js”
// This alert will export in the main file
alert("Hello Geeks")
  • Главный файл: Этот файл будет импортировать вышеуказанное “main.js” файл
<!DOCTYPE html>
<html>

<head>
	<title>
		Calling JavaScript file from
		another JavaScript file
	</title>
	
	<script type="text/javascript">
		var script = document.createElement('script');
		
		script.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20190704153043/main.js";
		
		document.head.appendChild(script)
	</script>
</head>

<body>
</body>

</html>
  • Выход:

Пример объединения файлов: Здесь импортируется несколько файлов JavaScript в один файл JavaScript и вызывается этот основной файл JavaScript из функции.

  • Внешний файл JavaScript с именем “main.js”
// This alert will export in the main file
alert("Hello Geeks")
  • Внешний файл JavaScript “second.js”
// This alert will export in the main file
alert("Welcome to Geeksforgeeks")
  • Внешний файл JavaScript “master.js”
function include(file) {

var script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.defer = true;

document.getElementsByTagName('head').item(0).appendChild(script);

}

/* Include Many js files */
include('https://media.geeks.org/wp-content/uploads/20190704153043/main.js');
include('https://media.geeks.org/wp-content/uploads/20190704162640/second.js');
  • Главный файл: Этот файл будет импортировать вышеуказанное “master.js” файл
<!DOCTYPE html>
<html>

<head>
	<title>
		Calling JavaScript file from
		another JavaScript file
	</title>
	
	<script type="text/javascript"
src="https://media.geeks.org/wp-content/uploads/20190704162730/master.js">
	</script>
</head>

<body>
</body>
</html>
  • Output:main.js файл
  • import:second.js импорт файлов:
Метки: