爲什麼用匿名函數包裝角碼控制器代碼？

Question

我已經看到了一些人的包裝控制器，具有：

function(){ 
    //CODE 
}(); 

有什麼好處/目標呢？

Answer 1

恕我直言，這是沒有必要的，甚至是多餘的，因爲大多數控制器都已經功能：

'use strict'; 

angular.module('MyApp').controller('AboutController', ['$scope' 
    function ($scope) { 
    $scope.title = 'About Us'; 
    } 
]); 

Answer 2

您會發現很多包含在匿名函數中的JavaScript代碼的原因是將其與頁面上的其他代碼隔離。

下面的代碼會宣佈在全球範圍內名爲name變量：

var name = "Hello World"; 

通過使用代碼，試圖使用一個名爲名稱的變量在頁面上的任何其他腳本可能會得到意想不到的價值「Hello World」，因爲你的腳本聲明它爲「Hello World」。

通過包裝的代碼在一個匿名函數，你把代碼從一個名爲名稱的其他變量發生衝突：

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

在上面的例子中，名字現在只有匿名函數的範圍內可。它不是全球性的，因此不能與頁面上的其他代碼發生衝突。

通過將您的Angular模塊包裝在匿名函數中，可以防止代碼與其他代碼發生衝突。

此外，其他人可能會使用您的代碼將不必擔心它改變其全球範圍。

Answer 3

這不是直接與Angular直接相關的任何東西，它是一個知道爲Immediately Invoked Function Expression的JS模式。

這是在JavaScript中最有用的模式之一，這主要是因爲：

代碼封裝

由於JS functions have closures，我們可以用這個模式來很容易地創建私有數據：

var index = (function iife() { 
 
    var counter = 0; // <-- this is private, only available inside the closure of inner() 
 
    return function inner() { 
 
    return counter++; 
 
    }; 
 
})(); 
 

 
console.log(index()); // 0 
 
console.log(index()); // 1 
 
console.log(index()); // 2 
 
console.log(index.counter) // undefined

---

我們也可以將參數傳遞給一個IIFE，它允許我們控制我們如何訪問我們的IIFE的外部環境。例如，爲了確保$實際上是你的代碼中jQuery對象：

(function ($) { 
    // here have access to the global jQuery as $ regardless of what window.$ is and 
    // how many libraries are trying to use $ 
})(jQuery); 

---

通過這兩個概念結合以上，IIFEs也可以被用來實現模塊模式，這是怎樣的基礎RequireJS和單獨的NodeJS代碼：

var myModule = (function iife(initData) { 
 
    // we can use initData here to initialize our module if necessary 
 
    
 
    var module = {}; 
 

 
    // private vars ... 
 
    var privateVar1, privateVar2; 
 

 
    // private methods ... 
 
    function privateMethod() { 
 
    console.log('yeeey'); 
 
    } 
 

 
    module.somePublicProperty = 1; 
 
    module.somePublicMethod = function() { 
 
    privateMethod(); 
 
    }; 
 

 
    return module; 
 
})(/* pass initialization data */); 
 

 
myModule.somePublicMethod(); // 'yeeey'

Answer 4

的everythin g @ nem035和@tcasey說的是正確的，但它也有另一個副作用。

如果您使用諸如Grunt或Gulp之類的工具，它還允許您讓dists投入生產。

如果你不使用Immediate Invoke Pattern你最有可能有這樣微小的問題：

• State X is already defined!
• Unknown provider
• 。 。 。

我建議你用這種模式包裝所有的js模塊。

我希望我一直有幫助。

Answer 5

你有很多好處immediately-invoked-function-expression短IIFE，它是使用它的最佳實踐。這樣，角度服務或控制器中的每一個都會變得孤立，並且您不會遇到全局變量，因爲如果您不使用IIFE，它可能會發生。

read more about it