jquery底层方法扩展

在实际项目开发的时候，总会有一些自定义的方法会在项目上的各个地方使用到（譬如说 金额转换方法 等）。这时，将这些方法定义为公共的、便于调用的方式，能极大程度简化开发，并且易于维护（譬如后期金额格式有调整，直接修改公共方法即可）。

定义公共方法的方式用很多种，可以写在一个js文件中供各页面引用、可以写成一个公共模块给需要的地方引入、等等

这里我们介绍在jquery底层扩展的方式来提供公共调用的方法。

在jquery中，方法扩展有两种方式：

• $.extend(Object);　　　// jquery 本身的扩展方法
• $.fn.extent(Object);　 // jquery 所选对象扩展方法

一、$.extend

$.extend扩展的方式，相当于在jquery方法里直接新增方法。并且像调用jquery方法一样调用。
如：$.ajax 是jquery的方法，用$.extend 扩展后的方法， 与$.ajax属于同一性质。

• 定义的方式与平时写的jquery方法没区别，关键就是带上$.extend。
• 调用的话就是直接$调用。

//定义
$.extend({ 
	//自定义方法1
	myFun1: function (data) { 
	alert(data); 
	}, 
	//自定义方法2
	myFun2: function (data) { 
	alert(data); 
	} 
}); 

//调用：
$.myFun1("Hi,Stone");  

二、$.fn.extend

$.fn.extend扩展的方式，是指在jquery对象上进行的扩展。
其中, $.fn === $.prototype
即：$.fn.extend()是在jquery的原型链上添加属性或方法，是在jquery上添加插件的方法之一，需要jquery对象实例化后才能调用。

有两种写法：
写法一：

//定义
$.fn.extend({ 
	myFun: function (data) { 
		$(this).html(data); 
	} 
}); 

//调用：
$("#myDiv").myFun("testFun"); //其中ShowHtml为我的jQuery所选对象的扩展方法，多个扩展方法之间用英文逗号隔开。 

写法二：

(function ($) { 
	$.fn.myFun= function (data) { 
		$(this).html(data); 
	}; 
})(jQuery) 

//调用方式同上

三、两种扩展方式的比较

$.extend 是在全局范围内进行的扩展，相当于在jquery源码下新增了方法，直接调用。
$.fn.extend 是在jquery对象之下进行的方法扩展，相当于在jquery选择器下给各对象新增了方法，在选择具体对象之后，才可以调用新增的方法。这种方式不会影响到jquery原本的方法，所以大多数插件都是使用这种方式进行各自的方法扩展。