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