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

pasar variables entre funciones javascript

Question

Estoy mirando el excelente código de demostración peepcode de los screencasts de backbone.js. En él, el código de la red troncal está incluido en una función anónima que se pasa el objeto jQuery:

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

En mi propio código de red troncal, acabo de incluir todo mi código en el evento jQuery DOM ''listo'':

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

¿Cuál es el punto / ventaja del primer enfoque? Al hacerlo de esta manera, se crea una función anónima que luego se ejecuta inmediatamente con el objeto jQuery que se pasa como el argumento de la función, asegurando efectivamente que $ sea el objeto jQuery. ¿Es este el único punto: garantizar que jQuery esté vinculado a ''$'' o existen otras razones para hacerlo?

Answer 1

Asegura que siempre puede usar $ dentro de ese cierre incluso si se $.noConflict() .

Sin este cierre se supone que debes usar jQuery lugar de $ todo el tiempo.

Answer 2

Como nota secundaria menor, el envío de $ como argumento a una función anónima hace $ local a esa función que tiene una pequeña implicación de rendimiento positivo si la función $ se llama mucho. Esto se debe a que javascript busca primero las variables en el ámbito local y luego se desplaza hacia abajo hasta llegar al ámbito de la ventana (donde usualmente vive $).

Answer 3

Es para evitar un conflicto potencial de la variable $. Si algo más define una variable llamada $, su complemento puede usar una definición incorrecta

Consulte http://docs.jquery.com/Plugins/Authoring#Getting_Started para obtener más detalles.

Answer 4

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 de JavaScript

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

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

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

El objetivo de este código es proporcionar "modularidad", privacidad y encapsulado para su código.

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

Inmediatamente las funciones de invocación se ejecutan, bueno, inmediatamente. Tan pronto como se completa la definición de la función, la función se ejecuta.

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 frente a DOMReady In Backbone Code

Es mala forma definir tu código Backbone dentro de la función DOMReady de jQuery, y potencialmente dañino para el rendimiento de tu aplicación. Esta función no se llama hasta que el DOM se haya cargado y esté listo para ser manipulado. Eso significa que está esperando hasta que el navegador haya analizado el DOM al menos una vez antes de definir sus objetos.

Es una mejor idea definir sus objetos Backbone fuera de una función DOMReady. Yo, entre muchos otros, prefiero hacer esto dentro de un patrón de Módulo de JavaScript para que pueda proporcionar encapsulación y privacidad para mi código. Tiendo a utilizar el patrón "Revelar Módulo" (vea el primer enlace arriba) para proporcionar acceso a los bits que necesito fuera de mi módulo.

Al definir sus objetos fuera de la función DOMReady y al proporcionar alguna forma de referenciarlos, está permitiendo que el navegador tenga una ventaja al procesar su JavaScript, lo que puede 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 DOMRE cuando mueve cosas.

Probablemente va a utilizar una función DOMReady, aún así, incluso si define sus objetos Backbone en otro lugar. La razón es que muchas aplicaciones Backbone necesitan 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 haberla definido.

Puede encontrar muchos ejemplos de esto en la Web, pero aquí hay una implementación muy básica, que utiliza un Módulo y 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();
});

Answer 5

Usa ambos.

La función de invocación automática en la que se transfiere jQuery para evitar conflictos en la biblioteca, y para asegurarse de que jQuery esté disponible como se esperaría con $.

Y el método de acceso directo. (Como) necesario para ejecutar javascript solo después de que DOM haya cargado:

(function($) {
    $(function(){
          //add code here that needs to wait for page to be loaded
    });

    //and rest of code here
})(jQuery);