Función anónima versus función con nombre separada para inicialización en jquery

9

Digamos que tenemos un código que se usa para inicializar cosas cuando se carga una página y se ve así:

function initStuff() { ...}
...
$(document).ready(initStuff);

La función initStuff solo se llama desde la tercera línea del fragmento. Nunca más. Por lo general, la gente pone esto en una devolución de llamada anónima como esta:

$(document).ready(function() { 
    //Body of initStuff
});

Tener la función en una ubicación dedicada en el código realmente no ayuda con la legibilidad, porque con la llamada en ready () hace obvio que este es el código de inicialización.

¿Hay alguna otra razón para preferir uno sobre el otro?

Martin N.
fuente
44
El primero abarrota el espacio de nombres global. Elige el segundo.
Riwalk

Respuestas:

10

Como @ Stargazer712 mencionó, el primero desordena el espacio de nombres global, por lo que el segundo es el ganador en mi humilde opinión. Ahora, dicho esto, debido a que está utilizando una función anónima en el segundo ejemplo, la pila de llamadas de su depurador será inútil y obtendrá resultados diferentes dependiendo del depurador que use. Usualmente, con lo que termino yendo es:

$(document).ready(function MODULE_init() { 
    //Body of initStuff
});

De esa manera, el espacio de nombres global no se llena y tiene una pila de llamadas útil.

Tiendo a usar la convención anterior en todas las definiciones de funciones anónimas (bueno, ya no anónimas;)). Es una convención que encontré al navegar por el código Firefox JS.

Editar: Ahora que he dicho todo eso, Oliver saca un buen punto con las pruebas unitarias. Lo anterior está destinado a actuar como un contenedor para operaciones más complejas, no para albergar una tonelada de código no probado.

Demian Brecht
fuente
+1 Por mencionar la depuración. A menudo he visto el uso de "devoluciones de llamada con nombre" (no sé si este término realmente existe) en el código Node.js, por lo que también supongo que es una buena práctica.
Oliver Weiler
kangax.github.com/nfe Expresiones de funciones con nombre: este artículo le dice todo lo que siempre quiso saber sobre ellas.
Sean McMillan
7

Yo diría que en este caso probablemente no importe, pero si tiene funciones de devolución de llamada anónimas, llamando a otras funciones de devolución de llamada anónimas, tiendo a usar el primer enfoque, ya que hace que el código sea mucho más legible y fácil de seguir.

Con respecto a las pruebas unitarias, el primer enfoque sería mejor, ya que podría probar la initstufffunción de forma aislada.

Oliver Weiler
fuente
Por lo general, no tenemos mucho código en estas funciones de inicialización. Puede obtener algunos datos de algunos lugares y eso es todo
Martin N.
3

Iría por el primero, por legibilidad / depuración / prueba, etc. Puede evitar el problema del desorden del espacio de nombres global simplemente creando un espacio de nombres local para todas las funciones en su página. Utilizo el estilo de notación de objetos, según lo recomendado por Paul Irish (ver diapositivas 13-15 en http://paulirish.com/2009/perf/ )

var MYPAGE = {
  onReady : function(){
  // init code
  },
  someOtherCallback : function(){}
};

jQuery(document).ready(MYPAGE.onReady);
njaggars
fuente
2

También hay una tercera forma de registrar métodos de inicio sin saturar el espacio de nombres global que prefiero:

jQuery(function(){....});

Es corto y evita la búsqueda de documentos DOM como

jQuery(document).ready(function(){...}); 

hace.

Alex
fuente
+1: Creo que esta es una práctica estándar, pero para evitar problemas con definiciones conflictivas de $Prefiero:jQuery(function($) {...});
Kevin Cline