您的位置：首页 > 其它

自执行匿名函数剖析整理

2017-07-18 11:59 176 查看

格式：
      （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($(i
cf6e
d).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" onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 自执行匿名函数

相关文章推荐

新的分享

章节导航