Czy możemy wywołać funkcję napisaną w jednym JavaScript w innym pliku JS?

193

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?

javascript include

— Hemant Kumar
źródło

213

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ż alertOnejest definiowany podczas jego wywoływania, wewnętrznie używa funkcji, która wciąż nie jest zdefiniowana ( alertNumber).

— Edgar Hernandez
źródło

Czym różni się twój przykład od włączenia pliku JS w pliku Index.html do drugiego podejścia, w którym używamy metody importu JS do importowania metody z innego pliku JS, który ma metodę eksportu metody skryptowej JS do metody eksportu.

— Phil

68

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.

— Stuart Wakefield
źródło

1

Podobnie ze zbyt małą ilością

— Stuart Wakefield

1

Może się to wydawać dziwne, ale włączenie nie jest dokładnie tym samym, co skrypty łączące. Zastanów się: script1: 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/…

— Boyang,

Czy ta funkcja będzie współdzielić thiskontekst, jeśli jedna z funkcji należy do klasy?

— aks

thisjest związany w punkcie, w którym funkcja jest wywoływana (chyba że bindzostanie wywołana wcześniej). Dwie funkcje w dwóch osobnych plikach nie będą współużytkować thiskontekstu automatycznie, w powyższym przykładzie nie ma thiskontekstu, tj. windowW trybie nieściągalnym lub undefinedścisłym. Możesz sprawić, aby funkcja w drugim skrypcie thismiał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

— Stuart Wakefield

13

Tak długo, jak obie strony są przywoływane przez stronę internetową, tak.

Po prostu wywołujesz funkcje tak, jakby były w tym samym pliku JS.

— jball
źródło

6

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">

— Pramendra Gupta
źródło

4

ES6: Zamiast <script>dołączać wiele plików js przy użyciu .html, możesz dołączyć tylko jeden plik główny, np. script.jsUżywając atrybutu type="module"( wsparcie ), a wewnątrz script.jsmożesz dołączyć inne pliki:

<script type="module" src="script.js"></script>

I w script.jspliku 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";
}

Przykład roboczy tutaj .

— Kamil Kiełczewski
źródło

3

tak, możesz . musisz odnieść się zarówno JS filedo .aspxstrony

<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");
}

— anishMarokey
źródło

0

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');

— arkuszowy
źródło

1

Proszę nie zakładać, że jQuery jest wszędzie. Również pakowanie $.fnzadania w klauzulę gotowości do dokumentu nie ma sensu

— Bergi

okej, będę o tym pamiętać następnym razem :), ale czy możesz wyjaśnić, dlaczego przypisanie $ .fn jest bezcelowe?

— arkuszowy

Nie zadanie, opakowanie.

— Bergi,

ok, więc oznacza to, że gdy dokument nie jest gotowy, tylko do utworzenia funkcji należy użyć $ .fn

— arkusz

Ale dlaczego? Deklaracja funkcji nie musi czekać na DOM. Nawet jeśli połączenie może (ale często tak nie jest).

— Bergi

0

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 .

— Consta Gorgan
źródło

0

Cóż, natknąłem się na inne słodkie rozwiązanie.

window['functioName'](params);

— Digvijay
źródło

0

Dla tych, którzy chcą to zrobić w Node.js (uruchamianie skryptów po stronie serwera), inną opcją jest użycie requireimodule.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");
};

— ronatory
źródło