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 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
php表单提交问题的解决方法
2011/04/12 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python生成随机密码的方法
2017/06/16 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
自我鉴定范文300字
2013/10/01 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
5s推行计划书
2014/05/06 职场文书
2015年外联部工作总结
2015/04/03 职场文书
投诉信格式范文
2015/07/02 职场文书
初中语文教学研修日志
2015/11/13 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
MySQL 分组查询的优化方法
2021/05/12 MySQL
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
cypress测试本地web应用
2022/06/01 Javascript