Po co definiować funkcję anonimową i przekazywać ją jako argument jQuery?

Dwa bloki kodu, które pokazałeś, różnią się znacznie pod względem czasu i powodu ich wykonania. Nie wykluczają się nawzajem. Nie służą one temu samemu celowi.

Moduły JavaScript

(function($) {
  // Backbone code in here
})(jQuery);

Jest to wzorzec "modułu JavaScript", zaimplementowany z natychmiastowym wywołaniem funkcja.

• http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
• http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

Celem tego kodu jest zapewnienie" modułowości", Prywatności i hermetyzacji kodu.

Implementacja tej funkcji jest natychmiast wywoływana przez wywołanie nawiasu (jQuery). Celu przekazania jQuery do nawias ma zapewnić lokalny zasięg zmiennej globalnej. Pomaga to zmniejszyć ilość kosztów wyszukiwania zmiennej $ i pozwala na lepszą kompresję / optymalizację minifigurek w niektórych przypadkach.

Natychmiast wywołujące funkcje są wykonywane, cóż, natychmiast. Gdy tylko definicja funkcji jest kompletna, funkcja jest wykonywana.

Funkcja "DOMReady" JQuery

Jest to alias do funkcji "DOMReady" jQuery: http://api.jquery.com/ready/

$(function(){
  // Backbone code in here
});

JQuery 's" DOMReady " funkcja wykonuje, gdy DOM jest gotowy do manipulowania przez kod JavaScript.

Moduły vs DOMReady w kodzie szkieletowym

To zła forma definiowania kodu szkieletowego wewnątrz funkcji DOMReady jQuery i potencjalnie szkodliwa dla wydajności aplikacji. Funkcja ta nie zostanie wywołana, dopóki DOM nie zostanie załadowany i nie będzie gotowy do manipulowania. Oznacza to, że czekasz aż przeglądarka parsował DOM przynajmniej raz przed definiowaniem obiektów.

Lepszym pomysłem jest zdefiniowanie obiektów szkieletowych poza funkcją DOMReady. Ja, między innymi, wolę to zrobić wewnątrz wzorca modułu JavaScript, aby zapewnić enkapsulację i prywatność dla mojego kodu. Zazwyczaj używam wzorca "Revealing Module" (zobacz pierwszy link powyżej), aby zapewnić dostęp do bitów, których potrzebuję poza moim modułem.

Definiując obiekty poza domready funkcja, i zapewniając jakiś sposób, aby je odwołać, pozwalasz przeglądarce, aby uzyskać przewagę nad przetwarzaniem JavaScript, potencjalnie przyspieszając doświadczenie użytkownika. Sprawia to również, że kod jest bardziej elastyczny, ponieważ możesz przenosić rzeczy bez martwienia się o tworzenie większej liczby funkcji DOMREady podczas przenoszenia rzeczy.

Prawdopodobnie będziesz używać funkcji DOMReady, mimo to, nawet jeśli zdefiniujesz swoje obiekty szkieletowe gdzie indziej. Powodem jest to, że wiele aplikacji szkieletowych potrzebuje manipulować DOM w jakiś sposób. Aby to zrobić, musisz poczekać, aż DOM będzie gotowy, dlatego musisz użyć funkcji DOMReady, aby uruchomić aplikację po jej zdefiniowaniu.

Możesz znaleźć wiele przykładów tego w Internecie, ale oto bardzo podstawowa implementacja, wykorzystująca zarówno Moduł, jak i funkcję DOMReady:

// Define "MyApp" as a revealing module

MyApp = (function(Backbone, $){

  var View = Backbone.View.extend({
    // do stuff here  
  });

  return {
    init: function(){
      var view = new View();
      $("#some-div").html(view.render().el);
    }
  };

})(Backbone, jQuery);



// Run "MyApp" in DOMReady

$(function(){
  MyApp.init();
});