jQuery对象扩展方法(Extend)深度解析
时间:2022-04-24
本文章向大家介绍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);
- [自定义服务器控件] 第一步:文本框。
- 检查两个数据库里的表名、字段是否一致的一种方法
- 如何在Python中从零开始实现随机森林
- 基类、接口的应用——表单控件:一次添加、修改一条记录,一次修改多条记录。(上)
- 使命必达: 深入剖析WCF的可靠会话[协议篇](下)
- 分页控件和几个相关控件的源代码
- Python编程中的反模式
- Python机器学习库:Scikit-Learn简介
- 很简单的企业管理器---我写程序的方式,几个自定义控件。
- 使命必达: 深入剖析WCF的可靠会话[原理揭秘篇](上)
- 其实添加数据也可以这样简单——表单的第三步抽象(针对UI及后置代码)
- 为Symfony2和Redis正名,基于PHP的10亿请求/周网站打造
- 如何使用Python基线预测进行时间序列预测
- 如何使用统计显着性检验来解释机器学习结果
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 3分钟短文:Laravel路由加模型等于?
- TSF微服务无法查看JVM监控问题
- Mitmproxy 的安装与使用案例
- leetcode之Bigram分词
- TensorFlow2 开发指南 | 01 手写数字识别快速入门
- Spring 数据初始 H2 后进行数据查询提示 Schema not found 错误
- Discourse CentOS 8 全新安装手册
- H2 数据库插入时间的方法
- Spring 配置的 H2 控制台 frameOptions 导致无法访问
- Spring Boot 和 Hibernate 的 H2 数据库配置来进行启动测试
- Java时间处理-LocalDateTime简介
- iOS音视频接入 - TRTC iOS端真机日志导出
- jQuery根据填写的input的数值导出excel表格
- 小程序根据返回值英文渲染出对应的中文
- 小程序返回的时间戳转化成时间