Чи можемо ми викликати функцію, записану в одному файлі JS, в іншому файлі JS? Чи може хто-небудь допомогти мені, як викликати функцію з іншого файлу JS?
Чи можемо ми викликати функцію, записану одним JavaScript у іншому файлі JS?
Відповіді:
Функцію можна викликати так, як якщо б вона була в тому ж файлі JS, доки файл, що містить визначення функції, був завантажений до першого використання функції.
Тобто
File1.js
function alertNumber(number) {
alert(number);
}File2.js
function alertOne() {
alertNumber("one");
}HTML
<head>
....
<script src="File1.js" type="text/javascript"></script>
<script src="File2.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>Інший спосіб не буде працювати.
Як правильно вказав Стюарт Уейкфілд . Інший спосіб також буде працювати.
HTML
<head>
....
<script src="File2.js" type="text/javascript"></script>
<script src="File1.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>Що не буде працювати:
HTML
<head>
....
<script src="File2.js" type="text/javascript"></script>
<script type="text/javascript">
alertOne();
</script>
<script src="File1.js" type="text/javascript"></script>
....
</head>
<body>
....
</body>Хоча alertOneвизначено під час виклику, всередині нього використовується функція, яка досі не визначена ( alertNumber).
Чим відрізняється ваш приклад, включаючи файл JS у файл Index.html до іншого підходу, коли ми використовуємо метод імпорту JS для імпорту методу з іншого файлу JS, який має метод експорту сценарію JS до методу експорту.
—
Філ
У наведеній вище відповіді є неправильне припущення, що порядок включення файлів має значення. Оскільки функція alarNumber не викликається, поки не буде викликана функція alarOne. Поки обидва файли включені тимчасовим сигналомOne називається, порядок файлів не має значення:
[HTML]
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
alertOne( );
</script>[JS]
// File1.js
function alertNumber( n ) {
alert( n );
};
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// Inline
alertOne( ); // No errorsАбо його можна замовити наступним чином:
[HTML]
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript">
alertOne( );
</script>[JS]
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// File1.js
function alertNumber( n ) {
alert( n );
};
// Inline
alertOne( ); // No errorsАле якби це зробити:
[HTML]
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
alertOne( );
</script>
<script type="text/javascript" src="file1.js"></script>[JS]
// File2.js
function alertOne( ) {
alertNumber( "one" );
};
// Inline
alertOne( ); // Error: alertNumber is not defined
// File1.js
function alertNumber( n ) {
alert( n );
};Це має значення лише для змінних та функцій, які були доступні на момент виконання. Коли визначена функція, вона не виконує і не усуває жодну зі змінних, оголошених всередині, доки ця функція не буде згодом викликана.
Включення різних файлів скриптів нічим не відрізняється від того, що сценарій знаходиться в тому порядку в одному файлі, за винятком відкладених сценаріїв:
<script type="text/javascript" src="myscript.js" defer="defer"></script>то потрібно бути обережним.
Так само і з занадто мало
—
Стюарт Уейкфілд
Це може здатися неприхотливим, але включення не точно збігається з об'єднувальними сценаріями. Розглянемо script1:
—
Боянг
function myfunction() {і script2: alert();}він не працюватиме. Мене це непокоїть, оскільки я намагався модулювати модуль js, який занадто довгий. Дивіться stackoverflow.com/questions/20311604/…
Чи поділятиме ця функція
—
акс
thisконтекст, якщо одна з функцій знаходиться в класі?
thisпов'язаний у точці, яку викликає функція (якщо bindвона не називається заздалегідь). Дві функції у двох окремих файлах не будуть thisавтоматично розподіляти контекст, у наведеному вище прикладі немає thisконтексту, тобто windowв не строгому або undefinedстрогому режимі. Ви можете змусити функцію в іншому скрипті поділяти те саме thisзначення, призначивши функцію члену об'єкта (тобто в конструкторі this.method = myOtherFunc) або використовуючи прив'язку. Будь ласка, опублікуйте питання ДУ з більш детальною інформацією, якщо вам потрібна більш глибока відповідь. Cheers, Stuart
Якщо всі файли включені, ви можете викликати властивості з одного файлу в інший (наприклад, функція, змінна, об'єкт тощо)
Функції та змінні js, які ви записуєте в один .js-файл - скажімо, a.js будуть доступні для інших js-файлів - скажімо, b.js , доки і a.js, і b.js будуть включені у файл, використовуючи наступне механізм (і в тому ж порядку, якщо функція в b.js викликає функцію в a.js).
<script language="javascript" src="a.js"> and
<script language="javascript" src="b.js">ES6: Замість того щоб включати багато js-файлів за допомогою <script>.html, ви можете включити лише один основний файл, наприклад, script.jsвикористовуючи атрибут type="module"( підтримку ), а всередину script.jsви можете включати інші файли:
<script type="module" src="script.js"></script>А у script.jsфайл включити ще один такий файл:
import { hello } from './module.js';
...
// alert(hello());У 'module.js' ви повинні експортувати функцію / клас, який ви будете імпортувати
export function hello() {
return "Hello World";
}Робочий приклад тут .
так, ти можеш . Ви повинні ставитися як JS fileдо .aspxсторінки
<script language="javascript" type="text/javascript" src="JScript1.js">
</script>
<script language="javascript" type="text/javascript" src="JScript2.js">
</script>JScript1.js
function ani1() {
alert("1");
ani2();
}JScript2.js
function ani2() {
alert("2");
}Ви можете викликати функцію, створену в іншому js-файлі, з файлу, в якому ви працюєте. Отже, для цього вам потрібно додати зовнішній файл js до html-документа як-
<html>
<head>
<script type="text/javascript" src='path/to/external/js'></script>
</head>
<body>
........Функція, визначена у зовнішньому файлі javascript -
$.fn.yourFunctionName = function(){
alert('function called succesfully for - ' + $(this).html() );
}Щоб викликати цю функцію у вашому поточному файлі, просто зателефонуйте до функції як -
......
<script type="text/javascript">
$(function(){
$('#element').yourFunctionName();
});
</script>Якщо ви хочете передати параметри функції, визначте функцію як-
$.fn.functionWithParameters = function(parameter1, parameter2){
alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}І викликайте цю функцію у вашому поточному файлі як -
$('#element').functionWithParameters('some parameter', 'another parameter');
Будь ласка, не припускайте jQuery скрізь. Крім того, обгортати
—
Бергі
$.fnзавдання в документі, готовому до документа, безглуздо
гаразд, я буду мати на увазі наступного разу :), але чи можете ви пояснити, чому призначення $ .fn безглуздо?
—
sheetal
Не призначення, а обгортання.
—
Бергі
гаразд, це означає, що коли документ не готовий, лише тоді $ .fn слід використовувати для створення функції
—
sheetal
Але чому? Оголошення функції не потрібно чекати на DOM. Навіть якщо дзвінок може (але досить часто цього немає).
—
Бергі
Ось більш описовий приклад із доданим фрагментом CodePen:
1.js
function fn1() {
document.getElementById("result").innerHTML += "fn1 gets called";
}2.js
function clickedTheButton() {
fn1();
} index.html
<html>
<head>
</head>
<body>
<button onclick="clickedTheButton()">Click me</button>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
</body>
</html>вихід
Спробуйте цей фрагмент CodePen: посилання .
Для тих, хто хоче це зробити в Node.js (запуску скриптів на стороні сервера), ще одним варіантом є використання requireта module.exports. Ось короткий приклад того, як створити модуль та експортувати його для використання в інше місце:
file1.js
const print = (string) => {
console.log(string);
};
exports.print = print;file2.js
const file1 = require('./file1');
function printOne() {
file1.print("one");
};