资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/理解jquery的$.extend

理解jquery的$.extend

CarterLi / 3200人阅读

摘要：当目标对象为空时，对象将会被默认为目标对象，这时相当于我们在的命名空间下添加新的功能，这是常见的插件开发模式。以上皆个人愚见，请笑纳

理解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时，在对象执行的合并将会是递归的合并，是比较合并的，而不是简单的替换与覆盖。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88150.html

相关文章

  • 浅谈jQuery.extend()和jQuery.fn.extend()

    摘要：在中并没有类的概念，不过为了好解释或者是思想上的统一。这样的话，不论是男人，女人，人等能继承这个技能方法了。这样就可以将进行合并，然后将合并结果返回给了。 最近在看一些jQuery的插件源码，发现了jQuery.extend()和jQuery.fn.extend()两个方法在插件中用到的频率非常高，在网上查询了下，说的要么是不清楚，要么就是不好理解。基于此，我写下自己的一些看些，希望大...

    EasonTyler 评论0 收藏0

  • jQuery扩展

    摘要：传递一个可拓展的默认对象参数而不是大量的参数给插件。始终命名空间的方法，事件和数据。 jq--CDN jQ -- jQuery源码解析 1、jQuery.extend() 与 jQuery.fn.extend()把jQuery看成一个封装js类 这样好理解$.extend是扩展的jQuery这个类 为jQuery类添加类方法 可以理解为静态方法 只跟这个类本身有关 跟具体的实例化对象是...

    hss01248 评论0 收藏0

  • jQuery结构简析

    摘要：构成类数组对象，引入，并使其自增版本信息模拟数组，即这里构成一个类数组对象由于这里把作为构造函数调用，得到一个对象，所以我们把作为的原型。 本文简单实现jQuery框架，深入理解javascript对象。本文的对照版本是jQuery-1.2.6.js 本文注重jquery结构设计思路，并不侧重具体功能的实现以及兼容性和安全性的部分。 首先建立基本框架如下： (function(wind...

    xiaokai 评论0 收藏0

  • 前端基础进阶（十一）：详细图解jQuery对象，以及如何扩展jQuery插件

    摘要：而在构造函数中，返回了的实例对象。在中直接返回过的实例，这里的是的真正构造函数最后对外暴露入口时，将字符与对等起来。因此当我们直接使用创建一个对象时，实际上是创建了一个的实例，这里的正真构造函数是原型中的方法。 showImg(https://segmentfault.com/img/remote/1460000008749398); 早几年学习前端，大家都非常热衷于研究jQuery源...

    RebeccaZhong 评论0 收藏0

  • jQuery插件开发

    摘要：所以要先了解一下插件的三种开发方式通过来扩展通过向添加新的方法通过应用的部件工厂方式创建第三种方法是用来开发更高级的部件的。 jQuery插件开发模式 说到jQuery插件的编写，起初我把它当做封装一个方法那样简单，这显然是错的，因为这让我一开始完全不知道如何下手去编写一个插件。所以要先了解一下jQuery插件的三种开发方式： 通过$.extend()来扩展jQuery 通过$.fn...

    wall2flower 评论0 收藏0

发表评论

登陆后可评论

0条评论

CarterLi

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<