Possiamo chiamare la funzione scritta in un JavaScript in un altro file JS?

193

Possiamo chiamare la funzione scritta in un file JS in un altro file JS? Qualcuno può aiutarmi come chiamare la funzione da un altro file JS?

javascript include

— Hemant Kumar
fonte

213

La funzione può essere chiamata come se fosse nello stesso file JS purché il file contenente la definizione della funzione sia stato caricato prima del primo utilizzo della funzione.

ie

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>

~~L'altro modo non funzionerà.~~ Come correttamente sottolineato da Stuart Wakefield . Anche l'altro modo funzionerà.

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>

Ciò che non funzionerà sarebbe:

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>

Sebbene alertOnesia definito quando lo si chiama, internamente utilizza una funzione che non è ancora definita ( alertNumber).

— Edgar Hernandez
fonte

Qual è la differenza tra il tuo esempio includendo il file JS nel file Index.html all'altro approccio in cui utilizziamo il metodo di importazione JS per importare il metodo da un altro file JS che ha l'esportazione del metodo di script JS nel metodo di esportazione.

— Phil

68

La risposta sopra ha un presupposto errato che l'ordine di inclusione dei file è importante. Poiché la funzione alertNumber non viene chiamata fino a quando non viene chiamata la funzione alertOne. Fintanto che entrambi i file sono inclusi nel tempo alertOne viene chiamato l'ordine dei file non importa:

[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

Oppure può essere ordinato come segue:

[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

Ma se dovessi farlo:

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

Importa solo le variabili e le funzioni disponibili al momento dell'esecuzione. Quando una funzione è definita, non esegue o risolve nessuna delle variabili dichiarate all'interno fino a quando quella funzione non viene successivamente chiamata.

L'inclusione di diversi file di script non è diversa dallo script in questo ordine all'interno dello stesso file, ad eccezione degli script differiti:

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

allora devi stare attento.

— Stuart Wakefield
fonte

1

Allo stesso modo con troppo poco

— Stuart Wakefield,

1

Questo potrebbe sembrare nitido ma l'inclusione non è esattamente la stessa di concatenare gli script. Prendi in considerazione script1: function myfunction() {e script2: alert();}non funzionerà. Mi preoccupa perché stavo cercando di modulare un file js troppo lungo. Vedi stackoverflow.com/questions/20311604/…

— Boyang

Questa funzione condividerà il thiscontesto, se una delle funzioni è in una classe?

— aprile

thisè associato al punto in cui viene chiamata la funzione (a meno che non bindvenga chiamata in anticipo). Le due funzioni in due file separati non condivideranno thisautomaticamente il contesto, nell'esempio precedente né hanno un thiscontesto, cioè windowin modalità non rigorosa o undefinedrigorosa. È possibile fare in modo che la funzione nell'altro script condivida lo stesso thisvalore assegnando la funzione come membro dell'oggetto (ovvero all'interno del costruttore this.method = myOtherFunc) o usando bind. Invia una domanda SO con maggiori dettagli se hai bisogno di una risposta più approfondita. Saluti, Stuart

— Stuart Wakefield,

13

Fintanto che entrambi fanno riferimento alla pagina Web, sì.

Chiamate semplicemente le funzioni come se fossero nello stesso file JS.

— jball
fonte

7

Se tutti i file sono inclusi, puoi chiamare le proprietà da un file all'altro (come funzione, variabile, oggetto ecc.)

Le funzioni e le variabili js che scrivi in un file .js - dicono che a.js saranno disponibili per altri file js - dicono b.js fintanto che sia a.js che b.js sono inclusi nel file usando i seguenti include meccanismo (e nello stesso ordine se la funzione in b.js chiama quella in a.js).

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

— Pramendra Gupta
fonte

4

ES6: Invece di includere molti file js utilizzando <script>in .html è possibile includere solo un file principale, ad esempio script.jsutilizzando l'attributo type="module"( supporto ) e all'interno script.jsè possibile includere altri file:

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

E nel script.jsfile includere un altro file del genere:

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

In "module.js" devi esportare la funzione / classe che importerai

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

Esempio di lavoro qui .

— Kamil Kiełczewski
fonte

3

si, puoi . devi fare riferimento sia JS filealla .aspxpagina

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

0

Puoi chiamare la funzione creata in un altro file js dal file in cui stai lavorando. Per questo, per prima cosa devi aggiungere il file js esterno nel documento html come-

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

La funzione definita nel file javascript esterno -

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

Per chiamare questa funzione nel file corrente, basta chiamare la funzione come -

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

Se si desidera passare i parametri alla funzione, definire la funzione come-

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

E chiama questa funzione nel tuo file corrente come -

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

— Sheetal
fonte

1

Si prega di non assumere jQuery ovunque. Inoltre, concludere l' $.fnincarico in una clausola di documento pronto è inutile

— Bergi

ok, lo terrò a mente la prossima volta :), ma puoi spiegare perché l'assegnazione $ .fn è inutile?

— foglio

Non il compito, la confezione.

— Bergi,

va bene così ciò significa che quando il documento non è pronto, solo allora $ .fn dovrebbe essere usato per creare la funzione

— foglio

Ma perché? La dichiarazione per cui la funzione non deve attendere il DOM. Anche se la chiamata potrebbe (ma abbastanza spesso non lo fa).

— Bergi,

0

Ecco un esempio più descrittivo con uno snippet CodePen allegato:

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>

produzione

Prova questo frammento di codice: link .

— Consta Gorgan
fonte

0

Bene, ho trovato un'altra soluzione dolce.

window['functioName'](params);

— Digvijay
fonte

0

Per coloro che vogliono farlo in Node.js (eseguendo script sul lato server) un'altra opzione è usare requiree module.exports. Ecco un breve esempio su come creare un modulo ed esportarlo per usarlo altrove:

file1.js

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

exports.print = print;

file2.js

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

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

— ronatory
fonte