web-dev-qa-db-fra.com

Pouvons-nous appeler la fonction écrite dans un code JavaScript dans un autre fichier JS?

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

javascriptinclude
184
Hemant Kumar

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.

Fichier1.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 correctement souligné par 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 que alertOne soit défini lors de l'appel, il utilise en interne une fonction qui n'est pas encore définie (alertNumber).

200
Edgar Hernandez

La réponse ci-dessus repose sur une hypothèse erronée selon laquelle l'ordre d'inclusion des fichiers est important. Comme la fonction alertNumber n'est pas appelée jusqu'à ce que la fonction alertOne soit appelée. Tant que les deux fichiers sont inclus dans le temps, on appelle alertOne 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 avant que cette fonction soit ensuite appelée.

L'inclusion de différents fichiers de script ne diffère pas du fait que le script soit 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 faire attention.

65
Stuart Wakefield

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.

13
jball

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

Les fonctions js et les variables que vous écrivez dans un fichier .js - disons a.js seront disponibles pour d’autres fichiers js - disons b.js tant que a.js et b.js sont inclus dans le fichier en utilisant le mécanisme d’inclusion suivant (et dans l’ordre identique si la fonction dans b.js appelle celui de a.js).

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

oui, vous pouvez . vous devez renvoyer les deux JS file à la page .aspx

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

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

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

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

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

Dans 'module.js', vous devez fonction/classe d'exportation à importer

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

Travailler exemple ici .

1
Kamil Kiełczewski

Vous pouvez appeler la fonction créée dans un autre fichier js à partir du fichier sur lequel vous travaillez. Pour cela, vous devez d’abord ajouter le fichier js externe au 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, appelez-la simplement en tant que -

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

Si vous voulez passer les paramètres à la fonction, définissez la fonction comme -

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

Et appelez cette fonction dans votre fichier actuel en tant que -

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

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>

sortie

Output. Button + Result

Essayez cet extrait de CodePen: link .

0
Consta Gorgan