¿Podemos llamar a la función escrita en un JavaScript en otro archivo JS?

193

¿Podemos llamar a la función escrita en un archivo JS en otro archivo JS? ¿Alguien puede ayudarme a llamar a la función desde otro archivo JS?

javascript include Hemant Kumar
fuente

Respuestas:

213

Se podría llamar a la función como si estuviera en el mismo archivo JS siempre que el archivo que contiene la definición de la función se haya cargado antes del primer uso de la función.

Es decir

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>

La otra forma no funcionará. Como señaló correctamente Stuart Wakefield . La otra forma también funcionará.

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>

Lo que no funcionará sería:

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>

Aunque alertOnese define al llamarlo, internamente utiliza una función que aún no está definida ( alertNumber).

Edgar Hernández
fuente
¿Cuál es la diferencia entre su ejemplo al incluir el archivo JS en el archivo Index.html al otro enfoque en el que usamos el método de importación JS para importar el método desde otro archivo JS que tiene el método de script JS exportar al método de exportación?
Phil
68

La respuesta anterior tiene una suposición incorrecta de que el orden de inclusión de los archivos es importante. Como la función alertNumber no se llama hasta que se llama a la función alertOne. Siempre que ambos archivos estén incluidos en time alertOne se llama el orden de los archivos, no 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

O se puede pedir de la siguiente manera:

[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

Pero si fueras a hacer esto:

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

Solo importa que las variables y funciones estén disponibles en el momento de la ejecución. Cuando se define una función, no ejecuta ni resuelve ninguna de las variables declaradas dentro hasta que esa función se llama posteriormente.

La inclusión de diferentes archivos de script no es diferente de la secuencia de comandos en ese orden dentro del mismo archivo, con la excepción de los scripts diferidos:

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

entonces debes tener cuidado.

Stuart Wakefield
fuente
1
Del mismo modo con muy poco
Stuart Wakefield
1
Esto puede sonar irritante, pero la inclusión no es exactamente lo mismo que concatenar guiones. Considere script1: function myfunction() {y script2: alert();}no funcionará. Me molesta porque estaba tratando de modularizar un archivo js que es demasiado largo. Ver stackoverflow.com/questions/20311604/…
Boyang
¿Compartirá esta función thiscontexto, si una de las funciones está en una clase?
Aks
thisestá vinculado en el punto en que se llama la función (a menos que bindse llame de antemano). Las dos funciones en dos archivos separados no compartirán el thiscontexto automáticamente, en el ejemplo anterior tampoco tiene un thiscontexto, es decir, windowen modo no estricto o undefinedestricto. Puede hacer que la función en el otro script comparta el mismo thisvalor asignando la función como miembro del objeto (es decir, dentro del constructor this.method = myOtherFunc) o usando bind. Publique una pregunta SO con más detalle si necesita una respuesta más profunda. Saludos, Stuart
Stuart Wakefield
13

Siempre que la página web haga referencia a ambos, sí.

Simplemente llame a las funciones como si estuvieran en el mismo archivo JS.

jball
fuente
6

Si se incluyen todos los archivos, puede llamar a las propiedades de un archivo a otro (como función, variable, objeto, etc.)

Las funciones y variables js que escribe en un archivo .js, digamos que a.js estará disponible para otros archivos js, digamos b.js siempre que tanto a.js como b.js se incluyan en el archivo usando lo siguiente: mecanismo (y en el mismo orden si la función en b.js llama a la de a.js).

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

ES6: en lugar de incluir muchos archivos js usando <script>.html, puede incluir solo un archivo principal, por ejemplo, script.jsusando el atributo type="module"( soporte ) y dentro script.jspuede incluir otros archivos:

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

Y en el script.jsarchivo incluye otro archivo como ese:

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

En 'module.js' debe exportar la función / clase que importará

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

Ejemplo de trabajo aquí .

Kamil Kiełczewski
fuente
3

sí tu puedes . necesita referirse tanto JS filea la .aspxpágina

<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
fuente
0

Puede llamar a la función creada en otro archivo js desde el archivo en el que está trabajando. Entonces, para esto, primero debe agregar el archivo js externo al documento html como-

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

La función definida en el archivo javascript externo: 

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

Para llamar a esta función en su archivo actual, simplemente llame a la función como -

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

Si desea pasar los parámetros a la función, defina la función como-

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

Y llame a esta función en su archivo actual como -

$('#element').functionWithParameters('some parameter', 'another parameter');
sheetal
fuente
1
Por favor, no asumas jQuery en todas partes. Además, envolver la $.fntarea en una cláusula de documento listo no tiene sentido
Bergi
bien, lo tendré en cuenta la próxima vez :), pero ¿puedes explicar por qué la asignación de $ .fn no tiene sentido?
sheetal
No la tarea, el envoltorio.
Bergi
Bueno por lo que los medios cuando el documento no está listo, sólo entonces $ .fn se debe utilizar para la creación de la función
sheetal
¿Pero por qué? La declaración de la función no necesita esperar al DOM. Incluso si la llamada pudiera (pero a menudo no lo hace).
Bergi
0

Aquí hay un ejemplo más descriptivo con un fragmento de CodePen adjunto:

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>

salida

Salida. Botón + Resultado

Pruebe este fragmento de CodePen: enlace .

Consta Gorgan
fuente
0

Bueno, encontré otra solución dulce.

window['functioName'](params);

Digvijay
fuente
0

Para aquellos que quieran hacer esto en Node.js (ejecutar scripts en el lado del servidor), otra opción es usar requirey module.exports. Aquí hay un breve ejemplo sobre cómo crear un módulo y exportarlo para usarlo en otro lugar:

file1.js

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

exports.print = print;

file2.js

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

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