`

jQuery.extend 和 jQuery.fn.extend详解

阅读更多

        经常使用jQuery的朋友很难避免用到$.extend()和$.fn.extend(),具体这两个方法怎么用呢,什么时候用到呢。做个自我总结:

       首先翻看jQuery API(http://api.jquery.com/jQuery.extend/

          

   jQuery.extend()

       描述:合并两个或者多个对象的内容到第一个对象中。.

          

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

  •       target
          类型: 对象
          目标对象,该对象将接收其他对想象的属性构成新的属性,如果它是唯一的参数,那么就会拓展到jQuery名称空间
  •      object1
         类型: 对象
          一个用来合并的包含附加属性的对象。
  •      objectN
         类型: 对象
         用来合并的包含附加属性的第N个对象。

      

例:

   合并两个对象:

      

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
var object1 = {
  computer : {cpu: 5, disk: 'FAT16' },
  mouse : {length: 2, price: 100},
};
var object2 = {
  computer: {cpu: 6, price: 200},
  mouse: 100,
  videoCard: 2
};
 
/* 合并对象2到对象1 */
$.extend(object1, object2);
/* 输出方法 */
var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
  var arr = [];
  $.each(obj, function(key, val) {
    var next = key + ": ";
    next += $.isPlainObject(val) ? printObj(val) : val;
    arr.push( next );
  });
  return "{ " +  arr.join(", ") + " }";
};
 
$("#log").append( printObj(object1) );
</script>
 
</body>
</html>

    合并之后输出的结果     


   显然很好用,所以通常我们用来合并参数。(为了保留这个两个原始的对象,可以使用空对象{}做target去接收)

    

     

$.fn.JqueryTest.defaults = {
		    language: 'zh', 
                    messages:{
		    }
 }

var options = { language: zh, name: "bar" };
/* 合并默认参数,又不会修改defaults中的值*/
var settings = $.extend({}, $.fn["JqueryTest"].defaults, options);

 

 

 

    

    合并对象到jQuery命名空间:(当参数只有一个的情况下,jQuery只好自己作为target接收这个对象):通常用来给jQery添加一个静态方法

     

var showLogObj = {
	showLog : function(html){
		$("#log").append(html);
	}
}
$.extend(showLogObj);
$.showLog(printObj(objAll));//直接用$使用

   

 

     

  jQuery.fn.extend()

    描述:扩展 jQuery 元素集来提供新的方法(通常用来制作插件)

     

   jQuery.fn.extend(object) 

  •       object
          类型: 对象
          用来扩充 jQuery 对象。

  

   解:打开jquery源码我们可以看到

    

 

   jQuery.fn.extend = jQuery.prototype.extend

 

   你可以拓展一个对象到jQuery的 prototype里去,这样的话就是插件机制了。

     

(function( $ ){

  $.fn.tooltip = function( options ) {  
  };
  //等价于
  var tooltip = {
	  function(options){
	  }
  };
  $.fn.extend(tooltip) = $.prototype.extend(tooltip) =  $.fn.tooltip
})( jQuery );

 

     拓展覆盖对象(类似于重写)

     在公用js中定义了一个对象

      

! function ($) {
  commonObj = {
        afterInitpage: function () {}, 
        initValidator: function () {},
    };
}(window.jQuery)

 

       在具体页面实现以下。

       

       

 $.extend(comonObj, {
    //覆盖为具体的function
	afterInitpage : function(){
		alert('do some thing')
	},
	initValidator: function () {
		
		alert('do some thing');
	},
	//还可以添加新的功能函数
	newFunction :function(){
	
	}

});

      

     end:

       当然还有大把用途,大家可以分享下。

 

 

      

  • 大小: 2 KB
  • 大小: 20.9 KB
分享到:
评论

相关推荐

    jQuery.extend 函数详解

    ### jQuery.extend 函数详解 #### 一、概述 在JavaScript前端开发中,jQuery是一个非常流行的库,它简化了许多常见的操作,比如DOM操作、事件处理、AJAX交互等。`jQuery.extend`是jQuery提供的一个用于扩展jQuery...

    jQuery:jQuery.extend函数详解

    ### jQuery.extend函数详解 #### 一、概述 `jQuery.extend`是jQuery库中一个非常实用且功能强大的函数,主要用于合并两个或多个对象的属性至一个新的对象中。这使得开发人员能够在编写插件或其他代码时方便地扩展...

    jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...

    jQuery.js执行过程分析

    1. **`jQuery.extend`详解**: - **功能介绍**:`jQuery.extend`允许开发人员向jQuery对象或其原型添加新方法或属性。 - **实现原理**:该方法实际上是一个深拷贝的过程,能够将一个或多个对象的属性复制到目标...

    jQuery中extend()和fn.extend()方法详解

    jQuery中的`extend()`和`fn.extend()`方法是用于合并对象属性和方法的工具,它们在扩展和定制jQuery功能时起着关键作用。 首先,`jQuery.extend()`方法允许开发者将一个或多个对象的属性和方法合并到一个现有对象上...

    jQuery.js执行过程分析[收集].pdf

    《jQuery.js执行过程详解》 JavaScript是一门基于对象的脚本语言,其对象技术的实现方式独具特色。在JavaScript中,通常使用构造函数配合prototype对象来定义类和方法。jQuery库,作为JavaScript的一个强大工具集,...

    jQuery中extends详解[借鉴].pdf

    本文将深入解析`jQuery.extend`的工作原理和应用场景。 首先,`jQuery.extend`的基本用途是将一个或多个源对象(`src1, src2, src3...`)的属性合并到目标对象(`dest`)中。这个函数的原型通常写作`jQuery.extend...

    详解jQuery插件开发中的extend方法

    在jQuery插件开发中,`extend`方法是一个非常关键的工具,用于合并多个对象的属性和方法。这个方法允许开发者将自定义的功能扩展到jQuery核心或jQuery对象的实例上,从而实现插件功能的定制。 首先,让我们深入理解...

    jquery.timeage 使用

    jQuery.fn.extend({ timeagoCustom: function() { return this.timeago({ suffixA: "后", suffixB: "前", words: { second: "秒", minute: "分钟", hour: "小时", day: "天", week: "周", month: "月", ...

    jQuery.extend 函数及用法详细

    ### jQuery.extend 函数详解 #### 一、概述 jQuery.extend 是 jQuery 提供的一个强大工具函数,用于扩展和合并对象属性。它能够将多个对象的属性合并到目标对象中,并返回合并后的新对象。这个方法在开发 jQuery ...

    jQuery插件开发的两种方法及$.fn.extend的详解

    ### $.fn.extend的详解 $.fn.extend方法实际上是jQuery.prototype.extend方法的简写形式。该方法用于扩展jQuery对象的功能,即将一个或多个对象的方法和属性添加到jQuery的原型中,从而为所有jQuery对象实例提供新...

    jQuery中extend函数的实现原理详解

    在jQuery的API手册中,我们看到,extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法,尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的,但是它们的功能却不太一样。来看一下官方API...

    jquery的总体架构分析及实现示例详解

    `jQuery.fn` 和 `jQuery.prototype` 是同一件事情,它们都指向jQuery对象的原型,这允许我们为所有jQuery实例添加方法。例如: ```javascript jQuery.fn.someMethod = function() { // 方法实现 }; ``` `jQuery....

    jQuery中extend函数详解

    而jQuery.fn.extend()则是用来将对象的方法和属性复制到jQuery的原型中,这允许我们为jQuery实例添加新的方法,也就是扩展实例方法。 jQuery.extend()可以接受一个或多个参数,当只有一个参数时,表示将这个参数...

    RIA应用开发:8-jQuery插件概述.ppt

    【jQuery 插件开发详解】 在RIA(Rich Internet Application)应用开发中,jQuery是一个非常重要的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。jQuery插件是开发者为了增强和扩展jQuery功能而编写的代码...

    jQuery插件开发

    ### jQuery插件开发详解 #### 一、引言 随着前端技术的发展,jQuery因其轻量级、易用性以及强大的功能,在很长一段时间内成为前端开发的首选库之一。jQuery插件开发则是基于jQuery核心库的功能扩展,使得开发者...

Global site tag (gtag.js) - Google Analytics