Контроллер упаковки в анонимной функции

выполняю ли я:

(function () {
'use strict';

// Create the module and define its dependencies.
var app = angular.module('app', [
    // Angular modules 
    'ngAnimate',        // animations
    'ngRoute'           // routing

    // Custom modules 

    // 3rd Party Modules

]);

// Execute bootstrapping code and any dependencies.
app.run(['$log',
    function ($log) {
        $log.log('we are loaded');
    }]);
})();

или

'use strict';

// Create the module and define its dependencies.
var app = angular.module('app', [
    // Angular modules 
    'ngAnimate',        // animations
    'ngRoute'           // routing

    // Custom modules 

    // 3rd Party Modules

]);

// Execute bootstrapping code and any dependencies.
app.run(['$log',
    function ($log) {
        $log.log('we are loaded');
    }]);

Оба, похоже, работают - в чем разница?

Я был бы признателен за объяснение того, что такое анонимная функция, когда я буду использовать ее, и почему я вижу контроллеры, написанные обеими способами для AngularJs.

Спасибо!

Ответ 1

Оба будут работать. Причина, по которой вы найдете много JavaScript-кода, завернутого в анонимную функцию, состоит в том, чтобы изолировать его от другого кода на странице.

Следующий код объявит переменную с именем name в глобальной области:

var name = "Hello World";

Используя этот код, любой другой script на странице, пытающейся использовать переменную с именем name, потенциально может получить неожиданное значение "Hello World", потому что ваш script объявил его как "Hello World".

Завершая этот код в анонимной функции, вы держите код в конфликте с другими переменными, называемыми name:

(function() {
    var name = "Hello World";
})();

В приведенном выше примере name теперь доступен только внутри области анонимной функции. Он не глобальный и поэтому не может конфликтовать с другим кодом на странице.

Во втором предоставленном фрагменте кода app теперь будет глобальной переменной, которая потенциально может быть перезаписана кем-то другим, объявляющим глобальную переменную с именем app. Упаковывая ваш модуль Angular в анонимную функцию, вы не позволяете вашему коду противоречить другому коду.

Кроме того, другим людям, которые могут использовать ваш код, не придется беспокоиться об изменении своей глобальной области.

Ответ 2

Локальная переменная JavaScript ТОЛЬКО живет в области функций!

Итак, если вы используете выражение IIFE (выражение, вызванное немедленным вызовом), как показано ниже:

(function () {
   var app = angular.module('app', []);
})();

Вы не можете получить доступ к своему модулю вне функции:

(function () {
   var app = angular.module('app', []);
})();

// will get app is undefined error
app.run(['$log', function ($log) {
    $log.log('we are loaded');
}]);

Объявить локальную переменную вместо глобальной переменной - хорошая идея. Это позволит вашей переменной приложения не получить доступ в глобальной среде.

Если вы объявляете глобальную переменную, ваша переменная может использоваться везде и, возможно, конфликтует с другой программой javascript.