首页 > 编程语言 >深入学习jquery源码之extend()

深入学习jquery源码之extend()

时间:2023-02-23 22:06:07浏览次数:40  
标签:jquery name extend item 源码 var true target


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

概述:

用一个或多个其他对象来扩展一个对象,返回被扩展的对象。

如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。 未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。

参数:

target,[object1],[objectN]  Object,Object,Object

target:一个对象,如果附加的对象被传递给这个方法将那么它将接收新的属性,如果它是唯一的参数将扩展jQuery的命名空间。

object1:待合并到第一个对象的对象。

objectN:待合并到第一个对象的对象。

 

[deep],target,object1,[objectN] Object,Object,Object,Object

deep:如果设为true,则递归合并。

target:待修改对象。

object1:待合并到第一个对象的对象。

objectN:待合并到第一个对象的对象。

 

使用:

$.extend(item)

该方法是将item合并到Jquery的全局对象中去,相当于为Jquery全局对象添加了一个静态方法

$.extend({SayHello:function(value){alert(“hello “+value);}});

这样写过之后,就可以直接调用SayHello方法:

$.SayHello(“Olive”);

也可以创建对象

var option = $.extend({elem:  "#" + _self.container, 
url : _self.url,
cols: _self.title,
method: RequestMethod.METHOD_POST,
id : _self.tableId,
even: true,
page: true, //是否显示分页
pageNum: 1,
limit: _self.pageSize, //每页默认显示的数量
limits:[5,10,15,20,30],
done:function(res, curr, count){
debugger;
if(_self.afterDone && $.isFunction(_self.afterDone)){
_self.afterDone(res, curr, count);
}
}}, _self.layOption);
//展示已知数据
layui.table.render(option);

深入学习jquery源码之extend()_jQuery

深入学习jquery源码之extend()_ci_02

 

extend(result,item1,item2…..)

这里这个方法主要用来合并,将所有的参数项都合并result中,并返回result,但是这样就会破坏result的结构。

合并 settings 和 options,修改并返回 settings。

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
settings == { validate: true, limit: 5, name: "bar" }
(function ($) { /*** 统一设置datagrid 的一些默认参数*/
$.extend($.fn.datagrid.defaults,
{
rownumbers: true,
fit: true,
pagination: true,
striped: true,
method: "post",
pageSize: 20,
pageList: [20, 50, 100]
});
})(jQuery);
$.extend($.fn.datagrid.methods, {    
addEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.editor;
});
} else {
//获取datagrid字段的属性
var e = $(jq).datagrid('getColumnOption', param.field);
//给编辑器赋值
e.editor = param.editor;
}
},
removeEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
});
} else {
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {};
}
}
});
$.get(form_url + key, function (data) {
$submit_form.form("load", data.data.installCheckVo );
$("#dglist2").datagrid({ data: data.data.deviceUserList });
if(pagetype == "show"){
debugger;
$("#dglist2").datagrid('removeEditor', 'deviceName');
$("#dglist2").datagrid('removeEditor', 'deviceNumber');
$("#dglist2").datagrid('removeEditor', 'assetsNumber');
}
});

 

extend({},item1,item2,……)

用这个方法,可以将所得的结果全部合并在{}中,并返回,而且还不会破坏原有的项的结构。

合并 defaults 和 options, 不修改 defaults。

如果想要得到合并的结果却又不想修改结构, 也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
Var item={name:”olive”,age:23};

Var item1={name:”Momo”,sex:”gril”};

Var result=$.extend({},item,item1);

结果:

Result={name:”Momo”,age:23,sex:”gril”};

以上的结果表明extend方法将所有的项都合并到了{}中,但是其中item1中的name:“Momo” 将item中的name:“olive”给覆盖了

var defaults = {};
this.settings = $.extend({},defaults,options);

深入学习jquery源码之extend()_递归_03

深入学习jquery源码之extend()_ci_04

var defaults = {
fieldCode: "gfyId",
url: "../../Security/selector/user/PublicServiceUserList.html?s=" + Math.random(),
multi: false,
code: "gfyId,gfyIdName",
keyRespField: "gfyId,id",
dictCode: "publicserviceName",
area: ['70%','70%']
};
this.settings = $.extend({},defaults,options);

深入学习jquery源码之extend()_ci_05

深入学习jquery源码之extend()_jQuery_06

 

extend(bool,{},item1,item2….)

重载原型,深度拷贝

如果为true将src中的嵌套子对象也进行合并

如果为false后面的子对象将完全覆盖前面的子对象

Extend方法还有带bool型参数的重载。bool型参数为true表示深拷贝,为false时表示浅拷贝。具体可以通过一下示例来说明:

示例:

var item={name:“olive”,age:23,address{provice:”河南”,city:”郑州”}};

var item1={sex:”girl”,address{city:”北京”}};

var result=$.extend(true,item,item1);

var result1=$.extend(false,item,item1);

结果:

Result={name:“olive”,age:23,sex:”gril”,address:{provice:”河南”,city:”北京”}};

Result1={name:“olive”,age:23,sex:”gril”,address:{ city:”北京”}};

说明:

以上结果说明,当参数为ture时,即为深拷贝,当子项item1中的子项有与item中的子项相同属性的值不一样时,item1中子项的值会将item子项中的值给覆盖,当子项item1的属性跟item中的属性不同时,会与item进行合并。

当参数为false时,子项item1中的子项中与item中的子项属性相同时,item1中子项的属性值会将item中的值给完全覆盖。

options: $.extend(true, {}, $.fn.gridsub.defaults, options)

深入学习jquery源码之extend()_ci_07

深入学习jquery源码之extend()_递归_08

深入学习jquery源码之extend()_jQuery_09

深入学习jquery源码之extend()_递归_10

使用extend还可以创建对象

var option = $.extend({elem:  "#" + _self.container, 
url : _self.url,
cols: _self.title,
method: RequestMethod.METHOD_POST,
id : _self.tableId,
even: true,
page: true, //是否显示分页
pageNum: 1,
limit: _self.pageSize, //每页默认显示的数量
limits:[5,10,15,20,30],
done:function(res, curr, count){
debugger;
if(_self.afterDone && $.isFunction(_self.afterDone)){
_self.afterDone(res, curr, count);
}
}}, _self.layOption);
//展示已知数据
layui.table.render(option);

深入学习jquery源码之extend()_jQuery

深入学习jquery源码之extend()_ci_02

 

 

 

jQuery的源码实现

jQuery.extend = jQuery.fn.extend = function () {
var src, copyIsArray, copy, name, options, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;

// Handle a deep copy situation
if (typeof target === "boolean") {
deep = target;

// skip the boolean and the target
target = arguments[i] || {};
i++;
}

// Handle case when target is a string or something (possible in deep copy)
if (typeof target !== "object" && !jQuery.isFunction(target)) {
target = {};
}

// extend jQuery itself if only one argument is passed
if (i === length) {
target = this;
i--;
}

for (; i < length; i++) {
// Only deal with non-null/undefined values
if ((options = arguments[i]) != null) {
// Extend the base object
for (name in options) {
src = target[name];
copy = options[name];

// Prevent never-ending loop
if (target === copy) {
continue;
}

// Recurse if we're merging plain objects or arrays
if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];

} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}

// Never move original objects, clone them
target[name] = jQuery.extend(deep, clone, copy);

// Don't bring in undefined values
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}

// Return the modified object
return target;
};

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

标签:jquery,name,extend,item,源码,var,true,target
From: https://blog.51cto.com/u_11837698/6081931

相关文章

  • 深入学习jquery源码之上传附件插件的实现
    深入学习jquery源码之上传附件插件的实现/***上传附件通用JS(基于layerUI)*/;(function($){vardefaults={url:"/attach/upload",fieldCode:"ab......
  • 深入学习jquery源码之attr()与removeAttr()
    深入学习jquery源码之attr()与removeAttr()attr(name|properties|key,value|fn)概述设置或返回被选元素的属性值。参数name String属性名称properties Map作为属性的“名/......
  • 深入学习jquery源码之jQuery的构造函数与实例化
    深入学习jquery源码之jQuery的构造函数与实例化创建jQuery对象的整个流程如下:1、调用$()方法;2、调用jQuery.prototype.init()构造函数;3、根据选择器不同返回不同的jQuery对......
  • 深入学习jquery源码之queue()与dequeue()
    深入学习jquery源码之queue()与dequeue()queue(element,[queueName])概述显示或操作在匹配元素上执行的函数队列参数element,[queueName] Element,Stringelement:检查附加......
  • 深入学习jquery源码之序列化表单
    深入学习jquery源码之序列化表单serialize()概述序列表表格内容为字符串。序列表表格内容为字符串,用于Ajax请求。<pid="results"><b>Results:</b></p><form><select......
  • 深入学习jquery源码之jQuery的核心参数
    深入学习jquery源码之jQuery的核心参数jQuery([selector,[context]])概述这个函数接收一个包含CSS选择器的字符串,然后用这个字符串去匹配一组元素。jQuery的核心功能都是......
  • 深入学习jquery源码之is()与not()
    深入学习jquery源码之is()与not()is(expr|obj|ele|fn)概述根据选择器、DOM元素或jQuery对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。......
  • 深入学习jquery源码之arguments和callee
    深入学习jquery源码之argumentsjs中的函数其实是对象,函数名是对Function对象的引用,arguments这个对象不能显式创建,arguments对象只有函数开始时才可用。每创建一个函数,该......
  • 深入学习jquery源码之filter()与find()
    深入学习jquery源码之filter()与find()filter(expr|obj|ele|fn)概述筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式参数expr Strin......
  • 深入学习jquery源码之prop()与removeProp()
    深入学习jquery源码之prop()与removeProp()prop(name|properties|key,value|fn)概述获取在匹配的元素集中的第一个元素的属性值。随着一些内置属性的DOM元素或window对象,如......