Können wir die in einem JavaScript geschriebene Funktion in einer anderen JS-Datei aufrufen?

193

Können wir die in einer JS-Datei geschriebene Funktion in einer anderen JS-Datei aufrufen? Kann mir jemand helfen, wie man die Funktion aus einer anderen JS-Datei aufruft?

javascript include

— Hemant Kumar
quelle

213

Die Funktion kann so aufgerufen werden, als ob sie sich in derselben JS-Datei befindet, solange die Datei mit der Definition der Funktion vor der ersten Verwendung der Funktion geladen wurde.

Dh

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>

~~Der andere Weg wird nicht funktionieren.~~ Wie von Stuart Wakefield richtig hervorgehoben . Der andere Weg wird auch funktionieren.

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>

Was nicht funktionieren würde, wäre:

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>

Obwohl alertOnees beim Aufruf definiert wird, verwendet es intern eine Funktion, die noch nicht definiert ist ( alertNumber).

— Edgar Hernandez
quelle

Was ist der Unterschied zwischen Ihrem Beispiel, indem Sie die JS-Datei in die Datei Index.html und den anderen Ansatz aufnehmen, bei dem wir die JS-Importmethode verwenden, um die Methode aus einer anderen JS-Datei zu importieren, bei der die JS-Skriptmethode in die Exportmethode exportiert wurde.

— Phil

68

Die obige Antwort hat eine falsche Annahme, dass die Reihenfolge der Aufnahme der Dateien von Bedeutung ist. Da die alertNumber-Funktion erst aufgerufen wird, wenn die alertOne-Funktion aufgerufen wird. Solange beide Dateien zum Zeitpunkt des Aufrufs von alertOne enthalten sind, spielt die Reihenfolge der Dateien keine Rolle:

[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

Oder es kann wie folgt bestellt werden:

[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

Aber wenn Sie dies tun würden:

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

Es ist nur wichtig, welche Variablen und Funktionen zum Zeitpunkt der Ausführung verfügbar sind. Wenn eine Funktion definiert ist, führt sie keine der darin deklarierten Variablen aus oder löst sie auf, bis diese Funktion anschließend aufgerufen wird.

Das Einfügen verschiedener Skriptdateien unterscheidet sich nicht von dem Skript in dieser Reihenfolge in derselben Datei, mit Ausnahme von verzögerten Skripten:

<script type="text/javascript" src="myscript.js" defer="defer"></script>

dann musst du vorsichtig sein.

— Stuart Wakefield
quelle

1

Ebenso mit zu wenig

— Stuart Wakefield

1

Dies klingt vielleicht nach Nitpicking, aber das Einschließen ist nicht genau das Gleiche wie das Verketten von Skripten. Betrachten Sie script1: function myfunction() {und script2: alert();}Es wird nicht funktionieren. Es stört mich, weil ich versucht habe, eine zu lange JS-Datei zu modularisieren. Siehe stackoverflow.com/questions/20311604/…

— Boyang

Wird diese Funktion den thisKontext gemeinsam nutzen, wenn sich eine der Funktionen in einer Klasse befindet?

— Aks

thiswird an dem Punkt gebunden, an dem die Funktion aufgerufen wird (es bindsei denn, sie wird zuvor aufgerufen). Die beiden Funktionen in zwei separaten Dateien teilen den thisKontext nicht automatisch, im obigen Beispiel haben sie auch keinen thisKontext, dh windowim nicht strengen oder undefinedim strengen Modus. Sie können festlegen, dass die Funktion im anderen Skript denselben thisWert aufweist, indem Sie die Funktion entweder als Mitglied des Objekts (dh innerhalb des Konstruktors this.method = myOtherFunc) zuweisen oder bind verwenden. Bitte posten Sie eine SO-Frage mit mehr Details, wenn Sie eine ausführlichere Antwort benötigen. Prost, Stuart

— Stuart Wakefield

13

Solange beide von der Webseite referenziert werden, ja.

Sie rufen die Funktionen einfach so auf, als ob sie sich in derselben JS-Datei befinden.

— jball
quelle

6

Wenn alle Dateien enthalten sind, können Sie Eigenschaften von einer Datei zur anderen aufrufen (wie Funktion, Variable, Objekt usw.).

Die js-Funktionen und -Variablen, die Sie in eine .js-Datei schreiben - sagen wir , a.js steht anderen js-Dateien zur Verfügung - sagen wir b.js , solange sowohl a.js als auch b.js mit dem folgenden Include in der Datei enthalten sind Mechanismus (und in derselben Reihenfolge, wenn die Funktion in b.js die in a.js aufruft).

<script language="javascript" src="a.js"> and 
<script language="javascript" src="b.js">

— Pramendra Gupta
quelle

4

ES6: Anstatt viele js-Dateien <script>in .html einzuschließen, können Sie nur eine Hauptdatei einschließen, z. B. script.jsAttribut type="module"( Unterstützung ), und script.jsSie können andere Dateien einschließen:

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

Und in script.jsDatei enthalten eine andere Datei wie folgt aus:

import { hello } from './module.js';
...
// alert(hello());

In 'module.js' müssen Sie die zu importierende Funktion / Klasse exportieren

export function hello() {
    return "Hello World";
}

Arbeitsbeispiel hier .

— Kamil Kiełczewski
quelle

3

Ja, du kannst . Sie müssen beide JS fileauf die .aspxSeite verweisen

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

0

Sie können die in einer anderen JS-Datei erstellte Funktion aus der Datei aufrufen, in der Sie arbeiten. Dazu müssen Sie zunächst die externe JS-Datei in das HTML-Dokument einfügen.

<html>
<head>
    <script type="text/javascript" src='path/to/external/js'></script>
</head>
<body>
........

Die in der externen Javascript-Datei definierte Funktion -

$.fn.yourFunctionName = function(){
    alert('function called succesfully for - ' + $(this).html() );
}

Um diese Funktion in Ihrer aktuellen Datei aufzurufen, rufen Sie die Funktion einfach als - auf

......
<script type="text/javascript">
    $(function(){
        $('#element').yourFunctionName();
    });
</script>

Wenn Sie die Parameter an die Funktion übergeben möchten, definieren Sie die Funktion als

$.fn.functionWithParameters = function(parameter1, parameter2){
        alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}

Rufen Sie diese Funktion in Ihrer aktuellen Datei als - auf.

$('#element').functionWithParameters('some parameter', 'another parameter');

— Blatt
quelle

1

Bitte nehmen Sie nicht überall jQuery an. Außerdem $.fnist es sinnlos , die Aufgabe in eine Dokumentbereitschaftsklausel zu

— packen

Okay, ich werde es mir beim nächsten Mal merken :), aber kannst du erklären, warum die Zuweisung von $ .fn sinnlos ist?

— Blatt

Nicht die Aufgabe, die Verpackung.

— Bergi

Okay, das heißt, wenn das Dokument noch nicht fertig ist, sollte nur dann $ .fn zum Erstellen der Funktion verwendet werden

— Blatt

Aber wieso? Die Deklaration, die die Funktion nicht auf das DOM warten muss. Auch wenn der Anruf könnte (aber oft genug nicht).

— Bergi

0

Hier ist ein aussagekräftigeres Beispiel mit einem angehängten CodePen-Snippet:

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>

Ausgabe

Versuchen Sie dieses CodePen-Snippet: Link .

— Consta Gorgan
quelle

0

Nun, ich bin auf eine andere süße Lösung gestoßen.

window['functioName'](params);

— Digvijay
quelle

0

Für diejenigen, die dies in Node.js tun möchten (Skripte auf der Serverseite ausführen), ist eine andere Option, requireund zu verwenden module.exports. Hier ist ein kurzes Beispiel, wie Sie ein Modul erstellen und zur Verwendung an anderer Stelle exportieren:

file1.js

const print = (string) => {
    console.log(string);
};

exports.print = print;

file2.js

const file1 = require('./file1');

function printOne() {
    file1.print("one");
};

— ronatory
quelle