jQuery对象扩展方法(Extend)深度解析
1、这几天在写自己的Js工具类库,所以在编写对象扩展方法,参考了jQuery的对象扩展方法,在编写该方法前,需要掌握js深拷贝和浅拷贝的相关知识,下面是jQuery3.2.1版本对象扩展方法的源码:
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, 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 = Array.isArray( copy ) ) ) ) { if ( copyIsArray ) {
copyIsArray = false;
clone = src && Array.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;
};
下面是我的解释代码:
zcHtmlHelper.extend=zcHtmlHelper.fn.extend=function(){
var target=arguments[0]||{},//第一个参数
deep = false,//是否开启深拷贝功能,默认不是
i=1,
length=arguments.length,
options,
name,
src,
copy,
copyIsArray,
clone; //处理深拷贝场景
if(typeof target==="boolean"){
deep=true;
target=arguments[i] || {};//将紧随其后的存放拷贝值的集合
i++;//加1的原因是,一旦开启深拷贝功能,那么传入的参数就至少有两个,一个是深拷贝的开关另一个是扩展参数,否则当只传如一个深拷贝的开关,那么方法将返回空集合
} if(typeof target!=="object"){
target = {};
} //这个判断有两种情况
//1、当传入的参数只有一个(不能是true或者false),那么就扩展当前命名空间
//2、当传入的参数有个两个,分别是深拷贝的开关(true或者false)和扩展参数,那么就扩展当前命名空间
if(i==length){
target=this;
i--;
}
for(;i<length;i++){
//只处理非空和非null的值
if((options=arguments[i])!=null){
for(name in options){
src=target[name];//判断传入的参数(存放拷贝值的集合)
copy=options[name]; //当嵌套数组或者对象深拷贝完毕,跳出当前属性,开始拷贝下一属性
if ( target === copy ) {
continue;
} //如果传入的合并对象里面嵌套数组或者对象,那么递归扩展对象
if(deep && copy && (zcHtmlHelper.isPlainObject(copy) || (copyIsArray = Array.isArray(copy))))
{
if ( copyIsArray ) {
copyIsArray = false;
clone = src && Array.isArray( src ) ? src : [];
}
else {
clone = src && zcHtmlHelper.isPlainObject( src ) ? src : {};
}
target[ name ] = zcHtmlHelper.extend( deep, clone, copy );
}
else if(copy!=undefined)
{
target[name]=copy;//覆盖添加
}
}
}
}
return target;
}
2、代码验证
(1)、浅拷贝代码:
var names=[1,3,4,5,6];
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { names: names};
var settings = zcHtmlHelper.extend(false,defaults,options);
alert(names==settings.names);
首先对象拷贝成功,settings是两个对象的合集,但是name数组对象和settings.name属性是同一个引用,所以,这是前拷贝
(2)、深拷贝代码:
var names=[1,3,4,5,6];
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { names: names};
var settings = zcHtmlHelper.extend(true,defaults,options);
alert(names==settings.names);
console.log(settings);
jQuery对象扩展方法(Extend)深度解析的更多相关文章
- 为Jquery类和Jquery对象扩展方法
转:https://www.cnblogs.com/keyi/p/6089901.html jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend( ...
- JS,JQuery的扩展方法
转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展 ...
- jQuery插件扩展方法
jQuery为扩展插件提拱了两个方法,分别是: jQuery.extend(object) —— 给jQuery对象添加方法. jQuery.fn.extend(object) —— 为扩展jQuer ...
- Jquery自定义扩展方法(二)--HTML日历控件
一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看 ...
- jquery源码解析:jQuery扩展方法extend的详解
jQuery中要扩展方法或者属性都是通过extend方法实现的.所谓的jQuery插件也是通过extend方法实现的. jQuery.extend扩展的是工具方法,也就是静态方法.jQuery.fn. ...
- jquery和zepto的扩展方法extend
jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...
- jQuery对象进行方法扩展
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>01 ...
- jquery的扩展之extend函数
1.$.extend()使用 作用:扩展全局的函数 $.extend({ sayHellow:function(pram){ alert(pram+"hellow"); } }) ...
- Jquery自定义扩展方法(一)
jquery是一款流行的JS框架,自定义JS方法,封装到Jquery中,调用起来也挺方便的,怎么写Jquery扩展方法那,网上翻阅了一部分代码,其实也挺简单的: 方式一: (jQuery.fn.set ...
随机推荐
- 虚拟机CentOS6.5搭建samba服务器实现文件共享
Samba是SMB的一种实现方法,主要用来实现Linux系统的文件和打印服务.Linux用户通过配置使用Samba服务器可以实现与Windows用户的资源共享:而守护进程smbd和nmbd是Samba ...
- csdn的blog可以直接导入内含图片的word文档吗?
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- eclipse启动tomcat出现内存溢出错误 java.lang.OutOfMemoryError: PermGen space
发布工程后,启动tomcat出现如下内存溢出错误: java.lang.OutOfMemoryError: PermGen space ... java.lang.OutOfMemoryError: ...
- POJ 3685 Matrix (二分套二分)
Matrix Time Limit: 6000MS Memory Limit: 65536K Total Submissions: 8674 Accepted: 2634 Descriptio ...
- Centos 下部署tomcat多实例
基础环境及JDK就不多说了,下面的目录结构以如下为准: 根目录-apps 根目录-apps--tomcat 根目录-apps--ins1 根目录-apps--ins2 ================ ...
- mybatis如何直接 执行传入的任意sql语句 并按照顺序取出查询的结果集
需求: 1.直接执行前端传来的任何sql语句,parameterType="String", 2.对于任何sql语句,其返回值类型无法用resultMap在xml文件里配置或者返回 ...
- kubernetes 滚动更新发布及回滚
基本命令 记录历史 --record kubectl apply -f **** --record 查看当前状态 kubectl rollout status deployment/demo -w ...
- Mahout的taste里的几种相似度计算方法
欧几里德相似度(Euclidean Distance) 最初用于计算欧几里德空间中两个点的距离,以两个用户x和y为例子,看成是n维空间的两个向量x和y, xi表示用户x对itemi的喜好值,yi表示 ...
- 【MVC】输出HTML内容,不输出HTML标签
第一种方式: @Html.Raw("内容") 第二种方式 @(new HtmlString("<h1>abcd</h1>")) 第三种方 ...
- 企业IT架构转型之道 读书笔记-1.阿里巴巴集团中台战略引发的思考
前言 1.为什么选择看这本书 2.Supercell公司的开发模式 3.“烟囱式”系统建设模式弊端,及产生这种现象的原因 4.IT人员在企业信息中心的组织职能 一.为什么选择看这本书 多日没有更新博客 ...