<学习笔记> 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
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值