Funkcja anonimowa vs. oddzielna funkcja nazwana do inicjalizacji w jquery

9

Załóżmy, że mamy kod, który jest używany do inicjalizacji rzeczy po załadowaniu strony i wygląda następująco:

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

Funkcja initStuff jest wywoływana tylko z trzeciego wiersza fragmentu kodu. Nigdy więcej. Zwykle ludzie umieszczają to w anonimowym wywołaniu zwrotnym:

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

Posiadanie funkcji w dedykowanym miejscu w kodzie tak naprawdę nie pomaga w czytelności, ponieważ wywołanie ready () pokazuje, że jest to kod inicjujący.

Czy są jakieś inne powody, aby preferować jeden od drugiego?

coding-style jquery Martin N.
źródło
4
Pierwszy zaśmieca globalną przestrzeń nazw. Wybierz drugi.
riwalk

Odpowiedzi:

10

Jak wspomniano @ Stargazer712, pierwszy zaśmieca globalną przestrzeń nazw, więc drugi to zwycięzca IMHO. Teraz, powiedziawszy to, ponieważ używasz anonimowej funkcji w drugim przykładzie, callstack twojego debuggera będzie bezużyteczny i uzyska różne wyniki w zależności od używanego debuggera. Zwykle tym, co ostatecznie kończę, jest:

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

W ten sposób globalna przestrzeń nazw nie jest zagracona, a Ty masz przydatny stos wywołań.

Mam tendencję do używania powyższej konwencji we wszystkich anonimowych (no, już nie anonimowych) definicjach funkcji. To konwencja, którą znalazłem podczas przeglądania kodu JS Firefoksa.

Edycja: Powiedziawszy to wszystko, Oliver porusza kwestię testów jednostkowych. Powyższe ma działać jako opakowanie dla bardziej złożonych operacji, a nie pomieścić masę nieprzetestowanego kodu.

Demian Brecht
źródło
+1 Za wzmiankę o debugowaniu. Często widziałem użycie „nazwanych wywołań zwrotnych” (nie wiem, czy ten termin rzeczywiście istnieje) w kodzie Node.js, więc też sądzę, że to dobra praktyka.
Oliver Weiler,
kangax.github.com/nfe Wyrażenia o nazwanych funkcjach - w tym artykule dowiesz się wszystkiego, co chciałeś o nich wiedzieć.
Sean McMillan,
7

Powiedziałbym, że w tym przypadku prawdopodobnie nie ma to znaczenia, ale jeśli masz anonimowe funkcje zwrotne, wywołujące inne anonimowe funkcje zwrotne, zwykle używam pierwszego podejścia, ponieważ sprawia, że ​​kod jest znacznie bardziej czytelny i łatwiejszy do śledzenia.

Jeśli chodzi o testowanie jednostkowe, pierwsze podejście byłoby lepsze, ponieważ można by przetestować initstufffunkcję w izolacji.

Oliver Weiler
źródło
Zwykle nie mamy dużo kodu w tych funkcjach inicjalizacji. Może pobrać niektóre dane z kilku miejsc i to wszystko
Martin N.
3

Chciałbym wybrać pierwszy, dla czytelności / debugowania / testowania itp. Możesz uniknąć problemu zaśmiecania globalnej przestrzeni nazw, po prostu tworząc lokalną przestrzeń nazw dla wszystkich funkcji na twojej stronie. Używam stylu notacji obiektowej, zgodnie z zaleceniami Paula Irisha (patrz slajdy 13-15 na http://paulirish.com/2009/perf/ )

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

jQuery(document).ready(MYPAGE.onReady);
njaggars
źródło
2

Istnieje również trzeci sposób rejestrowania metod inicjowania bez zaśmiecania globalnej przestrzeni nazw, którą preferuję:

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

Jest krótki i pozwala uniknąć wyszukiwania dokumentów DOM 

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

robi.

Alex
źródło
+1: Myślę, że to standardowa praktyka, ale aby uniknąć problemów z sprzecznymi definicjami $, wolę:jQuery(function($) {...});
kevin cline