jquery插件开发的几种方式

插件编写的目的是给已经有的一系列方法或函数作一个封装，以便在其余地方重复使用，方便后期维护。

1、jQuery插件开发方式

一、经过$.extend()来扩展jQuery

二、经过$.fn 向jQuery添加新的方法

三、经过$.widget()应用jQuery UI的部件工厂方式建立

 

2、三种jQuery插件开发方式说明

 

一、$.extend()相对简单，通常不多可以独立开发复杂插件，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。

二、咱们调用经过$.extend()添加的函数时直接经过$符号调用（$.myfunction()），而不须要选中DOM元素($('#example').myfunction())。

三、$.widget()是一种高级的开发模式，该模式开发出来的部件带有不少jQuery内建的特性，好比插件的状态信息自动保存，各类关于插件的经常使用方法等

四、$.fn则是通常插件开发用到的方式，能够利用jQuery强大的选择器带来的便利，以及将插件更好地运用于所选择的元素身上，使用的插件也大可能是经过此种方式开发。

 

3、$.extend()扩展jQuery的实例

 

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'aaa') + '!');
    }
})
$.sayHello(); //Hello,aaa
$.sayHello('bbb'); //Hello,bbb

说明：上面代码中，经过$.extend()向jQuery添加了一个sayHello函数，而后经过$直接调用。

 

4、$.fn方式插件开发

 

一、定义

$.fn.pluginName = function() {    //your code here}

二、定义说明

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

 

三、简单实例

将页面上全部连接颜色转成红色，则能够这样写这个插件

 

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

转载自：jquery插件开发的几种方式  http://www.studyofnet.com/news/1203.html