自执行匿名函数剖析整理

格式:
      (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://www.mzph.cn/news/247743.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

爬虫界又出神器|一款比selenium更高效的利器

提起selenium想必大家都不陌生&#xff0c;作为一款知名的Web自动化测试框架&#xff0c;selenium支持多款主流浏览器&#xff0c;提供了功能丰富的API接口&#xff0c;经常被我们用作爬虫工具来使用。但是selenium的缺点也很明显&#xff0c;比如速度太慢、对版本配置要求严苛…

java数组 —(7)

* 1.数组的理解&#xff1a;数组(Array)&#xff0c;是多个相同类型数据一定顺序排列的集合&#xff0c;并使用一个名字命名&#xff0c; 并通过编号的方式对这些数据进行统一管理。 * 2.数组相关的概念&#xff1a; 数组名 元素 角标、下标、索引 数组的长度&#xff1a;元素…

bootstrap按钮的边框问题 去除

问题&#xff1a; 用bootstrap做的按钮&#xff0c;点击后&#xff0c;都会出现边框&#xff0c;请问如何去除&#xff1f; .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {outline: none; }还要去除阴影添…

C#一些面试知识题

1.简述 private、 protected、 public、internal 修饰符的访问权限答&#xff1a;private&#xff1a;私有成员, 在类的内部才可以访问(只能从其声明上下文中进行访问)。 protected&#xff1a;保护成员&#xff0c;该类内部和从该类派生的类中可以访问。 Friend&#xff1a;友…

vue加载时闪现模板语法-处理方法

问题&#xff1a;使用VUE时&#xff0c;页面加载瞬间&#xff0c;会闪现模板语法&#xff0c;例如{{ item.name }}等 解决办法&#xff1a; 1、可以通过VUE内置的指令v-cloak解决这个问题&#xff08;推荐&#xff09; 具体实现&#xff1a; <ul v-cloak v-for"ite…

java数组 —(8)

1.数组的创建与元素赋值&#xff1a; 杨辉三角&#xff08;二维数组&#xff09;、回形数&#xff08;二维数组&#xff09;、6个数&#xff0c;1-30之间随机生成且不重复。 2.针对于数值型的数组&#xff1a; 最大值、最小值、总和、平均数等 3.数组的赋值与复制 int[] a…

idea启动tomcat时报错:Error during artifact deployment. See server log for details.

Error during artifact deployment. See server log for details. 这个很多人都找不出来&#xff0c;原因无非2个&#xff1a; 一、jar 包有有些没能识别&#xff0c;tomcat没有配置好&#xff01; 二、这个一般代码错了&#xff1a; 除了看 server 的报错&#xff0c;别忘了看…

java运算符 —(9)

1.理解&#xff1a; ① 定义在java.util包下。 ② Arrays:提供了很多操作数组的方法。 2.使用&#xff1a; //1.boolean equals(int[] a,int[] b):判断两个数组是否相等。int[] arr1 new int[]{1,2,3,4};int[] arr2 new int[]{1,3,2,4};boolean isEquals Arrays.equals(a…

css 三角角标样式

.sanjiao {width: 0px;height: 0px;overflow: hidden;border-width: 100px;border-color: red transparent transparent transparent; border-style: solid dashed dashed dashed; }

leetcode 279 四平方定理

可以用四平方和定理&#xff1a;任意一个正整数都可以表示为4个以内整数的平方和。 如果一个数含有因子4&#xff0c;那么我们可以把4都去掉&#xff0c;并不影响结果。比如&#xff1a;8去掉4&#xff0c;12去掉3&#xff0c;返回的结果都相同。 如果一个数除以8余7&#xff0…

java类与对象 —(10)

1.面向对象学习的三条主线&#xff1a; 1.Java类及类的成员&#xff1a;属性、方法、构造器&#xff1b;代码块、内部类2.面向对象的大特征&#xff1a;封装性、继承性、多态性、(抽象性)3.其它关键字&#xff1a;this、super、static、final、abstract、interface、package、…

RESTful API 编写规范

基于一些不错的RESTful开发组件&#xff0c;可以快速的开发出不错的RESTful API&#xff0c;但如果不了解开发规范的、健壮的RESTful API的基本面&#xff0c;即便优秀的RESTful开发组件摆在面前&#xff0c;也无法很好的理解和使用。下文Gevin结合自己的实践经验&#xff0c;整…

Python2与Python3的区别

Python2与Python3的区别 1) 核心类差异 Python3 对 Unicode 字符的原生支持。 Python2 中使用 ASCII 码作为默认编码方式导致 string 有两种类型 str 和 unicode&#xff0c;Python3 只 支持 unicode 的 string。Python2 和 Python3 字节和字符对应关系为&#xff1a; python2p…

JavaScript-内存空间

深入了解js这门语言后&#xff0c;才发现它有着诸多众所周知的难点&#xff08;例如&#xff1a;闭包、原型链、内存空间等&#xff09;。有的是因为js的设计缺陷导致的&#xff0c;而有的则是js的优点。不管如何&#xff0c;总需要去学会它们&#xff0c;在学习过程中我觉得只…

java类的结构1: 属性 —(11)

类的设计中&#xff0c;两个重要结构之一&#xff1a;属性 对比&#xff1a;属性 vs 局部变量 1.相同点&#xff1a; 1.1 定义变量的格式&#xff1a;数据类型 变量名 变量值1.2 先声明&#xff0c;后使用1.3 变量都其对应的作用域 2.不同点&#xff1a; 2.1 在类中声明的…

GXU - 7D - 区间求和 - 前缀和

https://oj.gxu.edu.cn/contest/7/problem/D 描述 有一个所有元素皆为0的数组A&#xff0c;有两种操作&#xff1a; 1 l r x表示将A区间[l,r]内所有数加上x&#xff1b; 2 l r表示将A区间[l,r]内从左往右数第i个数加上i&#xff1b; 给出m个操作&#xff0c;请输出操作结束后A中…

javascript-排序算法

插入排序 算法描述&#xff1a; 1. 从第一个元素开始&#xff0c;该元素可以认为已经被排序 2. 取出下一个元素&#xff0c;在已经排序的元素序列中从后向前扫描 3. 如果该元素&#xff08;已排序&#xff09;大于新元素&#xff0c;将该元素移到下一位置 4. 重复步骤 3&am…

DPDK并行计算

参考文献&#xff1a; 《深入浅出DPDK》 https://www.cnblogs.com/LubinLew/p/cpu_affinity.html ...................................................................... 前言&#xff1a; 处理器提高性能主要是通过两个途径&#xff0c;一个是提高IPC&#xff08;CPU每一时…

Highcharts图表-ajax-获取json数据生成图表

重点说明此代码是针对一个报表显示多个项对比显示。 直接贴代码&#xff1a;web端 <script type"text/JavaScript" src"js/jQuery/jquery-1.7.2.js"></script> <script type"text/javascript" src"j…

关于RGBDSLAMV2学习、安装、调试过程

Step&#xff11;&#xff1a;https://github.com/felixendres/rgbdslam_v2/wiki/Instructions-for-Compiling-Rgbdslam-(V2)-on-a-Fresh-Ubuntu-16.04-Install-(Ros-Kinetic)-in-Virtualbox 照着这个instructions安装好 rgbdslamv2&#xff0c;并且在安装的过程中&#xff0c;…