JQuery中extend的用法实例分析


Posted in Javascript onFebruary 08, 2015

本文实例讲述了JQuery中extend的用法。分享给大家供大家参考。具体分析如下:

extend()函数是jQuery的基础函数之一,作用是扩展现有的对象。extend是我们在写插件的过程中常用的方法,该方法有一些重载原型。$.extend(prop) 用于扩展jQuery对象,可以用于把函数添加到jQuery名称空间中。

一、jQuery.extend函数的源码

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
  //如果为深度复制,则目标对象和原对象游标值i,以及深度值都进行更新
  if ( typeof target === "boolean" ) {
    deep = target;
    target = arguments[1] || {};
    // skip the boolean and the target
    i = 2;
  }

  // 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
  //当参数值长度为1的情况下,目标对象就为jQuery自身
  if ( length === i ) {
    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
         //深度复制只有属性深度多于俩层的对象关系的结构的,如{a:{s:21,age:11}}或{a:['s'=>21,'age'=>11]}
        if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
          if ( copyIsArray ) {//如果是数组对象
            copyIsArray = false;
            clone = src && jQuery.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 ) {//非深度CP直接覆盖目标属性
          target[ name ] = copy;
        }
      }
    }
  }

  // Return the modified object
  return target;
};

二、Jquery的扩展方法原型是:

1、extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:
 
2、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"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。
 
3、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"}}

二、Jquery中extend方法省略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程序设计有所帮助。

Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
关于延迟加载JavaScript
May 05 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
jQuery中noConflict()用法实例分析
Feb 08 #Javascript
jquery实现聚光灯效果的方法
Feb 06 #Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 #Javascript
JQuery中serialize()用法实例分析
Feb 06 #Javascript
jQuery中on()方法用法实例详解
Feb 06 #Javascript
JS实现文字向下滚动完整实例
Feb 06 #Javascript
jquery中filter方法用法实例分析
Feb 06 #Javascript
You might like
php 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
jQuery实现简单日历效果
2020/07/05 jQuery
python遍历数组的方法小结
2015/04/30 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python频繁写入文件时提速的方法
2019/06/26 Python
python应用文件读取与登录注册功能
2019/09/23 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
自荐信格式技巧有哪些呢
2013/11/19 职场文书
结婚典礼证婚词
2014/01/11 职场文书
大学生创业感言
2014/01/25 职场文书
中学生逃课检讨书
2015/02/17 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
银行服务理念口号
2015/12/25 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python