Les deux blocs de code que vous avez montrés sont très différents quant au moment et à la raison de leur exécution. Ils ne sont pas exclusifs l'un de l'autre. Ils ne servent pas le même objectif.
Modules JavaScript
(function($) {
// Backbone code in here
})(jQuery);
Il s'agit d'un modèle de "module JavaScript", implémenté avec une fonction d'appel immédiate.
Le but de ce code est de fournir "modularité", confidentialité et encapsulation pour votre code.
L'implémentation de ceci est une fonction qui est immédiatement appelée par la (jQuery)
parenthèse appelante . Le but de passer jQuery entre parenthèses est de fournir une portée locale à la variable globale. Cela permet de réduire la surcharge de recherche de la $
variable et permet une meilleure compression / optimisation des minificateurs dans certains cas.
Les fonctions qui invoquent immédiatement sont exécutées, enfin, immédiatement. Dès que la définition de la fonction est terminée, la fonction est exécutée.
Fonction "DOMReady" de jQuery
Ceci est un alias de la fonction "DOMReady" de jQuery: http://api.jquery.com/ready/
$(function(){
// Backbone code in here
});
La fonction "DOMReady" de jQuery s'exécute lorsque le DOM est prêt à être manipulé par votre code JavaScript.
Modules vs DOMReady dans le code backbone
C'est une mauvaise forme de définir votre code Backbone à l'intérieur de la fonction DOMReady de jQuery, et potentiellement dommageable pour les performances de votre application. Cette fonction n'est appelée que lorsque le DOM est chargé et prêt à être manipulé. Cela signifie que vous attendez que le navigateur ait analysé le DOM au moins une fois avant de définir vos objets.
Il est préférable de définir vos objets Backbone en dehors d'une fonction DOMReady. Je préfère, parmi beaucoup d'autres, le faire à l'intérieur d'un modèle de module JavaScript afin de pouvoir fournir l'encapsulation et la confidentialité de mon code. J'ai tendance à utiliser le modèle "Revealing Module" (voir le premier lien ci-dessus) pour donner accès aux bits dont j'ai besoin en dehors de mon module.
En définissant vos objets en dehors de la fonction DOMReady et en fournissant un moyen de les référencer, vous permettez au navigateur de prendre une longueur d'avance sur le traitement de votre JavaScript, ce qui accélère potentiellement l'expérience utilisateur. Cela rend également le code plus flexible car vous pouvez déplacer des choses sans avoir à vous soucier de créer plus de fonctions DOMREady lorsque vous déplacez des choses.
Vous allez probablement utiliser une fonction DOMReady, même si vous définissez vos objets Backbone ailleurs. La raison en est que de nombreuses applications Backbone doivent manipuler le DOM d'une manière ou d'une autre. Pour ce faire, vous devez attendre que le DOM soit prêt, vous devez donc utiliser la fonction DOMReady pour démarrer votre application une fois qu'elle a été définie.
Vous pouvez trouver de nombreux exemples de cela sur le Web, mais voici une implémentation très basique, utilisant à la fois un module et la fonction 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();
});