¿Por qué definir una función anónima y pasarla jQuery como argumento?

Los dos bloques de código que ha mostrado son dramáticamente diferentes en cuándo y por qué se ejecutan. No son exclusivos el uno del otro. No sirven para el mismo propósito.

Módulos JavaScript

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

Este es un patrón de "Módulo JavaScript", implementado con una invocación inmediata función.

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

El propósito de este código es proporcionar "modularidad", privacidad y encapsulación para su código.

La implementación de esta es una función que es invocada inmediatamente por el paréntesis invocador (jQuery). El propósito de pasar jQuery a la el paréntesis es para proporcionar un alcance local a la variable global. Esto ayuda a reducir la cantidad de sobrecarga de buscar la variable $, y permite una mejor compresión / optimización para los minificadores en algunos casos.

Las funciones que invocan inmediatamente se ejecutan, bueno, inmediatamente. Tan pronto como se completa la definición de la función, se ejecuta la función.

La función "domReady" de jQuery

Este es un alias de la función "domReady" de jQuery: http://api.jquery.com/ready /

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

La función "domReady" de jQuery se ejecuta cuando el DOM está listo para ser manipulado por su código JavaScript.

Módulos vs domReady En Código Troncal

Es una mala forma definir su código troncal dentro de la función domReady de jQuery, y potencialmente perjudicial para el rendimiento de su aplicación. Esta función no se llama hasta que el DOM se ha cargado y está listo para ser manipulado. Eso significa que está esperando hasta que el navegador tenga analizó el DOM al menos una vez antes de definir sus objetos.

Es mejor definir tus objetos Backbone fuera de una función domReady. Yo, entre muchos otros, prefiero hacer esto dentro de un patrón de módulo JavaScript para que pueda proporcionar encapsulación y privacidad para mi código. Tiendo a usar el patrón de "Módulo Revelador" (ver el primer enlace anterior) para proporcionar acceso a los bits que necesito fuera de mi módulo.

Definiendo sus objetos fuera del domReady función, y proporcionar alguna manera de hacer referencia a ellos, que está permitiendo que el navegador para obtener una ventaja en el procesamiento de su JavaScript, potencialmente acelerar la experiencia del usuario. También hace que el código sea más flexible, ya que puede mover cosas sin tener que preocuparse por crear más funciones domReady cuando mueve cosas.

Es probable que vaya a usar una función domReady, aún así, incluso si define sus objetos Backbone en otro lugar. La razón es que muchas aplicaciones troncales necesitan para manipular el DOM de alguna manera. Para hacer esto, debe esperar hasta que el DOM esté listo, por lo tanto, debe usar la función domReady para iniciar su aplicación después de que se haya definido.

Puedes encontrar muchos ejemplos de esto en la web, pero aquí tienes una implementación muy básica, usando tanto un Módulo como la función 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();
});