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

1、简介

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

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

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

2、理论介绍

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

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

换种说法来解释的话:

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

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

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

3、代码类比

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

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

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

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

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

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

//用这个类来代替jQuerypublic 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的则将执行的元素也封装到里面了，当然我们可以把它作为参数传过去，但是，它仍然是将元素封装起来了。

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