自执行匿名函数剖析整理

心已赠人 2021-09-14 00:18 364阅读 0赞

格式：  
      （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>