jQuery插件开发模式

jQuery插件开发模式

软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能更好地组织我们的代码，并且从这些前人总结出来的模式中学到很多好的实践。

根据兄弟连教育（www.lampbrother.net）jQuery高级编程的描述，jQuery插件开发方式主要有三种：

通过$.extend()来扩展jQuery

通过$.fn向jQuery添加新的方法

通过$.widget()应用jQueryUI的部件工厂方式创建

通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心，这里不细说。

而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。请看下面的例子。

$.extend({sayHello:function(name){console.log('Hello,'+(name?name:'Dude')+'!');}})$.sayHello();//调用$.sayHello('Wayou');//带参调用

上面代码中，通过$.extend()向jQuery添加了一个sayHello函数，然后通过$直接调用。到此你可以认为我们已经完成了一个简单的jQuery插件了。

但如你所见，这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。

$.extend({log:function(message){varnow=newDate(),y=now.getFullYear(),m=now.getMonth()+1,//！JavaScript中月分是从0开始的d=now.getDate(),h=now.getHours(),min=now.getMinutes(),s=now.getSeconds(),time=y+'/'+m+'/'+d+''+h+':'+min+':'+s;console.log(time+'MyApp:'+message);}})$.log('initializing...');//调用

但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。

插件开发

下面我们就来看第二种方式的jQuery插件开发。

基本方法

先看一下它的基本格式：

$.fn.pluginName=function(){//yourcodegoeshere}

基本上就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

比如我们将页面上所有链接颜色转成红色，则可以这样写这个插件：

$.fn.myPlugin=function(){//在这里面,this指的是用jQuery选中的元素//example:$('a'),则this=$('a')this.css('color','red');}

在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。

所以在上面插件代码中，我们在this身上调用jQuery的css()方法，也就相当于在调用$('a').css()。

理解this在这个地方的含义很重要。这样你才知道为什么可以直接商用jQuery方法同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用，下面会讲到。初学容易被this的值整晕，但理解了就不难。

现在就可以去页面试试我们的代码了，在页面上放几个链接，调用插件后链接字体变成红色。

<ul><li><ahref="http://www.webo.com/liuwayong">我的微博</a></li><li><ahref="http://http://www.cnblogs.com/Wayou/">我的博客</a></li><li><ahref="http://wayouliu.duapp.com/">我的小站</a></li></ul><p>这是p标签不是a标签，我不会受影响</p><scriptsrc="jquery-1.11.0.min.js"></script><scriptsrc="jquery.myplugin.js"></script><scripttype="text/javascript">$(function(){$('a').myPlugin();})</script>

下面进一步，在插件代码里处理每个具体的元素，而不是对一个集合进行处理，这样我们就可以针对每个元素进行相应操作。

我们已经知道this指代jQuery选择器返回的集合，那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了，但此刻要注意的是，在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下。

比如现在我们要在每个链接显示链接的真实地址，首先通过each遍历所有a标签，然后获取href属性的值再加到链接文本后面。

更改后我们的插件代码为：

$.fn.myPlugin=function(){//在这里面,this指的是用jQuery选中的元素this.css('color','red');this.each(function(){//对每个元素进行操作$(this).append(''+$(this).attr('href'));}))}

调用代码还是一样的，我们通过选中页面所有的a标签来调用这个插件

到此，你已经可以编写功能简单的jQuery插件了。是不是也没那么难。