Pourquoi définir une fonction anonyme et passer de jQuery comme argument?

Les deux blocs de code que vous avez indiqués sont radicalement différentes dans quand et pourquoi ils exécutent. Ils ne sont pas exclusifs les uns des autres. Ils n'ont pas le même but.

Modules JavaScript

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

C'est une "JavaScript Module" modèle, mis en œuvre avec un immédiatement l'invocation de la fonction.

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

Le but de ce code est de fournir "modularité", de confidentialité et d'encapsulation pour votre code.

La mise en œuvre de la présente est une fonction qui est immédiatement invoqué par l'appelant (jQuery) parenthèse. Le but de passer de jQuery dans la parenthèse est de fournir des locaux de la portée de la variable globale. Cela permet de réduire le montant des frais généraux de la recherche de la $ variable, et permet une meilleure compression /optimisation pour minifiers dans certains cas.

Immédiatement en invoquant les fonctions sont exécutées, bien, immédiatement. Dès que la définition de la fonction est terminée, la fonction est exécutée.

jQuery "DOMReady" fonction

C'est un alias pour jQuery "DOMReady" fonction: http://api.jquery.com/ready/

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

jQuery "DOMReady" la fonction s'exécute lorsque le DOM est prêt à être manipulé par votre code JavaScript.

Modules vs DOMReady De la colonne vertébrale Code

C'est une mauvaise forme à définir votre épine Dorsale code à l'intérieur de jQuery DOMReady fonction, et potentiellement dommageable pour des performances de votre application. Cette fonction n'est pas appelée jusqu'à ce que le DOM est chargé et prêt à être manipulé. Cela signifie que vous êtes en attente jusqu'à ce que le navigateur a analysé les DOM au moins une fois avant de vous définissez vos objets.

Il est préférable de définir votre épine Dorsale des objets en dehors d'un DOMReady fonction. J'ai, parmi beaucoup d'autres, préfèrent le faire à l'intérieur d'un Module JavaScript modèle afin que je puisse donner de l'encapsulation et de la vie privée pour mon code. J'ai tendance à utiliser le "Révélateur Module" motif (voir le premier lien ci-dessus) de fournir l'accès aux bits que j'ai besoin à l'extérieur de mon module.

Par la définition de vos objets en dehors de l'DOMReady fonction, et d'offrir une certaine façon de référence, vous permettant le navigateur pour obtenir une longueur d'avance sur traitement de votre JavaScript, ce qui peut accélérer l'expérience de l'utilisateur. Cela rend le code plus souple que vous pouvez déplacer des choses autour de vous sans avoir à vous soucier de la création de plus de DOMREady fonctions lorsque vous faites bouger les choses.

Vous êtes susceptible d'utiliser un DOMReady fonction, encore, même si vous définissez votre épine Dorsale des objets quelque part d'autre. La raison en est que de nombreux épine Dorsale des applications ont besoin de manipuler le DOM d'une certaine manière. Pour ce faire, vous devez attendre jusqu'à ce que le DOM est prêt, par conséquent, vous devez utiliser le DOMReady fonction pour démarrer votre application après qu'il a été défini.

Vous pouvez trouver beaucoup d'exemples de ce à travers le web, mais en voici une très simple de mise en œuvre, à l'aide d'un Module et le DOMReady fonction:

//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();
});

Il vous permet de toujours utilisation $ à l'intérieur de clôture, même si $.noConflict() a été utilisé.

Sans cette fermeture vous seriez censé utiliser jQuery au lieu de $ tout le temps.

Utiliser les deux.

L'auto invocation de fonction dans lequel vous passez en jQuery pour éviter les conflits de bibliothèque, et à juste assurez-vous que jQuery est disponible que vous pouvez attendre avec le $.

Et la .ready (), méthode de raccourci comme requis pour exécuter javascript seulement après le DOM est chargé:

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

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