Função anônima vs. função nomeada separada para inicialização no jquery

Digamos que tenhamos algum código usado para inicializar coisas quando uma página é carregada e se parece com isso:

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

A função initStuff é chamada apenas da terceira linha do trecho. Nunca mais. Normalmente, as pessoas colocam isso em um retorno de chamada anônimo como este:

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

Ter a função em um local dedicado no código não ajuda muito na legibilidade, porque com a chamada em ready () torna óbvio que esse é o código de inicialização.

Existem outros motivos para preferir um ao outro?

Como o @ Stargazer712 mencionou, o primeiro atravessa o espaço de nomes global, e o segundo é o vencedor do IMHO. Agora, tendo dito isso, porque você está usando uma função anônima no segundo exemplo, a pilha de chamadas do seu depurador será inútil e obterá resultados diferentes, dependendo do depurador usado. Geralmente, o que eu acabo fazendo é:

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

Dessa forma, o espaço para nome global não fica confuso e você tem uma pilha de chamadas útil.

Costumo usar a convenção acima em todas as definições de funções anônimas (bem, não mais anônimas;)). É uma convenção que eu encontrei ao navegar pelo código JS do Firefox.

Edit: Agora tendo dito tudo isso, Oliver traz um bom ponto com testes de unidade. O objetivo acima é atuar como um invólucro para operações mais complexas, não para armazenar uma tonelada de código não testado.

Eu diria que, nesse caso, provavelmente não importa, mas se você tem funções de retorno de chamada anônimas, chamando outras funções de retorno de chamada anônimas, eu costumo usar a primeira abordagem, pois torna o código muito mais legível e fácil de seguir.

Com relação ao teste de unidade, a primeira abordagem seria melhor, pois você poderia testar a initstufffunção isoladamente.

Eu iria para o primeiro, para legibilidade / depuração / teste, etc. Você pode evitar o problema de confusão de espaço de nomes global, simplesmente criando um espaço de nome local para todas as funções da sua página. Eu uso o estilo de notação de objeto, conforme recomendado por Paul Irish (consulte os slides 13 a 15 em http://paulirish.com/2009/perf/ )

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

jQuery(document).ready(MYPAGE.onReady);

Há também uma terceira maneira de registrar métodos init sem sobrecarregar o espaço para nome global que eu prefiro:

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

É curto e evita a pesquisa de documentos DOM como

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

faz.