明白jquery的$.extend

邃晓jquery的$.extend

本日在写js插件历程当中须要运用扩大对象的要领，便想到了jQuery.extend这个要领，但又不甚了解，故去查了下官方API文档，自身也举行了响应尝试，现将所得总结以下：

$.extend和$.fn.extend的相干用法

jQuery.fn

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//….
//……
};


由上述代码能够看出$.fn是相当于$.prototype的，而jQuery是一个封装很好的类，因而当我们运用$.fn时相当于给jQuery这个类增加成员函数，增加后jQuery类的实例即能够运用这个“成员函数”，比方当我们运用$(&＃8220;#input-demo&＃8221;)时相当于创建了一个jQuery实例，当我们要开辟一个插件时，比方做一个特别的编辑框，当它猎取核心时弹框显现当前输入框的内容，我们能够做以下操纵：

$.fn.extend({
alertContentWhenFocus: function() {
$(this).on('focus', function() {
alert($(this).val());
)
}
})
$("#input-demo").alertContentWhenFocus();


$.extend(object)

当想给jQuery类增加静态要领时，我们能够做以下操纵：

$.extend({
min: function(x, y) {return x max: function(x, y) {return x > y ? x : y;}
})


jQuery.extend([deep], target , object1 , objectN );

该要领可用于一个或别的多个对象来扩大个中一个对象，并返回被扩大的对象，当我们供应两个或两个以上的对象给$.extend时，对象一切的属性将会增加到目的对象,因而目的对象的参数将会被修正，若我们想保存原对象，我们能够通报一个空对象作为目的对象。当目的对象为空时，jQuery对象将会被默以为目的对象，这时候相当于我们在jQuery的定名空间下增加新的功用，这是罕见的插件开辟形式。

• deep:
  可选属性,当其值为true时，递归兼并（又叫做深拷贝），当缺省时默以为false，是不会举行递归的兼并操纵的，但不可第一个参数通报false

• target:
  目的对象，将附加对象所包括的分外属性通报给目的对象作为新的参数，假如它是唯一的参数，这也为著目的参数被省略，此时，jQuery对象自身将被默以为目的对象，将扩大jQuery的定名空间，当我们想向jQuery中增加新函数时须要用到

• object1:一个对象，它包括分外的属性兼并到第一个参数 objectN:包括分外的属性兼并到第一个参数

实例

var object = $.extend({}, object1, object2);

兼并object1和object2对象，并在不修正object1对象的状况，兼并后效果将会赋值给object

var settings = {first:'hello', second: 'world'};
var optiOns= {first:'hello', second: 'Javascript',third: 'nodeJs'};
var results = $.extend({}, settings, options);


输出：results 为 {first: &＃8220;hello&＃8221;, second: &＃8220;Javascript&＃8221;, third: &＃8220;nodeJs&＃8221;}

$.extend(obj1,obj2)

兼并两个对象，并修正第一个对象

var obj1 = {first: 1, second: {height: 178, weight: 70,length:100}};
var obj2 = {second: {height:180, weight:65, width: 90}, third: 90};
$.extend(obj1, obj2);


输出效果为：{first: 1, second: {height:180,weight:65, width: 90}, third: 90}

仔细的读者能够会发明，输出的效果和我们料想的效果彷佛有点差别，输出效果的second属性与目的对象的second属性比拟少了length这个属性，原因是在这类状况下，$.extend()的兼并操纵不是递归的，这意味着当假如目的对象的属性自身是一个对象或许数组，那末第二个对象雷同的key属性的value值将会掩盖第一个对象的value值，申明两个对象雷同key的value值不是兼并的关联，而是掩盖与被掩盖的关联。

$.extend(true,obj1,obj2)

当第一个值为true时，那末在对象上将会举行递归的兼并，而不是简朴的替代关联了，如许说能够有点深邃，下面看个例子就邃晓了。

var obj1 = {first: 1, second: {height: 178, weight: 70}};
var obj2 = {second: {height:180, weight: 65, width: 90}, third: 90};
$.extend(true,obj1,obj2)


输出效果为:{first: 1, second: Object, third: 90}

有注重的读者应该会发明，这个例子和上述的例子基本是雷同的，但效果倒是我们料想的效果了，当$.extend()的第一个参数为true时，在对象实行的兼并将会是递归的兼并，是比较兼并的，而不是简朴的替代与掩盖。

[跋文]：这篇博文一样消费了挺久的时候，是自身在事情空闲之余抽闲征采材料创作的。在撰写的历程当中，我发明一个征象，一个并不难的知识点，若自身在网上征采材料看懂邃晓并不须要消费若干时候，但如果要将自身所邃晓撰写成博文却要难上数倍，首先要理清自身表达的思绪，要将自身邃晓的历程梳理清晰，由浅至深连系例子将这个知识点剖析透辟，以求读者在浏览这篇文章的历程当中能消费更短的时候读懂。我不是一个智慧的人，所以我看邃晓一个知识点须要消费的工夫能够会比其他人更长些，因而写出来的东西每每烦琐些，愿望这篇博文对人人有所协助。以上皆个人鄙意，请笑纳！