深入学习jquery源码之extend()

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:待合并到第一个对象的对象。

使用:

合并 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" }

合并 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" }

$.extend(item)

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

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

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

  $.SayHello(“Olive”);

extend(result,item1,item2…..)

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

(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,……)

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

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

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

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

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)

使用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的源码实现

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

猜你喜欢

转载自blog.csdn.net/qq_35029061/article/details/85225143