<学习笔记> jQuery.extend 函数详解

本文详细介绍了 JQuery 中的 extend 方法,包括基本用法、参数详解及如何实现深度复制等高级特性,并提供了多个实用示例。

JQuery的extend扩展方法:
      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
      一、Jquery的扩展方法原型是:

  extend(dest,src1,src2,src3...);
      它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。


      这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

 

      那么合并后的结果

result={name:"Jerry",age:21,sex:"Boy"}


      也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

      二、省略dest参数
      上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:
   1、$.extend(src)
   该方法就是将src合并到jquery的全局对象中去,如:

$.extend({ hello:function(){alert('hello');} });


   就是将hello方法合并到jquery的全局对象中。
   2、$.fn.extend(src)
   该方法将src合并到jquery的实例对象中去,如:

$.fn.extend({ hello:function(){alert('hello');} });

 

   就是将hello方法合并到jquery的实例对象中。

   下面例举几个常用的扩展实例:

$.extend({net:{}});

 

   这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{ hello:function(){alert('hello');} })


    这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

   三、Jquery的extend方法还有一个重载原型:  

extend(boolean,dest,src1,src2,src3...)


      第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true, {}, { name: "John", location: {city: "Boston",county:"USA"} }, { last: "Resig", location: {state: "MA",county:"China"} } );


      我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是: 

result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}

 

       也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

var result=$.extend( false, {}, { name: "John", location:{city: "Boston",county:"USA"} }, { last: "Resig", location: {state: "MA",county:"China"} } );


     那么合并后的结果就是:

result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
@startuml left to right direction skinparam rectangleBackgroundColor #E0E0E0 skinparam usecase { BackgroundColor #FFFFFF BorderColor #333333 } ' 完全隐藏所有构造型显示 skinparam stereotype { Visibility false } ' 直接为每个用例设置颜色 skinparam usecase { BackgroundColor<<blue>> #BBDEFB BorderColor<<blue>> #1976D2 BackgroundColor<<orange>> #FFCCBC BorderColor<<orange>> #E64A19 } actor 用户 as User rectangle "网络安全态势感知平台" { (登录系统) as UC1 <<blue>> (注册) as UC2 <<orange>> (查看安全态势仪表盘) as UC3 <<blue>> (查看实时告警) as UC4 <<orange>> ' ... 其余用例定义保持不变 (多源数据采集) as UC5 <<blue>> (数据解析与标准化) as UC6 <<orange>> (威胁情报融合) as UC7 <<blue>> (安全事件分析) as UC8 <<orange>> (风险监测与评估) as UC9 <<blue>> (修改风险阈值) as UC10 <<orange>> (异常行为检测) as UC11 <<blue>> (动态基线管理) as UC12 <<orange>> (终端安全管控) as UC13 <<blue>> (外设与端口管理) as UC14 <<orange>> (安全预警与通知) as UC15 <<blue>> (分级响应处置) as UC16 <<orange>> (态势评估报告生成) as UC17 <<blue>> (导出评估报告) as UC18 <<orange>> (攻击仿真测试) as UC19 <<blue>> (仿真结果分析) as UC20 <<orange>> (可视化图表交互) as UC21 <<blue>> (下钻分析) as UC22 <<orange>> } ' 关系定义保持不变... User --> UC1 : 登录 User --> UC3 : 查看仪表盘 User --> UC5 : 数据采集 User --> UC7 : 威胁融合 User --> UC9 : 风险评估 User --> UC11 : 异常检测 User --> UC13 : 终端管控 User --> UC15 : 预警通知 User --> UC17 : 报告生成 User --> UC19 : 攻击仿真 User --> UC21 : 图表交互 UC1 <.. UC2 : <<extend>> UC3 ..> UC4 : <<include>> UC5 ..> UC6 : <<include>> UC7 ..> UC8 : <<include>> UC9 <.. UC10 : <<extend>> UC11 ..> UC12 : <<include>> UC13 ..> UC14 : <<include>> UC15 ..> UC16 : <<include>> UC17 <.. UC18 : <<extend>> UC19 ..> UC20 : <<include>> UC21 ..> UC22 : <<include>> @enduml修改代码
最新发布
08-31
在PlantUML中 `<<>>` 一般用于定义版型,若要解决 `<<>>` 标签失败的问题,可以直接将代码里的 `<<>>` 及其内部内容去掉。以下是修改后的代码: ```plantuml @startuml left to right direction skinparam rectangleBackgroundColor #E0E0E0 skinparam usecase { BackgroundColor #FFFFFF BorderColor #333333 } ' 完全隐藏所有构造型显示 skinparam stereotype { Visibility false } actor 用户 as User rectangle "网络安全态势感知平台" { (登录系统) as UC1 (注册) as UC2 (查看安全态势仪表盘) as UC3 (查看实时告警) as UC4 (多源数据采集) as UC5 (数据解析与标准化) as UC6 (威胁情报融合) as UC7 (安全事件分析) as UC8 (风险监测与评估) as UC9 (修改风险阈值) as UC10 (异常行为检测) as UC11 (动态基线管理) as UC12 (终端安全管控) as UC13 (外设与端口管理) as UC14 (安全预警与通知) as UC15 (分级响应处置) as UC16 (态势评估报告生成) as UC17 (导出评估报告) as UC18 (攻击仿真测试) as UC19 (仿真结果分析) as UC20 (可视化图表交互) as UC21 (下钻分析) as UC22 } ' 关系定义保持不变... User --> UC1 : 登录 User --> UC3 : 查看仪表盘 User --> UC5 : 数据采集 User --> UC7 : 威胁融合 User --> UC9 : 风险评估 User --> UC11 : 异常检测 User --> UC13 : 终端管控 User --> UC15 : 预警通知 User --> UC17 : 报告生成 User --> UC19 : 攻击仿真 User --> UC21 : 图表交互 UC1 <.. UC2 : <<extend>> UC3 ..> UC4 : <<include>> UC5 ..> UC6 : <<include>> UC7 ..> UC8 : <<include>> UC9 <.. UC10 : <<extend>> UC11 ..> UC12 : <<include>> UC13 ..> UC14 : <<include>> UC15 ..> UC16 : <<include>> UC17 <.. UC18 : <<extend>> UC19 ..> UC20 : <<include>> UC21 ..> UC22 : <<include>> @enduml ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值