jQuery.extend 和 jQuery.fn.extend详解

最新推荐文章于 2020-06-17 00:40:04 发布

xujunxiong0621

最新推荐文章于 2020-06-17 00:40:04 发布

阅读量218

点赞数

分类专栏： Jquery 文章标签： jQuery.extend $.extend jQuery.extend jQuery.fn.extend jquery extend

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

经常使用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:

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

xujunxiong0621

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery.extend 和 jQuery.fn.extend详解

经常使用jQuery的朋友很难避免用到$.extend()和$.fn.extend()，具体这两个方法怎么用呢，什么时候用到呢。做个自我总结：首先翻看jQuery API(http://api.jquery.com/jQuery.extend/) jQuery.extend() 描述:合并两个或者多个对象的内容...
复制链接

扫一扫