JQuery 源码解析 · extend()详解

前言：最近想重写一个dropdown插件，于是想到了使用jquey实现插件，于是重温了一波$.extend()的知识，然后总结了这篇笔记

正文：

1. $.extend(src) 

• jQuery.extend(  target, object1 [, objectN ] )

　　该方法将src合并到jquery的实例对象中去　

　　下面是一个例子：

      var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dtarget 目标参数 

　　这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：

   　 var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 

　　那么合并后的结果,同名属性会被后面的对象所覆盖

console.log(result)
>> {name:"Jerry",age:21,sex:"Boy"}

　　在ES6中，实现这种方法有一种更为简单的方法,利用点扩展运算符

var person1={name:"Tom",age:21}
var person2={name:"Jerry",sex:"Boy"}) 

person1={...(person1),...(person2)}

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

 　　经过浅拷贝后，banana属性是对象类型，属于引用类型，指向object2的banana对象，所以没有了weight属性

　　我们再看一下，如果是深度拷贝，则输出结果为：

$.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的全局对象中去

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);