积跬步，聚小流------实例分析jquery开发插件两种方法的区别

1、简介

jquery为开发插件提供了两个方法：

* jquery.extend(object); 为jquery类本身添加新的方法

* jquery.fn.extend(object); 用来为jquery对象添加新的方法

2、理论介绍

分析这两个方法，不同点就在于中间多了一个.fn，那么这个.fn又是什么意思呢？

$.fn是指jquery的命名空间，加了fn的方法和属性，会对jquery的每一个实例有效。

换种说法来解释的话:

jquery本身是一个类，有它的属性和方法，赤裸裸的“万物皆对象”嘛，

加了.fn的方法就是相当于给这个类中添加了一个成员函数，成员方法，也就是说每次对这个类实例化的时候，实例化对象都可以调用这个方法。

而没有加.fn的方法，则是类似于加了一个静态函数，使用的时候可以直接调用。

3、代码类比

如果单纯的解释不清楚话，我们可以用java代码来类比下：

//用这个类来代替jQuery
public class Jquery{
	private String div; //有默认的属性
	public void fade(){ //有默认的方法
		...
	}
}

如果.extend执行后，假定执行方法为scrolltotop(),则相应的代码则是：

//用这个类来代替jQuery
public class Jquery{
	private String div;
	public void fade(){
		...
	}
    public static void scrolltotop(){ //添加了一个静态方法
    	...
    }
<span style="font-size:14px;">}</span>

如果我们需要调用这个方法，则直接调用Jquery.scrolltotop().

而如果执行的是.fn.extend,则完成的代码则为：

//用这个类来代替jQuery
public class Jquery{
	private String div;
	public void fade(){
		...
	}
    public void scrolltotop(){
    	...
    }
}

如果这时调用这个方法，我们则需要执行的方法时

Jquery jquery=new Jquery;
jquery.scrolltotop();

说到这里，是不是就很明白了呢，如果说还有点疑惑，那我们来用实例分析下

4、实例分析

我们用“返回顶部”来作为一个应用实例。首先我们用.extend来实现下，并模拟调用

;(function($){
	$.extend({
		scrolltotop:function(speed){
			speed=typeof speed==="number"?speed:500;
			$("#toTop").click(function(event){
				$("html,body").stop().animate({
					scrollTop:'0px'
				},speed)
			});
		},
	});
})(jQuery)

这时候我们调用的时候，只需要在页面中加上：

<script type="text/javascript">
  $.scrolltotop(400);
</script>

接下来我们在用.fn.extend来实现下，并进行模拟调用

<pre name="code" class="javascript">;(function($) {
		$.fn.extend({
			scrolltotop:function(speed){
				speed=typeof speed==="number"?speed:500;
				$("html,body").stop().animate({
					scrollTop:'0px'
				},speed);
			return this;
			}
	});
})(jQuery);

而我们需要调用的时候，则是

<script type="text/javascript">
	$("#totop").click({
		$("body").scrolltotop(400);
		return false;	
	})
</script>

这样就可以区别的更清楚了，再加了.fn的方法中，我们封装的全部是方法和实现效果，而没有.fn的则将执行的元素也封装到里面了，当然我们可以把它作为参数传过去，但是，它仍然是将元素封装起来了。

不知道这两个究竟孰优孰劣，不过灵活性上个人更倾向于后者。当然要区分不同的功能，像整个网站的"回到顶部"只有一个，用前者也更简便吧。

积跬步，聚小源-实例分析jquery开发插件两种方法的区别

1、简介

2、理论介绍

3、代码类比

4、实例分析

相关推荐