30 - Funciones anónimas en nuestro código.

Si visitamos sitios sobre jQuery podremos comprobar que la sintaxis empleada es mucho más compacta que todos los ejemplos que venimos viendo. El objetivo de este tutorial es aprender jQuery de una forma sencilla, pero estaría inconcluso si no introducimos la forma más habitual de programar con jQuery (funciones anónimas y encadenamiento de llamadas con el objeto jQuery)

Veamos como se organiza nuestro código utilizando funciones anónimas.

Problema:Confeccionar una página que muestre dos títulos de primer nivel, al ser presionados cambiar el color de fuente, fondo y la fuente del texto.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <h1 id="titulo1">Primer título</h1>
  <h1 id="titulo2">Segundo título</h1>
  
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(function () {
  let x = $("#titulo1");
  x.click(function () {
    let x = $("#titulo1");
    x.css("color", "#ff0000");
    x.css("background-color", "#ffff00");
    x.css("font-family", "Courier");
  });
  x = $("#titulo2");
  x.click(function () {
    let x = $("#titulo2");
    x.css("color", "#ffff00");
    x.css("background-color", "#ff0000");
    x.css("font-family", "Arial");
  });
})

Como podemos observar el código a quedado mucho más compacto. Normalmente uno utiliza funciones anónimos cuando el algoritmo contenido en la función solo se requiere para dicho evento.

La sintaxis para definir una función anónima:

x.ready(function(){
......
})

Como vemos llamamos al método ready y entre paréntesis incluimos la función tal como las venimos implementando en conceptos anteriores pero sin nombre.

También es interesante ver que podemos disponer otras funciones anónimos dentro de una función anónima:

  x.click(function () {
  ......
  });


Retornar