$.extend()方法和(function($){...})(jQuery)详解
来源:互联网 发布:网络暴力乔任梁 编辑:程序博客网 时间:2024/05/20 06:07
1 $.extend()
因为项目中有些地方看到有用到这个方法,当时也不知道是什么意思,见的多了就想了解一下。原来这个方法还是挺有用的,多用在编写插件,当然,它本身也有一些重载原型。
1.1 extend(result,item1,item2…..)
这里这个方法主要用来合并,将所有的参数项都合并result中,并返回result,但是这样就会破坏result的结构。
1.2 extend({},item1,item2,……)
用这个方法,可以将所得的结果全部合并在{}中,并返回,而且还不会破坏原有的项的结构。
示例:
Var item={name:”olive”,age:23};
Var item1={name:”Momo”,sex:”gril”};
Var result=$.extend({},item,item1);
结果:
Result={name:”Momo”,age:23,sex:”gril”};
说明:
以上的结果表明extend方法将所有的项都合并到了{}中,但是,细心一点就会发现,其中item1中的name:“Momo” 将item中的name:“olive”给覆盖了,这是怎么回事?请接着往下看。
1.3 extend(bool,{},item1,item2….)
Extend方法还有带bool型参数的重载。
bool型参数为true表示深拷贝,为false时表示浅拷贝。具体可以通过一下示例来说明:
示例:
var item={name:“olive”,age:23,address{provice:”河南”,city:”郑州”}};
var item1={sex:”girl”,address{city:”北京”}};
var result=$.extend(true,item,item1);
var result1=$.extend(false,item,item1);
结果:
Result={name:“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};
Result1={name:“olive”,age:23,sex:”gril”,address:{ city:”北京”}};
说明:
以上结果说明,当参数为ture时,即为深拷贝,当子项item1中的子项有与item中的子项相同属性的值不一样时,item1中子项的值会将item子项中的值给覆盖,当子项item1的属性跟item中的属性不同时,会与item进行合并。
当参数为false时,子项item1中的子项中与item中的子项属性相同时,item1中子项的属性值会将item中的值给完全覆盖。
1.4 $.extend(item)
该方法是将item合并到Jquery的全局对象中去,相当于为Jquery全局对象添加了一个
静态方法(对应这里的静态方法,当然还有实例方法,在后边有介绍)。
示例:
$.extend({SayHello:function(value){alert(“hello “+value);}});
这样写过之后,就可以直接调用SayHello方法:
$.SayHello(“Olive”);
说明:该方法相当于为Jquery类添加了新的方法。
1.5 $.fn.extend(item)
上边提到的$.extend(item)说是为Jquery类添加了静态方法,那么这里的$.fn.extend(item
)就是为每一个实例添加一个实例方法了。
示例:
$.fn.extend({hello:function(value){alert(“hello “+value);}});
这样写过之后,在获取每一个示例之后,都可以调用该方法:
$(“#id”).hello(“Olive”);
2.(function($){….})(jQuery)
初次看到这种写法时,一头雾水,不知所云。在网上查找了一些资料之后才有点明白。我们先看第一个括号里边的内容:function($){….},这不就是一个匿名的函数吗?但是它的形参比较奇怪,是$,这里主要是为了不与其它的库冲突。这样我们就比较容易理解第一个括号内的内容就是定义了一个匿名函数,我们在调用函数的时候,都是函数名后边加上括号以及实参,但是由于操作符的优先级我们定义的匿名函数也需要用()括起来。
现在我想大家已经很清楚这句话是什么意思了吧。第一个括号表示定义了一个匿名函数,然后第二个函数表示为该函数传递的参数,整个结合起来意思就是,定义了一个匿名函数,然后又调用该函数,该函数的实参为jQuery。
相当于:function fun($){…};fun(jQuery);
这种方法多用于存放开发的插件,执行其中的代码时,Dom对象并不一定加载完毕。于此相反的是$(function(){}),这种方法在使用时页面的Dom对象已经加载完毕了。事实上该方法的全写是:$(document).ready(function(){});
解释一下究竟“(function($){...})(jQuery)”该怎样理解:
代码一:
<script type="text/javascript">(function(name){alert(name);})("GaoHuanjie");</script>
说明:在浏览器中运行上面代码,会弹出一个对话框,对话框的内容为GaoHuanjie。
上面代码中执行的JavaScript脚本和“(function($){...})(jQuery)”是一样的,也就是说“(function($){...})(jQuery)”中的函数会自动被执行,那么究竟该怎样理解“(function($){...})(jQuery)”呢?“(function($){...})(jQuery)”实际上表示的是已处于调用状态的匿名函数:function($){...}是定义的匿名函数,参数为$(之所以将参数声明为$是为了不与其他库冲突);为了调用该函数则在该匿名函数的后面添上了括号和实参(这里为jQuery),但又由于操作符的优先级,函数本身也需要用括号,所以又为匿名函数添加了括号。
释疑解惑:
一、我运行下面代码为什么报错——jQuery is not defined:
<script type="text/javascript">(function($){alert($);})(jQuery);</script>
嗯嗯,浏览器在解析上述js脚本时确实会出现问题,假如为jQuery添加英文双引号,再次使用浏览器运行上述脚本则不会出错,为什么不加就会出错呢,呵呵呵,其实这里的jQuery还是一个变量,如果为上述代码引入jQuery库,再次使用浏览器运行上述代码则不会出现问题:
<script type="text/javascript" src="./jquery-1.6.2.js"></script><script type="text/javascript">(function($){alert($);})(jQuery);</script>
在引入jQuery库后之所以不会出错是因为jQuery库中定义了jQuery变量。
二、和$(function(){ })相比,(function($){...})(jQuery)的执行时机也是在网页DOM加载完毕后才执行吗?
不是的,比如如下例子:
<script type="text/javascript">(function(){alert(document.getElementById("name").value);})();</script>
上述例子在浏览器中运行的时候会报错,究其原因(function(){...})()函数的执行时机并不是在DOM加载完毕后才执行,而是随着页面自上而下来执行,如果将其改成如下代码则再次使用浏览器运行脚本则不会出现问题:
<script type="text/javascript">(function(){alert(document.getElementById("name").value);})();</script>
一句话:“$(function(){ });”用于存放操作DOM对象的代码,执行其中代码时DOM对象已存在;“(function(){})(jQuery);”用于存放开发插件的代码,执行其中代码时DOM不一定存在。
- $.extend()方法和(function($){...})(jQuery)详解
- $.extend()方法和(function($){...})(jQuery)详解
- $.extend()方法和(function($){...})(jQuery)详解
- $.extend()方法和(function($){...})(jQuery)详解
- $.extend()方法和(function($){...})(jQuery)详解
- $.extend()方法和(function($){...})(jQuery)详解
- $.extend()方法和(function($){...})(jQuery)详解
- $.extend()方法和(function($){...})(jQuery)
- 每日学习心得:$.extend()方法和(function($){...})(jQuery)详解
- 每日学习心得:$.extend()方法和(function($){...})(jQuery)详解
- 每日学习心得:$.extend()方法和(function($){...})(jQuery)详解
- 每日学习心得:$.extend()方法和(function($){...})(jQuery)详解
- 每日学习心得:$.extend()方法和(function($){...})(jQuery)详解
- $.extend()和(function($){….})(jQuery)
- jquery.extend() 方法详解
- jQuery extend()和jQuery.fn.extend()详解
- jquery的extend方法详解
- JQuery的extend方法详解
- Java小程序:模拟双色球开奖
- php面向对象中static静态属性和静态方法的调用
- 拉手网的话题检测与跟踪
- C#之Winform可执行文件和dll打包
- 《JVM故障诊断指南》之4 —— Java 8:从持久代到metaspace
- $.extend()方法和(function($){...})(jQuery)详解
- fmt 国际化 日期 数字 本地环境 字符编码 本地资源
- Unity 射线检测碰撞
- vs2013更新了代码,但是运行没效果
- 安卓xml绘图
- Windows下Redis安装和使用
- FatMouse and Cheese
- Hibernate关联关系映射(双向篇)
- 用angularjs遇到的坑