理解jquery的$.extend

理解jquery的$.extend

今日在写js插件过程中需要使用扩展对象的方法,便想到了jQuery.extend这个方法,但又不甚了解,故去查了下官方API文档,自己也进行了相应尝试,现将所得总结如下:

$.extend和$.fn.extend的相关用法

jQuery.fn

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {//….
//……
};

由上述代码可以看出$.fn是相当于$.prototype的,而jQuery是一个封装很好的类,因此当我们使用$.fn时相当于给jQuery这个类添加成员函数,添加后jQuery类的实例即可以使用这个“成员函数”,例如当我们使用$("#input-demo")时相当于创建了一个jQuery实例,当我们要开发一个插件时,例如做一个特殊的编辑框,当它获取焦点时弹框显示当前输入框的内容,我们可以做如下操作:

$.fn.extend({
  alertContentWhenFocus: function() {
    $(this).on('focus', function() {
      alert($(this).val());
    )
  }
})
$("#input-demo").alertContentWhenFocus();

$.extend(object)

当想给jQuery类添加静态方法时,我们可以做如下操作:

$.extend({
  min: function(x, y) {return x < y ? x : y;},
  max: function(x, y) {return x > y ? x : y;}
})

jQuery.extend([deep], target , object1 , objectN );

该方法可用于一个或其它多个对象来扩展其中一个对象,并返回被扩展的对象,当我们提供两个或两个以上的对象给$.extend时,对象所有的属性将会添加到目标对象,因此目标对象的参数将会被修改,若我们想保留原对象,我们可以传递一个空对象作为目标对象。当目标对象为空时,jQuery对象将会被默认为目标对象,这时相当于我们在jQuery的命名空间下添加新的功能,这是常见的插件开发模式。

  • deep:
    可选属性,当其值为true时,递归合并(又叫做深拷贝),当缺省时默认为false,是不会进行递归的合并操作的,但不可第一个参数传递false

  • target:
    目标对象,将附加对象所包含的额外属性传递给目标对象作为新的参数,如果它是唯一的参数,这也为着目标参数被省略,此时,jQuery对象本身将被默认为目标对象,将扩展jQuery的命名空间,当我们想向jQuery中添加新函数时需要用到

  • object1:一个对象,它包含额外的属性合并到第一个参数 objectN:包含额外的属性合并到第一个参数

实例

var object = $.extend({}, object1, object2);

合并object1和object2对象,并在不修改object1对象的情况,合并后结果将会赋值给object

var settings = {first:'hello', second: 'world'};
var options = {first:'hello', second: 'JavaScript',third: 'nodeJs'};
var results = $.extend({}, settings, options);

输出:results 为 {first: "hello", second: "JavaScript", third: "nodeJs"}

$.extend(obj1,obj2)

合并两个对象,并修改第一个对象

var obj1 = {first: 1, second: {height: 178, weight: 70,length:100}};
var obj2 = {second: {height:180, weight:65, width: 90}, third: 90};
$.extend(obj1, obj2);

输出结果为:{first: 1, second: {height:180,weight:65, width: 90}, third: 90}

细心的读者可能会发现,输出的结果和我们预想的结果好像有点不同,输出结果的second属性与目标对象的second属性相比少了length这个属性,原因是在这种情况下,$.extend()的合并操作不是递归的,这意味着当如果目标对象的属性本身是一个对象或者数组,那么第二个对象相同的key属性的value值将会覆盖第一个对象的value值,说明两个对象相同key的value值不是合并的关系,而是覆盖与被覆盖的关系。

$.extend(true,obj1,obj2)

当第一个值为true时,那么在对象上将会进行递归的合并,而不是简单的替换关系了,这样说可能有点深奥,下面看个例子就明白了。

var obj1 = {first: 1, second: {height: 178, weight: 70}};
var obj2 = {second: {height:180, weight: 65, width: 90}, third: 90};
$.extend(true,obj1,obj2)

输出结果为:{first: 1, second: Object, third: 90}

有注意的读者应该会发现,这个例子和上述的例子基本是相同的,但结果却是我们预想的结果了,当$.extend()的第一个参数为true时,在对象执行的合并将会是递归的合并,是比较合并的,而不是简单的替换与覆盖。

[后记]:这篇博文同样花费了挺久的时间,是自己在工作闲暇之余抽空搜寻资料创作的。在撰写的过程中,我发现一个现象,一个并不难的知识点,若自己在网上搜寻资料看懂理解并不需要花费多少时间,但若是要将自己所理解撰写成博文却要难上数倍,首先要理清自己表达的思路,要将自己理解的过程梳理清楚,由浅至深结合例子将这个知识点分析透彻,以求读者在阅读这篇文章的过程中能花费更短的时间读懂。我不是一个聪明的人,所以我看明白一个知识点需要花费的功夫可能会比其他人更长些,因此写出来的东西往往啰嗦些,希望这篇博文对大家有所帮助。以上皆个人愚见,请笑纳!


胡洋学习栈
在才华撑不起梦想的时候,安静读书,在前途迷茫等待的日子里,刻苦读书

在才华撑不起梦想的时候,安静读书,在前途迷茫等待的日子里,刻苦读书

116 声望
9 粉丝
0 条评论
推荐阅读
关于JS、JQ获取可视区域的高度、宽度以及屏幕分辨率的那些事
document.body.clientWidth;//网页可见区域宽document.body.clientHeight;//网页可见区域高document.body.offsetWidth;//网页可见区域宽(包括边框的宽)document.body.offsetHeight;//网页可见区域高(包括边框的...

胡洋5阅读 15.4k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木145阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy45阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木63阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.2k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

在才华撑不起梦想的时候,安静读书,在前途迷茫等待的日子里,刻苦读书

116 声望
9 粉丝
宣传栏