Czy możemy wywołać funkcję zapisaną w jednym pliku JS w innym pliku JS? Czy ktoś może mi pomóc, jak wywołać funkcję z innego pliku JS?
Czy możemy wywołać funkcję zapisaną w jednym pliku JS w innym pliku JS? Czy ktoś może mi pomóc, jak wywołać funkcję z innego pliku JS?
Odpowiedzi:
Funkcję można wywołać tak, jakby znajdowała się w tym samym pliku JS, o ile plik zawierający definicję funkcji został załadowany przed pierwszym użyciem funkcji.
To znaczy
Plik1.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>
Drugi sposób nie zadziała.
Jak słusznie zauważył Stuart Wakefield . Drugi sposób również będzie działał.
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>
Co nie zadziała to:
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>
Chociaż alertOne
jest definiowany podczas jego wywoływania, wewnętrznie używa funkcji, która wciąż nie jest zdefiniowana ( alertNumber
).
W powyższej odpowiedzi błędnie założono, że kolejność dołączania plików ma znaczenie. Ponieważ funkcja alertNumber nie jest wywoływana, dopóki nie zostanie wywołana funkcja alertOne. Tak długo, jak oba pliki są uwzględnione przez alert czasu Jedna jest nazywana kolejność plików nie ma znaczenia:
[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
Lub można go zamówić w następujący sposób:
[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
Ale jeśli miałbyś to zrobić:
[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 );
};
Ma to znaczenie tylko wtedy, gdy zmienne i funkcje są dostępne w momencie wykonania. Kiedy funkcja jest zdefiniowana, nie wykonuje ani nie rozpoznaje żadnej z zadeklarowanych zmiennych, dopóki funkcja ta nie zostanie następnie wywołana.
Włączenie różnych plików skryptów nie różni się od skryptu w tej kolejności w tym samym pliku, z wyjątkiem skryptów odroczonych:
<script type="text/javascript" src="myscript.js" defer="defer"></script>
wtedy musisz być ostrożny.
function myfunction() {
i script2: alert();}
To nie zadziała. Martwi mnie to, ponieważ próbowałem zmodularyzować plik js, który jest zbyt długi. Zobacz stackoverflow.com/questions/20311604/…
this
kontekst, jeśli jedna z funkcji należy do klasy?
this
jest związany w punkcie, w którym funkcja jest wywoływana (chyba że bind
zostanie wywołana wcześniej). Dwie funkcje w dwóch osobnych plikach nie będą współużytkować this
kontekstu automatycznie, w powyższym przykładzie nie ma this
kontekstu, tj. window
W trybie nieściągalnym lub undefined
ścisłym. Możesz sprawić, aby funkcja w drugim skrypcie this
miała tę samą wartość, przypisując funkcję jako element obiektu (tj. W konstruktorze this.method = myOtherFunc
) lub używając powiązania. Proszę zamieścić pytanie SO bardziej szczegółowo, jeśli potrzebujesz bardziej szczegółowej odpowiedzi. Pozdrawiam, Stuart
Jeśli wszystkie pliki są uwzględnione, możesz wywoływać właściwości z jednego pliku do drugiego (np. Funkcja, zmienna, obiekt itp.)
Funkcje i zmienne js, które zapisujesz w jednym pliku .js - powiedzmy, że a.js będą dostępne dla innych plików js - powiedzmy b.js, o ile zarówno a.js, jak i b.js są zawarte w tym pliku, stosując następujące opcje : mechanizm (i w tej samej kolejności, jeśli funkcja w b.js wywołuje tę w a.js).
<script language="javascript" src="a.js"> and
<script language="javascript" src="b.js">
ES6: Zamiast <script>
dołączać wiele plików js przy użyciu .html, możesz dołączyć tylko jeden plik główny, np. script.js
Używając atrybutu type="module"
( wsparcie ), a wewnątrz script.js
możesz dołączyć inne pliki:
<script type="module" src="script.js"></script>
I w script.js
pliku dołącz inny taki plik:
import { hello } from './module.js';
...
// alert(hello());
W „module.js” musisz wyeksportować funkcję / klasę , którą zaimportujesz
export function hello() {
return "Hello World";
}
tak, możesz . musisz odnieść się zarówno JS file
do .aspx
strony
<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");
}
Możesz wywołać funkcję utworzoną w innym pliku js z pliku, w którym pracujesz. W tym celu najpierw musisz dodać zewnętrzny plik js do dokumentu HTML jako-
<html>
<head>
<script type="text/javascript" src='path/to/external/js'></script>
</head>
<body>
........
Funkcja zdefiniowana w zewnętrznym pliku javascript -
$.fn.yourFunctionName = function(){
alert('function called succesfully for - ' + $(this).html() );
}
Aby wywołać tę funkcję w bieżącym pliku, wystarczy wywołać funkcję jako -
......
<script type="text/javascript">
$(function(){
$('#element').yourFunctionName();
});
</script>
Jeśli chcesz przekazać parametry do funkcji, zdefiniuj funkcję jako
$.fn.functionWithParameters = function(parameter1, parameter2){
alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}
I wywołaj tę funkcję w bieżącym pliku jako -
$('#element').functionWithParameters('some parameter', 'another parameter');
$.fn
zadania w klauzulę gotowości do dokumentu nie ma sensu
Oto bardziej opisowy przykład z dołączonym fragmentem kodu 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>
wynik
Wypróbuj ten fragment kodu CodePen: link .
Dla tych, którzy chcą to zrobić w Node.js (uruchamianie skryptów po stronie serwera), inną opcją jest użycie require
imodule.exports
. Oto krótki przykład tworzenia modułu i eksportowania go do użycia w innym miejscu:
plik1.js
const print = (string) => {
console.log(string);
};
exports.print = print;
plik2.js
const file1 = require('./file1');
function printOne() {
file1.print("one");
};