2011-09-11 30 views
3

我碰到下面的JavaScript:這個javascript的目的是什麼?

<body>   
    <script type="text/javascript"> 
    (function() { 
     alert('test'); 
     })(); 
    </script> 

而且我很好奇具有的功能是裏面的代碼的目的是什麼?這是不是做同樣的事情,如果只是這樣寫的:

<body>   
    <script type="text/javascript"> 
     alert('test'); 
    </script> 

回答

3

通常用於創建私人範圍,並且不污染全局範圍。然而,在這種情況下,沒有任何好處。

實施例:

(function() { 

    var counter = 0; 

    $('#elem').click(function() { 
     counter += 1; 
     alert('#elem has been clicked ' + counter + ' times!'); 
    }); 

}()); 

這裏計數器變量是私有的代碼包含函數的內部。在封閉函數中定義的其他函數可以訪問這些變量(它們是關閉變量;它們是閉包)。

這通常稱爲Immediately Invoked Function Expression

+0

+1。非常豐富。 – MTLPhil

2

它通常用來保證在代碼中使用的所有變量取它們的值從這個片段的唯一的代碼 - 本地範圍。他們忽略片段外定義的變量。

var a = 10; 
(function() { 
    alert(a); // undefined 
    var a = 5; 
    alert(a); // 5 
    })(); 

它的其他主要用途是確保代碼將在一個Javascript庫(如jQuery的),即使有在頁面上使用了多庫(如原型,Mootools的)工作。你會做這樣的事情......

(function($) { 
    alert('test'); 
    // You can now use the jQuery $ in here 
    // And not worry about the Prototype $ being used instead 
    })(jQuery); 

通過傳遞jQuery對象到函數,它得到的$局部範圍的變量名稱,它將優先於全球範圍的原型$(其中有完全不同的方法可用)。

+0

儘管大多數jQuery插件使用了這種方法,但這遠不是此模式的主要用法**。 – arnaud576875

+0

已更新,以解決該問題,我的問題:) – Joe

+1

「他們忽略了片段外定義的變量。」是錯的。嘗試拿走第二個'var a = 5'。這是一個副作用,在JS中,所有var聲明都在函數的開頭隱式移動(這也是爲什麼JSLint給出類似於代碼的警告的原因) – xanatos

1

在這種情況下,是的。但。

將代碼放入函數中,然後立即執行它,是隔離變量的一種方法,因爲JavaScript實際上只有兩個範圍,即全局函數和函數。如果有一個在alert之前定義的變量,比如說將它保留在另一個函數中,則會創建一個新的作用域,從而防止同名的全局變量被垃圾回收。

1

在這種情況下,它沒有太大的作用。 alert("test")將運行,不會被重複使用。更一般地說,通過將JavaScript(通常是整個文件)封裝在匿名函數中,可以防止變量和函數污染全局範圍,這有助於避免與其他代碼發生衝突。

More info here

0

在這裏,我向您展示爲什麼你有一個函數與警報的選項。我希望人們知道他們何時點擊我的按鈕,他們只能點擊一次,因此我添加了警報。這個函數就是我正在創建的(一個增加了投票的按鈕,然後顯示票數),而警報只是一個附加。

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<title>Vote!</title> 


<script type="text/javascript"> 

function countClicks() { 
var x = 0; 


x += 1 
document.getElementById("counting").innerHTML = x; 

var clickLimit = 1; //Max number of clicks 
if(x>=clickLimit) { 

alert('you can only click once') 
      } 
else 
{ 
    ClickCount++; 
    return true; 
} 
} 

</script> 

</head> 
<body> 

<div style="margin-left:100px;"> 
<input type="button" value="VOTE" name="clickOnce" onclick="return countClicks();" /> 
<div id="counting"></div> 
</body> 

</html>