Llamada a una función js

[Stelair]

Hola Ulises,

¿como puedo hacer llamadas a funciones situadas en diferentes archivos js? ¿Existe algo sencillo?

[UlisesGascon]

Hola @Stelair

En principio no debes de tener problemas siempre que utilices como vehículo común el ámbito global.

Un ejemplo:

• index.html

  • Importante: Siempre debemos respetar el orden de carga, no podemos hacer llamadas a partes del código que aun no están presentes. Por eso llamamos antes a las librerías (archivo1, archivo2, archivo3) y luego a mi script (app)

  <!-- ... -->
  <!-- Librerías y dependéncias -->
  <script src="archivo1.js"></script>
  <script src="archivo2.js"></script>
  <script src="archivo3.js"></script>
  <!-- Mi código -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- ... -->

  • Nota: Si tienes dependencias cruzadas entre los archivos seguramente necesites alguna solución que gestione todas las dependencias correctamente como Require.js

• archivo1.js

  • Importante: tal y como esta declarada la función archivo1 no tenemos problema para acceder desde cualquier parte de nuestro código ya que esta en un ámbito global.

  function archivo1 (){
    console.info("Hola! desde el archivo1.js");
  };

• archivo2.js

  • Importante: tal y como esta declarada la función archivo2 dentro de una función anónima que a pesar de ser autoejecutada jamas estará disponible en el ámbito global. Luego nunca podremos llamar a la función archivo2.

  (function () {
    function archivo2 (){
         console.info("Hola! desde el archivo2.js");
    };
  }());

  • Nota: En este ejemplo el objetivo es no poder acceder pero sería incorrecto declarar una función a la que jamas podrás acceder o será ejecutada.

• archivo3.js

  • Importante: Vamos a utilizar un namespace para poder extender un mismo objeto literal y sus métodos por varios archivos.

  // Namespace (extendiendo o creando)
  var miObjetoMaestro = miObjetoMaestro || {}
  
  miObjetoMaestro.archivo3 = function(){
     console.info("Hola! desde el archivo3.js");
  }
  

• app.js

  archivo1();
  miObjetoMaestro.archivo3();

Lo normal es trabajar como en el ejemplo de archivo1.js, pero existen más opciones para trabajar con JavaScript como es el caso de usar Namespaces y funciones anónimas autoejecutas.

Un abrazo!