JQuery 源码解析 · extend()详解

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

正文：

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

巴特西

JQuery 源码解析 · extend()详解

最新文章

热门文章