Два блока кода, которые вы показали, кардинально отличаются по тому, когда и почему они выполняются. Они не исключают друг друга. Они не служат той же цели.
Модули JavaScript
(function($) {
// Backbone code in here
})(jQuery);
Это шаблон «Модуль JavaScript», реализованный с помощью немедленно вызываемой функции.
Цель этого кода - обеспечить «модульность», конфиденциальность и инкапсуляцию вашего кода.
Реализация этого - функция, которая немедленно вызывается вызывающей (jQuery)
круглой скобкой. Целью передачи jQuery в круглые скобки является обеспечение локальной области видимости глобальной переменной. Это помогает сократить накладные расходы на поиск $
переменной и в некоторых случаях позволяет улучшить сжатие / оптимизацию для минификаторов.
Немедленно вызываемые функции выполняются, ну и сразу. Как только определение функции завершено, функция выполняется.
Функция jQuery "DOMReady"
Это псевдоним функции JQuery "DOMReady": http://api.jquery.com/ready/
$(function(){
// Backbone code in here
});
Функция "DOMReady" в jQuery выполняется, когда DOM готова к манипулированию вашим кодом JavaScript.
Модули против DOMReady в магистральном коде
Определять код Backbone внутри функции JQuery DOMReady - плохой тон, и это может отрицательно сказаться на производительности вашего приложения. Эта функция не вызывается до тех пор, пока DOM не загрузится и не будет готов к работе. Это означает, что вы ждете, пока браузер хотя бы раз проанализирует DOM, прежде чем определять свои объекты.
Лучше определять объекты Backbone вне функции DOMReady. Я, среди многих других, предпочитаю делать это внутри шаблона модуля JavaScript, чтобы я мог обеспечить инкапсуляцию и конфиденциальность своего кода. Я обычно использую шаблон «Выявление модуля» (см. Первую ссылку выше) для обеспечения доступа к битам, которые мне нужны вне моего модуля.
Определяя свои объекты вне функции DOMReady и предоставляя некоторый способ ссылаться на них, вы позволяете браузеру получить преимущество при обработке вашего JavaScript, потенциально ускоряя взаимодействие с пользователем. Это также делает код более гибким, поскольку вы можете перемещать объекты, не беспокоясь о создании дополнительных функций DOMREady, когда вы перемещаете объекты.
Скорее всего, вы все равно будете использовать функцию DOMReady, даже если вы определите свои объекты Backbone где-то еще. Причина в том, что многим приложениям Backbone необходимо каким-то образом манипулировать DOM. Для этого вам нужно дождаться готовности DOM, поэтому вам нужно использовать функцию DOMReady для запуска вашего приложения после того, как оно было определено.
Вы можете найти множество примеров этого в Интернете, но вот очень простая реализация с использованием как модуля, так и функции 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();
});