• 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" 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>

  • 相关阅读:
    算法题目积累0721
    java编辑器
    java简易编辑器
    公选网站作业4_2.php
    php注册登录系统(一)-极简
    Tomcat与Web服务器、应用服务器的关系
    PHP用户登录与注册页面
    网站选修课作业(4.1)
    网站选修课作业(3.1)
    svn和ftp的区别
  • 原文地址:https://www.cnblogs.com/handsomer/p/4503477.html
Copyright © 2020-2023  润新知