javascript自执行匿名函数

格式:
      (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>


转自:http://20032334.iteye.com/blog/288989
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值