Peut-on appeler la fonction écrite dans un JavaScript dans un autre fichier JS?

193

Peut-on appeler la fonction écrite dans un fichier JS dans un autre fichier JS? Quelqu'un peut-il m'aider à appeler la fonction à partir d'un autre fichier JS?

javascript include

— Hemant Kumar
source

213

La fonction peut être appelée comme si elle se trouvait dans le même fichier JS tant que le fichier contenant la définition de la fonction a été chargé avant la première utilisation de la fonction.

C'est à dire

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'autre façon ne fonctionnera pas.~~ Comme l'a souligné à juste titre Stuart Wakefield . L'autre façon fonctionnera également.

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>

Ce qui ne fonctionnera pas serait:

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>

Bien qu'il alertOnesoit défini lors de son appel, il utilise en interne une fonction qui n'est toujours pas définie ( alertNumber).

— Edgar Hernandez
source

Quelle est la différence entre votre exemple en incluant le fichier JS dans le fichier Index.html à l'autre approche où nous utilisons la méthode d'importation JS pour importer la méthode à partir d'un autre fichier JS qui a la méthode d'exportation de méthode de script JS vers la méthode d'exportation.

— Phil

68

La réponse ci-dessus suppose à tort que l'ordre d'inclusion des fichiers est important. Comme la fonction alertNumber n'est pas appelée tant que la fonction alertOne n'est pas appelée. Tant que les deux fichiers sont inclus dans le temps, alertOne est appelé, l'ordre des fichiers n'a pas d'importance:

[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

Ou il peut être commandé comme suit:

[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

Mais si vous deviez faire ceci:

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

Il importe uniquement que les variables et les fonctions soient disponibles au moment de l'exécution. Lorsqu'une fonction est définie, elle n'exécute ni ne résout aucune des variables déclarées à l'intérieur jusqu'à ce que cette fonction soit ensuite appelée.

L'inclusion de différents fichiers de script n'est pas différente du fait que le script se trouve dans cet ordre dans le même fichier, à l'exception des scripts différés:

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

alors vous devez être prudent.

— Stuart Wakefield
source

1

De même avec trop peu

— Stuart Wakefield

1

Cela peut sembler compliqué mais l'inclusion n'est pas exactement la même chose que la concaténation de scripts. Considérez script1: function myfunction() {et script2: alert();}cela ne fonctionnera pas. Cela me dérange car j'essayais de modulariser un fichier js trop long. Voir stackoverflow.com/questions/20311604/…

— Boyang

Cette fonction partagera-t-elle le thiscontexte si l'une des fonctions est dans une classe?

— aks

thisest lié au point où la fonction est appelée (sauf si elle bindest appelée au préalable). Les deux fonctions dans deux fichiers séparés ne partageront pas le thiscontexte automatiquement, dans l'exemple ci-dessus ni l'un ni l'autre this, c'est- windowà- dire en mode non strict ou undefineden mode strict. Vous pouvez faire en sorte que la fonction dans l'autre script partage la même thisvaleur en affectant la fonction en tant que membre de l'objet (c'est-à-dire au sein du constructeur this.method = myOtherFunc) ou en utilisant bind. Veuillez poster une question SO avec plus de détails si vous avez besoin d'une réponse plus approfondie. Cheers, Stuart

— Stuart Wakefield

13

Tant que les deux sont référencés par la page Web, oui.

Vous appelez simplement les fonctions comme si elles se trouvaient dans le même fichier JS.

— jball
source

6

Si tous les fichiers sont inclus, vous pouvez appeler les propriétés d' un fichier à un autre (comme une fonction, une variable, un objet, etc.)

Les fonctions et variables js que vous écrivez dans un fichier .js - par exemple, a.js seront disponibles pour d'autres fichiers js - dites b.js tant que a.js et b.js sont inclus dans le fichier à l'aide des éléments suivants: (et dans le même ordre si la fonction de b.js appelle celle de a.js).

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

— Pramendra Gupta
source

4

ES6: Au lieu d'inclure de nombreux fichiers js en utilisant <script>en .html, vous ne pouvez inclure qu'un seul fichier principal, par exemple en script.jsutilisant l'attribut type="module"( support ) et à l'intérieur, script.jsvous pouvez inclure d'autres fichiers:

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

Et dans le script.jsfichier, incluez un autre fichier comme celui-ci:

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

Dans 'module.js', vous devez exporter la fonction / classe que vous importerez

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

Exemple de travail ici .

— Kamil Kiełczewski
source

3

Oui, vous pouvez . vous devez vous référer à la fois JS fileà la .aspxpage

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

0

Vous pouvez appeler la fonction créée dans un autre fichier js à partir du fichier dans lequel vous travaillez. Donc pour cela, vous devez d'abord ajouter le fichier js externe dans le document html

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

La fonction définie dans le fichier javascript externe -

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

Pour appeler cette fonction dans votre fichier actuel, il suffit d'appeler la fonction comme -

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

Si vous souhaitez transmettre les paramètres à la fonction, définissez la fonction

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

Et appelez cette fonction dans votre fichier actuel comme -

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

— feuille
source

1

Veuillez ne pas supposer jQuery partout. En outre, encapsuler l' $.fnaffectation dans une clause de document prêt est inutile

— Bergi

ok je m'en souviendrai la prochaine fois :), mais pouvez-vous expliquer pourquoi l'affectation $ .fn est inutile?

— Sheetal

Pas l'affectation, l'emballage.

— Bergi

ok donc cela signifie que lorsque le document n'est pas prêt, alors seulement $ .fn doit être utilisé pour créer la fonction

— Sheetal

Mais pourquoi? La déclaration que la fonction n'a pas besoin d'attendre le DOM. Même si l'appel peut le faire (mais pas assez souvent).

— Bergi

0

Voici un exemple plus descriptif avec un extrait de CodePen attaché:

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>

production

Essayez cet extrait de code Pen: lien .

— Consta Gorgan
source

0

Eh bien, je suis tombé sur une autre solution douce.

window['functioName'](params);

— Digvijay
source

0

Pour ceux qui souhaitent le faire dans Node.js (exécution de scripts côté serveur), une autre option consiste à utiliser requireet module.exports. Voici un court exemple sur la façon de créer un module et de l'exporter pour l'utiliser ailleurs:

file1.js

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

exports.print = print;

file2.js

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

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

— ronatoire
source