????? (function(){
????????? //代碼
??????? })();
解釋:這是相當優雅的代碼(如果你首次看見可能會一頭霧水:)),包圍函數(function(){})的第一對括號向腳本返回未命名的函數,隨后一對空括號立即執行返回的未命名函數,括號內為 匿名函數 的參數。
來個帶參數的例子:
??????? (function(arg){
?????????? alert(arg+100);
??????? })(20);
??????? 這個例子返回120。
重要用途:可以用它創建命名空間,只要把自己所有的代碼都寫在這個特殊的函數包裝內,那么外部就不能訪問,除非你允許。
?????? (function(){
?????????? function $(id){
??????????????? return document.getElementById(id);
?????????? }
?????????? function __addClass(id,className,classValue){
??????????????? $(id).style.className=classValue;
?????????? }
?????????? window['mySpace']={};
?????????? window['mySpace']['addClass']=__addClass;
??????? })();
上面的例子就可以用這種偽命名空間封裝并保護自己的所有函數、對象和變量。而且,由于它們位于同一個函數中,所以可以互相引用。為了對受保護的代碼進行全局化,隨后的一對括號告訴瀏覽器立即執行返回的匿名函數,而且在執行期間將__addClass()賦值給了window的一個方法,這樣在外部只能執行addClass而__addClass被保護起來了。我可以這樣調用它:
mySpace.addClass('oneId','font-width','bold');
實例:test.html
------------------------------
<html>
<head><title>自執行匿名函數</title>
<script type="text/javascript">
(
function(){
?? ?function $(id){
??????? return document.getElementById(id);
??? }
??? function __addClass(id,className,classValue){
?? ??? ?switch(className){
?? ??? ??? ?case 'background':{
?? ??? ??? ??? ?$(id).style.background=classValue;
?? ??? ??? ??? ?break;
?? ??? ??? ?}
?? ??? ??? ?case 'color':{
?? ??? ??? ??? ?$(id).style.color=classValue;
?? ??? ??? ??? ?break;
?? ??? ??? ?}
?? ??? ??? ?case 'fontSize':{
?? ??? ??? ??? ?$(id).style.fontSize=classValue+'px';
?? ??? ??? ??? ?break;
?? ??? ??? ?}
?? ??? ??? ?case 'fontWeight':{
?? ??? ??? ??? ?$(id).style.fontWeight =classValue;
?? ??? ??? ??? ?break;
?? ??? ??? ?}
?? ??? ?}
?????? ?
??? }
??? window['mySpace']={};
??? window['mySpace']['addClass']=__addClass;
}
)();
</script>
</head>
<body>
<div id="div1">
這是測試區塊
</div>
<script type="text/javascript">
mySpace.addClass('div1','background','green');
mySpace.addClass('div1','color','yellow');
mySpace.addClass('div1','fontSize','24');
mySpace.addClass('div1','fontWeight','bold');
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
test2.html、nmFn.js位于同一文件夾
nmFn.js
------------------------(
function(){
? ? //匿名函數內部私有函數,獲取某對象
? ? function $(id){
? ? ? ? return document.getElementById(id);
? ? }
? ? //匿名函數內部私有函數,用于改變某對象屬性
? ? function __addClass(id,className,classValue){
? ? ? ? switch(className){
? ? ? ? ? ? case 'background':{
? ? ? ? ? ? ? ? $(id).style.background=classValue;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? ? case 'color':{
? ? ? ? ? ? ? ? $(id).style.color=classValue;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? ? case 'fontSize':{
? ? ? ? ? ? ? ? $(id).style.fontSize=classValue+'px';
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? ? case 'fontWeight':{
? ? ? ? ? ? ? ? $(id).style.fontWeight =classValue;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? }
? ? //往window對象中添加mySpace屬性
? ? window['mySpace']={};
? ? window['mySpace']['addClass']=__addClass;
? ? //1.建立自己的對象
? ? var personObj = {
? ? ? ? ? ? ? ? ? name:"sam",
? ? ? ? ? ? ? ? ? age:18,
? ? ? ? ? ? ? ? ? setAge:function(){var ar=arguments;this.age=ar[0]},
? ? ? ? ? ? ? ? ? getAge:function(){alert("My age is "+this.age);},
? ? ? ? ? ? ? ? ? getName:function(id){
? ? ? ? ? ? ? ? ? ? ? if($(id).value!="" && $(id).value!=" ") this.name=$(id).value;
? ? ? ? ? ? ? ? ? ? ? alert("My name is "+this.name+" "+this.age+" old!!");
? ? ? ? ? ? ? ? ? }
? ? };
? ? //把自己的對象掛靠到window中
? ? window["person"]=personObj;
}
)();
------------------------
test2.html
------------------------
<html>
<head><title>自執行匿名函數</title>
<script type="text/javascript" src="nmFn.js "></script>
</head>
<body>
<div id="div1">
這是測試區塊
</div>
sign your name:<input type="text" id="personName">
<input type="button" value="tell age" οnclick="person.getName('personName');" />
<script type="text/javascript">
mySpace.addClass('div1','background','green');
mySpace.addClass('div1','color','yellow');
mySpace.addClass('div1','fontSize','24');
mySpace.addClass('div1','fontWeight','bold');
</script>
</body>
</html>