热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

JQuery中extend的用法实例分析

这篇文章主要介绍了JQuery中extend的用法,实例分析了extend的功能、定义及相关使用技巧,需要的朋友可以参考下

本文实例讲述了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 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程序设计有所帮助。


推荐阅读
  • 通过使用jQuery库,本文详细介绍了如何实现当鼠标悬停在图标上时,图标自动高亮的动态效果。该技术不仅提升了用户体验,还增强了网页的视觉吸引力。代码示例和详细步骤已提供,方便开发者快速集成到项目中。 ... [详细]
  • 本文详细解析了 jQuery 中的大于和小于选择器的使用方法,通过具体示例展示了这些选择器在实际开发中的应用场景和技巧。适合初学者和有一定基础的开发者参考,帮助他们更好地理解和运用这些强大的选择器功能。 ... [详细]
  • 需求:在指定的DIV区域内点击时,需展示该区域内的附加操作面板;而在区域外点击时,则应自动隐藏该附加操作面板。通过精准的事件监听与处理,确保用户交互体验的流畅性和直观性。 ... [详细]
  • Django框架进阶教程:掌握Ajax请求的基础知识与应用技巧
    本教程深入探讨了Django框架中Ajax请求的核心概念与实用技巧,帮助开发者掌握异步数据交互的方法,提升Web应用的响应速度和用户体验。通过实例解析,详细介绍了如何在Django项目中高效实现Ajax请求,涵盖从基础配置到复杂场景的应用。 ... [详细]
  • 构建顶级PHP博客系统:实践与洞见
    构建顶级PHP博客系统不仅需要扎实的技术基础,还需深入理解实际应用需求。本文以Zend Studio为开发环境,MySQL作为数据存储,Apache服务器为运行平台,结合jQuery脚本语言,详细阐述了从环境搭建到功能实现的全过程,分享了开发PHP博客管理系统的宝贵经验和实用技巧。 ... [详细]
  • 游民星空专题页面采用了哪些前端技术和插件? ... [详细]
  • $apply() 方法允许从 AngularJS 框架外部触发表达式的执行,确保其在 AngularJS 的上下文中运行。例如,当你使用 `setTimeout()` 或者集成第三方库时,可以通过调用 `$apply()` 来确保事件更新能够被 AngularJS 检测到并触发脏检查机制,从而实现数据的双向绑定。这一过程不仅保证了数据的一致性,还提升了应用的响应速度和用户体验。 ... [详细]
  • Select2.js下拉框应用总结与实践要点
    在使用Select2.js下拉框插件的过程中,积累了诸多实践经验与心得。尽管最初觉得Select2在某些方面不尽如人意,但在对比了其他选项后,发现其仍是最优选择。本文将详细探讨Select2.js的配置、优化技巧及常见问题解决方法,帮助开发者更好地利用这一强大的前端工具。 ... [详细]
  • 在进行前端JavaScript国际化(i18n)的过程中,为了从cookie中获取语言信息并动态加载相应资源,我决定将语言检测逻辑和i18n初始化代码直接嵌入到index页面中,使用了Velocity模板引擎的语法。这种方法不仅简化了代码结构,还提高了语言切换的灵活性和响应速度。 ... [详细]
  • 在编程中,`SyntaxError: unterminated string literal` 错误通常出现在使用 jQuery 或其他 JavaScript 库时,表示某个字符串字面量未正确闭合。这种错误通常是由于代码中的引号不匹配或缺失导致的,例如在字符串中意外地包含了未转义的引号字符。解决此问题的方法是仔细检查相关代码段,确保所有字符串都已正确闭合,并且引号已适当转义。此外,使用现代代码编辑器或 IDE 的语法高亮功能可以帮助快速定位此类问题。 ... [详细]
  • 在CSS中为文本框添加黑色边框是一个简单而有效的方法,可以显著提升网页元素的视觉效果。本文将详细介绍如何通过CSS代码轻松实现这一目标,包括设置边框宽度、样式和颜色的具体步骤,帮助开发者快速掌握这一技巧。 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
  • 本研究聚焦于利用Java、PHP和Python开发的汽车销售管理系统,旨在为计算机科学专业学生的毕业设计提供参考。项目采用BS架构,结合多种编程语言的优势,实现高效的数据管理和用户交互。该系统不仅涵盖了汽车销售的核心功能,还通过集成先进的技术栈,提升了系统的稳定性和扩展性。 ... [详细]
  • 本文探讨了如何通过JavaScript和jQuery优化跨浏览器的窗口尺寸调整事件处理方法,详细分析了不同浏览器间的兼容性问题,并提供了高效、稳定的解决方案,以提升用户体验和页面响应速度。 ... [详细]
  • EasyUI作为一种高效的前端框架,显著简化了JavaScript代码的编写,提升了开发效率。在构建窗口应用程序时,首先需要引入EasyUI所需的JS文件和CSS样式表。由于EasyUI依赖于jQuery,因此还需确保正确加载jQuery库。通过这种方式,开发者能够快速实现界面组件的动态交互与美观布局,为用户提供更加流畅的使用体验。 ... [详细]
author-avatar
四月草上飞2602920415
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有