JQuery 源码解析 · extend()详解
1. $.extend(src)
该方法将src合并到jquery的实例对象中去
jQuery.extend( target [, object1 ] [, objectN ] )
下面是一个例子:
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dtarget 目标参数
这样就可以将src1,src2,src3…进行合并,然后将合并结果返回给newSrc了。如下例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果,同名属性会被后面的对象所覆盖
result={name:"Jerry",age:21,sex:"Boy"}
jQuery.extend( [deep ], target, object1 [, objectN ] )
第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,看下面这个例子
.(深层拷贝和浅层拷贝,可以参考这篇文章)var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; // Merge object2 into object1 $.extend( object1, object2 ); //console.log(JSON.stringify( object1 ); {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
我们再看一下,如果是深度拷贝,则输出结果为:
$.extend( true, object1, object2 ); //console.log(JSON.stringify( object1 ); {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
2. $.fn.extend(src)
该方法就是将src合并到jquery的全局对象中去
```javascript
jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// Use the newly created .check() method
$( "input[type='checkbox']" ).check();
```
扩展,进阶
利用这个函数,我们可以来写JQuery插件
var Dropdown= function(element) {
var self=this;
var target=$(element).data("target");
self.$element=$(element);
self.$target=$(target);
self.$element.on('mouseleave',function(){
self.close(self.$target);
});
self.$element.on('mouseenter',function(){
self.open(self.$target);
});
}
//定义haorooms的方法
Dropdown.prototype = {
open: function($target) {
return $target.show();
},
close:function($target){
return $target.hide();
}
}
$.fn.myPlugin = function() {
//创建Dropdown的实体
var dropdown= new Dropdown(this);
}
插件的使用
$(function() {
$('.dropdown').myPlugin();
})
然后用一个即使匿名函数,将我们的代码包裹起来,防止污染全局环境、防止其他地方使用到了 我们自定义插件的对象。
;(function($,window,document,undefined){
//我们的代码。。
})(jQuery,window,document);